Moobile.Button

Extends Moobile.Control

Provides a simple button control. The presentation of button is specific to its container. For instance, a button within a Moobile.Bar will look different from a button within an usual component.

Initialization

Syntax:

var button = new Moobile.Button([element], [options], [name]);

Parameters:

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

Options:

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

Generates:

<div class="button">
    <span data-role="label" class="text button-label"></span>
</div>

Notes:

Upon initialization, this control creates its label with a Moobile.Text instance using this button element’s content. For instance, if you create a button like this:

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

The result will be:

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

If you wish to put elements outside of the button’s label, you will have to specify which element has the label role:

<div data-role="button">
    <div class="element-one"></div>
    <div data-role="label"></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.
• destroy : Call the parent method at the bottom of your implementation if you override this method.

Defined roles:

Name	Description	Applies to	Note
button	Defines an element acting as a Moobile.Button control	All components	Use the data-button attribute to specify a subclass instead
label	Defines the element acting as the button’s label	Moobile.Button controls	If omitted, the contents of this button’s element will become its label.

Examples:

Specifying an element that acts a button control using the data-role attribute:

<div data-role="button"></div>

Specifying an element that acts a button control subclass using the data-role attribute:

<div data-role="button" data-button="MyButton"></div>

Specifying an element that acts a button control and the element that acts as its label:

<div data-role="button">
    <div data-role="label"></div>
</div>

Methods

setLabel(label)

Sets the label using either a string or a 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
label	Mixed	The label as a string or a Moobile.Text instance.

Returns:

• Moobile.Button This Moobile.Button instance.

Examples:

Setting the label using a string:

var button = new Moobile.Button();
button.setLabel('Moo');

Setting the label using a Moobile.Text instance

var button = new Moobile.Button();
button.setLabel(new Moobile.Text().setText('Moo'));

Note:

The CSS class button-label-empty is added to the root element when the label is empty.

---

getLabel()

Returns the label.

Returns:

• Moobile.Text The label.

Example:

var button = new Moobile.Button();
button.setLabel('Moo');
button.getLabel(); // returns a Moobile.Text instance