Via is a small library that allows you to load content on to a page dynamically
Demo
Installing
This library requires jQuery
git clone https://github.com/abdi0987/ViaJS.git Link to the app.js file
<script src='lib/app.js'></script>Usage
Example
Specifiy were to load the content
<div class="container"> <div id="title" via-views>Should stay hidden</div> <div id="content" via-views>Should stay hidden</div> </div>add via-views attribute to your div element to specify where to load the content
Specify your views url and a default view 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.html' }, { selector: "#content", templateUrl: 'views/index-content.html' }, ], about: [{ selector: "#title", templateUrl: 'views/about-title.html' }, { selector: "#content", templateUrl: 'views/about-content.html' }, ], contact: [{ selector: "#title", templateUrl: 'views/contact-title.html' // }, { // 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-href="home">Home</a></li> <li><a via-href="about">About</a></li> <li><a via-href="contact">Contact</a></li> </ul>Add __via-href attribute to every tag you are using to load your content and remeber that via-href value should be the same name you gave the views object.
