Simple inline text links can be a challenge for users on a mobile device. Buttons, easier to see and easier to tap, work better for most links. jQuery Mobile makes it easy to present a-tag links as buttons in a variety of styles.
To present a link as a button, simply add the class class="ui-btn" to the a tag:
<a href="#" class="ui-btn">Button</a>
You can style buttons as mini, presenting them slightly smaller, by adding the class ui-mini. Classes ui-corner-all and ui-shadow add rounded corners and a drop shadow, respectively, to the button. Adding class ui-btn-inline presents the button inline - just wide enough for its label text - rather than spanning the full width of its parent element.
Adding and positioning icons is quite easy: simply add the relevant class:
Class ui-btn-icon-notext presents the button with just the specified icon and no text label.
You can create and use your own custom icons; jQuery Mobile offers a set of stock icons:
To style a link button with a given icon, use the corresonding class. For instance, a button with a "star" icon would be coded as follows:
<a href="#" class="ui-btn ui-btn-icon-left ui-icon-star">Button with Star</a>
star portion of the class
ui-icon-star specifies the "star" icon.
As we mentioned above, buttons can display with no text (with class ui-btn-icon-notext) and display inline. Let's look at some examples of these features:
atag) with class
ui-mini, which causes the button to display with less top and bottom padding.
ui-icon-deleteadds the stock jQuery Mobile "delete" icon, positioned at left.
ui-btn-icon-bottompositions the icon at bottom.
ui-btn-icon-notexton the next button hides all label text, showing just a stock "home" icon.
ui-btn-inlineattribute, preventing them from filling the horizontal width of the page; both are also "mini" because of the presence of class
Containing a set of buttons in a div element with the attribute data-role="controlgroup" groups the contained buttons visually, either stacked vertically (the default) or horizontally (with the additional attribute data-type="horizontal" on the container div):
The first set of buttons stacks vertically because of the
<div data-role="controlgroup"> wrapping the three buttons. The
data-type="horizontal" on the second set of buttons aligns the buttons horizontally. The third set of buttons ("Left" and "Right") include appropriately labeled and positioned icons.