Button Widget


Button Widgetversion added: 1.0

Description: Creates a button widget

QuickNav

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:

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

Get or set the corners option, after initialization:

1
2
3
4
5
// 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:

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

Get or set the enhanced option, after initialization:

1
2
3
4
5
// 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:

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

Get or set the icon option, after initialization:

1
2
3
4
5
// 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:

1
"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:

1
2
3
$( 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:

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

Get or set the theme option, after initialization:

1
2
3
4
5
// 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