viewSwitcher

A very basic View Switcher for single-page Websites.

See the Full Page Example or the quick 'n dirty documentation for more information. There's also a CV example to show how to create a two language CV using viewSwitcher.

Basic Usage

1. Load the Scripts

<script src="path/to/viewswitcher.min.js"></script>

2. Set up views by adding a data-view attribute to the wrapping element.

<section data-view="hello">
  <h1>Hello!</h1>
</section>


<section data-view="world">
  <h1>World!</h1>
</section>

3. Initiate default views and generate a menu (if you wish).

// Set options, currently only changeTitle is supported which prevents
// the page Title from being changed.
View.setOptions({
  changeTitle: false
})
// if no #hash is set, active the data-view="hello" View
View.initActive('hello'); 

// get a nav container
var nav = document.querySelector('nav');
// add the generated HTML to the nav container, the
// argument passed to getHtmlMenu is a string representing
// the class name assigned to all <li> elements.
nav.innerHTML = View.getHtmlMenu('list__item');