jQuery Mobile Buttons
Mobile applications are built upon the simplicity of tapping things you'd want displayed.
Creating a Button in jQuery Mobile
A button in jQuery Mobile can be created in three ways:
- Using the <input> element
- Using the <button> element with class="ui-btn"
- Using the <a> element with class="ui-btn"
Buttons in jQuery Mobile are automatically styled, making them attractive
and useable on both mobile devices and desktop computers. We recommend that you use the <a> element with
class="ui-btn" to link between pages, and <input> or <button> elements for form submission.
Note: Before version 1.4, we used the data-role="button" attribute to create a button in jQuery Mobile. As of 1.4, the framework use CSS classes to style buttons (except for <input> buttons).
To link between pages by buttons, use the <a> element with class="ui-btn":
jQuery Mobile provides an easy way for grouping buttons together.
Use the data-role="controlgroup" attribute together with data-type="horizontal|vertical" in a container element, to specify whether to group buttons horizontally or vertically:
<a href="#" class="ui-btn">Button 1</a>
<a href="#" class="ui-btn">Button 2</a>
<a href="#" class="ui-btn">Button 3</a>
By default, grouped buttons are grouped vertically with no margins and space between them. And only the first and the last button has rounded corners, which creates a nice look when grouped together.
To create a Back button, use the data-rel="back" attribute (Note: this will ignore the anchor's href value):
By default, buttons take up the full width of the screen. If you want a button that is only as wide as its content, or if you want two or more buttons to appear side by side, add the "ui-btn-inline" class:
More CSS Classes For Link Buttons
|ui-btn-b||Changes the color of the button to a black background with white text (default is gray background with black text).||Try it|
|ui-corner-all||Adds rounded corners to the button||Try it|
|ui-mini||Makes the button smaller||Try it|
|ui-shadow||Adds shadows to the button||Try it|
If you want to use more than one class, separate each class with a space,
like: class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow"
By default, <input> buttons have shadow and rounded corners. The <a> and <button> element does not.
For a complete reference of CSS classes for common styles, visit our jQuery Mobile CSS Classes Reference.
The next chapter demonstrates how to attach icons to your buttons.