jQuery Mobile Button
Mobile applications are built on the simple click of things you want to display.
Create a button in jQuery Mobile
In jQuery Mobile, the button can be created in three ways:
- Use <button> element
- Use <input> element
- Use <a> elements with data-role = "button" of
 | In jQuery Mobile, the button will automatically styling, make them more attractive and availability on mobile devices. We recommend that you use <a> elements with data-role = "button" of the link, use the <input> or <button> element between the pages form submission. |
|---|
Navigation buttons
For through the button link between pages, use <a> elements with data-role = "button" property:
Inline button
By default, the button occupies the entire width of the screen. If you want a content only as wide as a button, or if you want to display two or more buttons side by side, add the data-inline = "true":
A combination of buttons
jQuery Mobile provides a simple way to combine a button.
Please put data-role = "controlgroup" attributes and data-type = "horizontal | vertical" used together to specify whether horizontal or vertical combinations of buttons:
Examples
<a href="#anylink" data-role="button">按钮 1</a>
<a href="#anylink" data-role="button">按钮 2</a>
<a href="#anylink" data-role="button">按钮 3</a>
</div>
try it"
| By default, the buttons are a combination of vertical composition, no margin and space between them. And only the first and last buttons are rounded, so that when they are combined together to create a beautiful look. |
|---|
Back button
To create a Back button, use data-rel = "back" property (which ignores anchor href value):
More links button instance
| class | description | Examples |
|---|---|---|
| ui-btn-b | Modify button color is black, the font is white (default gray background, black font). | try it |
| ui-corner-all | Button to add rounded corners | try it |
| ui-mini | Making small buttons | try it |
| ui-shadow | Button to add a shadow | try it |
| If you need more styles, each style class separated by a space, such as: class = "ui-btn ui-btn-inline ui-btn-corner-all ui-shadow" By default, the <input> button has rounded corners and shadow effect. <a> and <button> elements do not. |
|---|
More complete CSS classes, please see our jQuery Mobile CSS Class Reference Manual .
The next section shows how to add an icon on the button.