Mobile applications are built upon the simplicity of tapping things you'd want displayed.
A button in jQuery Mobile can be created in three ways:
 |
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:
|
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:
| 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.
Your message has been sent to W3Schools.