Moobile.NavigationBar

Moobile.NavigationBar

545 641 ThomasEngels
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 the top 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" />