Skip to content

A JavaScript library that allows you to load HTML content dynamically

Notifications You must be signed in to change notification settings

IskrenStanislavov/ViaJS

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

53 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ViaJS Image

Via is a small library that allows you to load content on to a page dynamically

##Demo

ViaJS Demo (click me)

Installing

git clone https://github.com/abdi0987/ViaJS.git

Link to the app.js file

<script src='lib/app.js'></script>

##Usage ViaJS Image

###Example

Specifiy were to load the content

<div class="container" via-views></div>

add via-views attribute to your div element to specifiy where to load the content

Specifiy your views url and a defaultView if the user enters an invalid hashtag url.

Then call the init function and pass it your views

var views = {
    home: [{
            selector: "#title",
            templateUrl: 'views/index-title.php'
        }, {
            selector: "#content",
            templateUrl: 'views/index-content.php'
        },
    ],
    about: [{
            selector: "#title",
            templateUrl: 'views/about-title.php'
        }, {
            selector: "#content",
            templateUrl: 'views/about-content.php'
        },
    ],
    contact: [{
            selector: "#title",
            templateUrl: 'views/contact-title.php'
        // }, {
        //     selector: "#content",
        //     templateUrl: 'views/contact-content.php'
        },
    ],
    defaultView: {
        view: 'home'
    }
};

var via = new Via();

via.init(views);

now you can use the short version:

new Via(views);

and also

Then use an a tag

<ul class="nav navbar-nav">
    <li class=""><a via-link href="home">Home</a></li>
    <li><a via-link href="about">About</a></li>
    <li><a via-link href="contact">Contact</a></li>
</ul>

Remeber for the href attribute enter the same name you gave the views object and add via-link attribute to every tag you are using to load your content

About

A JavaScript library that allows you to load HTML content dynamically

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • HTML 49.1%
  • JavaScript 36.8%
  • PHP 12.8%
  • CSS 1.3%