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 you can add to buttons.
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 buttonLinks 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.
For ease of styling, the framework automatically converts any button
or input
element with a type
of submit
, reset
, button
, or image
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 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 hte native control will be rendered.
Button based button:
Input type="button" based button:
Input type="submit" based button:
Input type="reset" based button:
Input type="image" based button: