The best jQuery Mobile Button Tutorial In 2024, In this tutorial you can learn Create a button in jQuery Mobile,<Button>,<Input>,<a>,Navigation buttons,Examples,Inline button,Examples,A combination of buttons,Examples,Back button,Examples,More links button instance,
Mobile applications are built on the simple click of things you want to display.
In jQuery Mobile, the button can be created in three ways:
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. |
For through the button link between pages, use <a> elements with data-role = "button" property:
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":
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:
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. |
To create a Back button, use data-rel = "back" property (which ignores anchor href value):
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.