View Manager

The View Manager API is a lightweight framework for managing the visibility of DOM nodes.

Example

<nav data-nav="my-nav">
    <ul>
        <li><a href="#" data-show="my-view-1">My first view</a></li>
        <li><a href="#" data-show="my-view-2">My second view</a></li>
    </ul>
</nav>
<section class="view-manager" data-use-nav="my-nav">
    <article data-view="my-view-1">
        <h2>My First View</h2>
        <p>some content...</p>
    </article>
    <article data-view="my-view-2">
        <h2>My Second View</h2>
        <p>some content...</p>
    </article>
</section>

How To Use

Setup:

1. In your HTML, build each of the views in their own element. Assign them each a ‘data-view’ attribute and give them a URL friendly name.
   e.g. data-view="my-view"
2. Wrap the view elements in a container with a view-manager class.
3. Designate links to switch between views using the ‘data-show’ attribute. Use the name of a view to link to that view.
   <a href="#" data-show="my-view">See My View</a>

Options:

• To dictate the starting view, use the data-init-with attribute on the .view-manager container. (Defaults to first view in the DOM)
• Use the data-nav attribute on a nav container and the data-use-nav attribute on the .view-manager container to assign an external navigation for the views that is NOT part of the views themselves (a static nav).
• data-history="" : set to "true" to enable routing. Allows you to specify a view on page load. Requires browsers with the History API.