Moobile.NavigationBarItem

Extends Moobile.BarItem

Provides an extended Moobile.BarItem that handles a title and buttons on both sides of the title.

Initialization

Syntax:

var navigationBarItem = new Moobile.NavigationBarItem([element], [options], [name]);

Parameters:

Name Type Description
element Optional Element The navigation bar item's element, element id or html string.
options Optional Object The navigation bar item's options, see below.
name Optional String The navigation bar item's name.

Options:

Name Type Description
className String The navigation bar item's extended CSS class name, defaults to null.
styleName String The navigation bar item's default style, defaults to null.
tagName String The navigation bar item's element tag name, defaults to div.

Generates:

<div data-role="item" class="bar-item navigation-bar-item">
    <div class="bar-title">
        <div data-role="title" class="text"></div>
    </div>
</div>

Notes:

Upon initialization, this control creates its title with a Moobile.Text instance using the navigation bar item element's content. For instance, if you create a navigation bar item like this:

<div data-role="navigation-bar">
    <div data-role="item">
        <div class="element-one"></div>
        <div class="element-two"></div>
    </div>
</div>

The result will be:

<div data-role="navigation-bar" class="navigation-bar">
    <div data-role="item" class="navigation-bar-item">
        <div data-role="title" class="title">
            <div class="element-one"></div>
            <div class="element-two"></div>
        </div>
    </div>
</div>

If you wish to put elements outside of the navigation bar item's title, you will have to specify which element has the title role:

<div data-role="navigation-bar">
    <div data-role="item">
        <div class="element-one"></div>
        <div data-role="title"></div>
        <div class="element-two"></div>
    </div>
</div>

Subclassing Notes:

This class overrides the following method:

Defined roles:

Name Description Applies to Note
item Defines an element actins as the Moobile.NavigationBarItem control Moobile.NavigationBar controls Use the data-item attribute to specify a subclass instead.
title Defines the element acting as the navigation bar item title. Moobile.NavigationBarItem controls If omitted, the contents of the navigation bar item's element will act as its title.

Examples:

Specifying an element that acts a navigation bar item control using the data-role attribute:
<div data-role="navigation-bar">
    <div data-role="item"></div>
</div>
Specifying an element that acts a navigation bar item control subclass using the data-role attribute:
<div data-role="navigation-bar">
    <div data-role="item" data-item="MyNavigationBarItem></div>
</div>

Methods

setTitle(title)

Sets the title using either a string or Moobile.Text instance. When provided with a string, this method creates a Moobile.Text object and assign the given string as its text.

Parameters:

Name Type Description
title Mixed The title as a string or a Moobile.Text instance.

Returns:

Examples:

Setting the title using a string:
var navigationBar = new Moobile.NavigationBar();
var navigationBarItem = navigationBar.getItem();
navigationBarItem.setTitle('Moo');
Setting the title using a Moobile.Text instance:
var navigationBar = new Moobile.NavigationBar();
var navigationBarItem = navigationBar.getItem();
navigationBarItem.setTitle(new Moobile.Text().setText('Moo'));

Note:

The CSS class bar-title-empty is added to the root element when the title is empty.


getTitle()

Returns the title.

Returns:

Example:

var navigationBar = new Moobile.NavigationBar();
var navigationBarItem = navigationBar.getItem();
navigationBarItem.setTitle('Moo');
navigationBarItem.getTitle(); // returns an instance of Moobile.Text

addLeftButton(button)

Adds a button at the left of the title.

Parameters:

Name Type Description
button Moobile.Button The button.

Returns:

Example:

var navigationBar = new Moobile.NavigationBar();
var navigationBarItem = navigationBar.getItem();
var buttonOne = new Moobile.Button();
navigationBarItem.addLeftButton(button);

addRightButton(button)

Adds a button at the right of the title.

Parameters:

Name Type Description
button Moobile.Button The button.

Returns:

Example:

var navigationBar = new Moobile.NavigationBar();
var navigationBarItem = navigationBar.getItem();
var buttonOne = new Moobile.Button();
navigationBarItem.addRightButton(button);

getButton(name)

Return a button that matches the specified name.

Parameters:

Name Type Description
name String The name of the button to search for.

Returns:

Example:

var navigationBar = new Moobile.NavigationBar();
var navigationBarItem = navigationBar.getItem();
var buttonOne = new Moobile.Button(null, null, 'me');
navigationBarItem.addButton(buttonOne);
navigationBarItem.getButton('me'); // returns buttonOne

removeButton(button, [destroy])

Removes a button.

Parameters:

Name Type Description
button Moobile.Button The button to remove.
destroy Optional Boolean Whether to destroy the button upon removal.

Returns:

Example:

var navigationBar = new Moobile.NavigationBar();
var navigationBarItem = navigationBar.getItem();
var buttonOne = new Moobile.Button();
var buttonTwo = new Moobile.Button();
navigationBarItem.addButton(buttonOne);
navigationBarItem.addButton(buttonTwo);
navigationBarItem.removeButton(buttoOne); // the navigation bar item contains only buttonTow

removeAllButtons([destroy])

Removes all buttons.

Parameters:

Name Type Description
destroy Optional Boolean Whether to destroy the buttons upon removal.

Returns:

Example:

var navigationBar = new Moobile.NavigationBar();
var navigationBarItem = navigationBar.getItem();
var buttonOne = new Moobile.Button();
var buttonTwo = new Moobile.Button();
navigationBarItem.addButton(buttonOne);
navigationBarItem.addButton(buttonTwo);
navigationBarItem.removeAllButtons(); // no buttons remains

Table of Contents