Button Options
Description
The button plugin, which is used by the framework to dynamically enhance buttons, has the following options:
Corners
corners boolean default: true
By default, buttons will have rounded corners.
Setting this option to false will remove the rounded corners.
This option is also exposed as a data attribute: data-corners="false".
$( "#button1" ).button({ corners: false });Icon
icon string default: null
Sets the icon for the button. This option is also exposed as a data attribute:
data-icon="plus".
$( "#button1" ).button({ icon: "home" });Iconpos
iconpos string default: "left"
Sets the icon position. The possible values are: "left", "right", "top", "bottom", and "notext".
The "notext" value will display the button as an icon-only button with no text.
This option is also exposed as a data attribute: data-iconpos="notext".
$( "#button1" ).button({ iconpos: "notext" });iconshadow
iconshadow boolean default: true
When true, jQuery mobile will add a drop shadow to the icon.
This option is also exposed as a data attribute: data-iconshadow="false".
$( "#button1" ).button({ iconshadow: false });initSelector
initSelector CSS selector string default: "button, [type='button'], [type='submit'], [type='reset'], [type='image']"
The initSelector is used to define the selectors that are used to trigger the automatic initialization.
For instance, all elements that are matched by the default selector will be
enhanced by the button plugin. To override this selector, bind to the
mobileinit event and update the selector as necessary:
$( document ).bind( "mobileinit", function(){
$.mobile.button.prototype.options.initSelector = "...";
});
inline
inline boolean default: false
If set to true, this will make the button appear as an inline button. By default, buttons will consume the entire width of their container. Inline buttons only consume the width of their text.
This option is also exposed as a data attribute: data-inline="true".
$( "#button1" ).button({ inline: true });shadow
shadow boolean default: true
By default, buttons will have a drop shadow applied.
Setting this option to false will remove the drop shadow.
This option is also exposed as a data attribute: data-shadow="false".
$( "#button1" ).button({ shadow: false });