Extends Moobile.Bar
Provides an extended Moobile.Bar control that handles a Moobile.NavigationBarItem.
Initialization
Syntax:
var navigationBar = new Moobile.NavigationBar([element], [options], [name]);
Parameters:
Name | Type | Description |
---|---|---|
element Optional |
Element | The navigation bar’s element, element id or html string. |
options Optional |
Object | The navigation bar’s options, see below. |
name Optional |
String | The navigation bar’s name. |
Options:
Name | Type | Description |
---|---|---|
className |
String | The navigation bar’s extended CSS class name, defaults to null . |
styleName |
String | The navigation bar’s default style, defaults to null . |
tagName |
String | The navigation bar’s element tag name, defaults to div . |
Generates:
<div class="bar navigation-bar">
<div data-role="item" class="bar-item navigation-bar-item">
<div class="bar-title-wrapper">
<div data-role="title" class="text title"></div>
</div>
</div>
</div>
Notes:
Upon initialization, this control creates its item with a Moobile.NavigationBarItem instance using the navigation bar element’s content. For instance, if you create a navigation bar like this:
<div data-role="navigation-bar">
<div class="element-one"></div>
<div class="element-two"></div>
</div>
The result will be:
<div data-role="navigation-bar" class="bar navigation-bar">
<div data-role="item" class="bar-item navigation-bar-item">
<div class="element-one"></div>
<div class="element-two"></div>
</div>
</div>
If you wish to put elements outside of the navigation bar item, you will have to specify which element has the item
role:
<div data-role="navigation-bar">
<div class="element-one"></div>
<div data-role="item"></div>
<div class="element-two"></div>
</div>
Subclassing Notes:
This class overrides the following method:
willBuild
: Call the parent method at thetop
of your implementation if you override this method.
Defined roles:
Name | Description | Applies to | Note |
---|---|---|---|
navigation-bar |
Defines an element acting as a Moobile.NavigationBar control |
All components | Use the data-navigation-bar attribute to specify a subclass instead |
Examples:
Specifying an element that acts a navigation bar control using the data-role
attribute:
<div data-role="navigation-bar"></li>
Specifying an element that acts a navigation bar control subclass using the data-role
attribute:
<div data-role="navigation-bar" data-navigation-bar="MyNavigationBar" />