Buttons are coded with standard HTML anchor and input elements, then enhanced by jQuery Mobile to make them more attractive and useable on a mobile device. Use anchor links (a elements) to mark up navigation buttons, and input or button elements for form submission.
View the data- attribute reference to see all the possible attributes for buttons including adding icons or displaying them inline or grouped.
In the main content block of a page, you can style any anchor link as a button by adding the data-role="button" attribute. The framework will enhance the link with markup and classes to style the link as a button. For example, this markup:
<a href="index.html" data-role="button">Link button</a>
Produces this link-based button:
Link buttonNote: Links styled like buttons have all the same visual options as true form-based buttons below, but there are a few important differences. Link-based buttons aren't part of the button plugin and only just use the underlying buttonMarkup plugin to generate the button styles so the form button methods (enable, disable, refresh) aren't supported. If you need to disable a link-based button (or any element), it's possible to apply the disabled class ui-disabled yourself with JavaScript to achieve the same effect.
<a href="index.html" data-role="button" class="ui-disabled">Link button</a>
Produces this disabled link-based button:
Link buttonFor a more compact version that is useful in toolbars and tight spaces, add the data-mini="true" attribute to the button to create a mini version.
<a href="index.html" data-role="button" data-mini="true">Link button</a>
This will produce a button that is not as tall as the standard version and has a smaller text size.
Link buttonFor ease of styling, the framework automatically converts any button or input element with a type of submit, reset, or button into a custom styled button — there is no need to add the data-role="button" attribute. However, if needed, you can directly call the button plugin on any selector, just like any jQuery plugin:
$('[type="submit"]').button();
To preserve events bound to the original button or input, the framework hides the original element by making it transparent and positioning it over the new button markup. When a user clicks on the custom-styled button, they're actually clicking on the original element. To prevent a form button from being converted into an enhanced button, add the data-role="none" attribute and the native control will be rendered.
Button based button:
<button>Button element</button>
Input type="button" based button:
<input type="button" value="Button" />
Input type="submit" based button:
<input type="submit" value="Submit Button" />
Input type="reset" based button:
<input type="reset" value="Reset Button" />