sioux Navigation

More info from sioux: gerhardberger.github.io/sioux/

npm install sioux-navigation

Navigation (similar to the iOS one) for sioux.

Create

var Navigation = require('sioux-navigation');
 
// the first argument is in which the navigation will be inserted into
var nav = new Navigation(document.querySelector('.screen'), {
  isBarHidden: false
  , initWith: navElem
});

The navigation object

The stack contains and at the creation the initWith property and .push() method take an object too, which has to contain:

• title: the title in the bar, String
• contentFn: a function that returns DOM what will be inserted into the content part, Function
• complete: this function will be executed when the content will be loaded, Function

Properties

• stack: the stack of the windows in the navigation, the last elem of the stack is the one active on the screen
• isBarHidden: Boolean
• bar: the top bar element
• content: the content element
• segue: the Segue object (in the content element)

Methods

• .push(navElem): A new elem will be added to the stack and it will be displayed on screen.
• .pop(callback): The last elem of the stack will be popped and then the previous elem will be displayed. The callback will be executed when the animation finished.
• .hideBar(callback): Hides the top bar.
• .showBar(callback): Shows it.

var navObj = {
  title: 'Test Title'
  , content: function () {
    var div = document.createElement('div');
    div.innerText = 'Foo';
    return div;
  }
  , complete: function (content) {
    console.log('Completed!');
  }
};
 
navigation.push(navObj);