Moobile.Bar

Extends Moobile.Control

Provides a bar control that's usually positionned at the top of bottom of a view. The bar itself is not meant to contain components such as buttons or text; instead it has a Moobile.BarItem control which may contain these components.

Initialization

Syntax:

var bar = new Moobile.Bar([element], [options], [name]);

Parameters:

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

Options:

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

Generates:

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

Notes:

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

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

The result will be:

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

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

<div data-role="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:

Defined roles:

Name Description Applies to Note
bar Defines an element acting as a Moobile.Bar control All components Use the data-bar attribute to specify a subclass instead

Examples:

Specifying an element that acts a bar control using the data-role attribute:
<div data-role="bar"></div>
Specifying an element that acts a bar control subclass using the data-role attribute:
<div data-role="bar" data-bar="MyBar"></div>
Specifying an element that acts a bar control and the element that acts as its item:
<div data-role="bar">
    <div data-role="item"></div>
</div>

Methods

setItem(item)

Sets this bar's Moobile.BarItem control.

Parameters:

Name Type Description
item Moobile.BarItem The bar item.

Returns:

Example:

var bar = new Moobile.Bar();
var item = new Moobile.BarItem();
bar.setItem(item);

getItem()

Returns this bar's Moobile.BarItem control.

Returns:

Example:

var bar = new Moobile.Bar();
bar.getItem(); // returns a Moobile.BarItem instance created automatically.

Styles

default

dark

Table of Contents