0.0.7 • Published 11 years ago
sioux-ui-navigation v0.0.7
Sioux UINavigation
npm install sioux-ui-navigation
Navigation (similar to the iOS one) for sioux. demo (on desktop in Chrome use emulate touch events in devtools)
Inherits from
Create
var UINavigation = require('sioux-ui-navigation');
// the first argument is in which the navigation will be appended
var nav = new UINavigation(document.querySelector('.screen'), {
isToolbarHidden: true
, isBarHidden: false
, initWith: navElem
});
The navigation elem
The stack
contains and at the creation the initWith
property and .push()
method take an object, which has to contain:
- title: the title in the bar String
- content: the HTML what will be inserted into the
content
part DOM - complete: this function will be executed when the eleme 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
- isToolbarHidden: Boolean
- isBarHidden: Boolean
- bar: the top bar element
- toolbar: the bottom toolbar element
- content: the content element
- segue: the UISegue 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()
The last elem of the stack
will be popped and then the previous elemnt will be displayed.
.then(callback)
Chain it to the push
and pop
method and when they finish the callback
argument will be executed.
var navObj = {
title: 'Test Title'
, content: someHTML
, complete: function (content) {
console.log('Completed!');
}
};
navigation.push(navObj)
.then(function () {
console.log('Pushed!')
})
.pop()
.then(function () {
console.log('Popped!')
});