tinwinaung / FK-ViaJS

A JavaScript library that allows you to load HTML content dynamically

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

Demo

ViaJS Demo (click me)

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.