Button - jQuery Mobile

Button Widgetversion added: 1.0

Description: Creates a button widget

QuickNav

Options

Methods

Events

The jQuery UI button widget is bundled in jQuery Mobile with some changes. Thus, its API documentation fully describes its functionality.

Options

corners

Type: Boolean

Default: true

Applies the theme button border-radius if set to true.

This option is also exposed as a data attribute: data-corners="false".

Note: button option is deprecated in 1.5 and will be removed in 1.6

Code examples:

Initialize the button with the corners option specified:

$( ".selector" ).button({
  corners: false
});

Get or set the corners option, after initialization:

// Getter
var corners = $( ".selector" ).button( "option", "corners" );
 
// Setter
$( ".selector" ).button( "option", "corners", false );

enhanced

Type: Boolean

Default: false

Indicates that the markup necessary for a button widget has been provided as part of the original markup.

This option is also exposed as a data attribute: data-enhanced="true".

Code examples:

Initialize the button with the enhanced option specified:

$( ".selector" ).button({
  enhanced: true
});

Get or set the enhanced option, after initialization:

// Getter
var enhanced = $( ".selector" ).button( "option", "enhanced" );
 
// Setter
$( ".selector" ).button( "option", "enhanced", true );

icon

Type: String

Default: null

Applies an icon from the icon set.

The .buttonMarkup() documentation contains a reference of all the icons available in the default theme.

This option is also exposed as a data attribute: data-icon="star".

Code examples:

Initialize the button with the icon option specified:

$( ".selector" ).button({
  icon: "star"
});

Get or set the icon option, after initialization:

// Getter
var icon = $( ".selector" ).button( "option", "icon" );
 
// Setter
$( ".selector" ).button( "option", "icon", "star" );

iconpos

Type: String

Default: "left"

Positions the icon in the button. Possible values: left, right, top, bottom, none, notext. The notext value will display an icon-only button with no text feedback.

This option is also exposed as a data attribute: data-iconpos="right".

Note: button option is deprecated in 1.5 and will be removed in 1.6

initSelector

Type: Selector

Default: See below

The default initSelector for the button widget is:

"input[type='button'], input[type='submit'], input[type='reset']"

Note: This option is deprecated in 1.4.0 and will be removed in 1.5.0.
As of jQuery Mobile 1.4.0, the initSelector is no longer a widget option. Instead, it is declared directly on the widget prototype. Thus, you may specify a custom value by handling the mobileinit event and overwriting the initSelector on the prototype:

$( document ).on( "mobileinit", function() {
  $.mobile.button.prototype.initSelector = "div.custom";
});

Note: Remember to attach the mobileinit handler after you have loaded jQuery, but before you load jQuery Mobile, because the event is triggered as part of jQuery Mobile's loading process.

The value of this option is a jQuery selector string. The framework selects elements based on the value of this option and instantiates button widgets on each of the resulting list of elements.

(version deprecated: 1.4.0)

inline

Type: Boolean

Default: null (false)

If set to true, this will make the button act like an inline button so the width is determined by the button's text. By default, this is null (false) so the button is full width, regardless of the feedback content. Possible values: true, false.

This option is also exposed as a data attribute: data-inline="true".

Note: button option is deprecated in 1.5 and will be removed in 1.6

mini

Type: Boolean

Default: null (false)

If set to true, this will display a more compact version of the button that uses less vertical height by applying the ui-mini class to the outermost element of the button widget.

Note: mini option is deprecated in 1.5 and will be removed in 1.6

This option is also exposed as a data attribute: data-mini="true".

shadow

Type: Boolean

Default: true

Applies the drop shadow style to the button if set to true.

This option is also exposed as a data attribute: data-shadow="false".

Note: button option is deprecated in 1.5 and will be removed in 1.6

theme

Type: String

Default: null, inherited from parent

Sets the color scheme (swatch) for the button widget. It accepts a single letter from a-z that maps to the swatches included in your theme.

Possible values: swatch letter (a-z).

This option is also exposed as a data attribute: data-theme="b".

Code examples:

Initialize the button with the theme option specified:

$( ".selector" ).button({
  theme: "b"
});

Get or set the theme option, after initialization:

// Getter
var theme = $( ".selector" ).button( "option", "theme" );
 
// Setter
$( ".selector" ).button( "option", "theme", "b" );

wrapperClass

Type: String

Default: null

Allows you to specify CSS classes to be set on the button's wrapper element.

This option is also exposed as a data attribute: data-wrapper-class="custom-class".

Note: button option is deprecated in 1.5 and will be removed in 1.6