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).
Navigation Buttons
To link between pages by buttons, use the <a> element with class="ui-btn":
Grouped Buttons
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:
Example
<div data-role="controlgroup" data-type="horizontal">
<a href="#" class="ui-btn">Button 1</a>
<a href="#"
class="ui-btn">Button 2</a>
<a href="#"
class="ui-btn">Button 3</a>
</div>
Try it Yourself »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.
Back Buttons
To create a Back button, use the data-rel="back" attribute (Note: this will ignore the anchor's href value):
Inline Buttons
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
| Class | Description | Example |
|---|---|---|
| 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.