How to style buttons with jQuery Mobile

The future belongs to mobile web apps that function on a broad range of smartphones and tablets. The excerpt below from jQuery Mobile helps you get started with jQuery Mobile, the touch-optimized web framework for creating apps that look and behave consistently across many devices.

---

jQuery Mobile will automatically create stylized buttons out of regular form buttons, whether they be created with the input tag or the button tag. jQuery Mobile can also create buttons out of simple anchor links, by applying the data-role="button" to them.

By default, buttons will stretch to fit the width of their containing element. By applying the data-inline="true" attribute to a button, you can create inline buttons that are only as big as their content requires (Example 1, Figure 1).

Example 1. Button, button, who’s got the button?

<section id="page1" data-role="page">
  <header data-role="header"><h1>jQuery Mobile</h1></header>
  <div class="content" data-role="content">
    <h3>Buttons</h3>
    <a href="#" data-role="button">Link-based button</a>
    <input type="submit" value="submit" data-inline="true">
    <input type="reset" value="reset" data-inline="true">
  </div>
  </div>
  <footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>

Figure 1. Button, button, who’s got the button?


Warning: As of this writing, the jQuery Mobile documentation states that by applying the data-inline="true" attribute to a containing element, all buttons contained therein will be rendered inline. This is not working. The data-inline="true" attribute must be applied to each individual button. I expect this bug will be fixed by release 1.0.

Button Control Groups

Buttons can also be grouped together in control groups, creating a group of buttons on one bar. Just wrap the buttons in a containing element and apply the data-role= "controlgroup" to that container.

By default, these control groups form a vertical list, but if you apply the data-type= "horizontal" attribute to the container (as I have done in Example 2), the buttons will be rendered inline (as illustrated in Figure 2).

Example 2. Button control groups

<section id="page1" data-role="page">
  <header data-role="header"><h1>jQuery Mobile</h1></header>
  <div class="content" data-role="content">
    <h3>Control Group Buttons</h3>
    <div data-role="controlgroup">
      <a href="#" data-role="button">Yes</a>
      <a href="#" data-role="button">No</a>
      <a href="#" data-role="button">Cancel</a>
    </div>
    <div data-role="controlgroup" data-type="horizontal">
      <a href="#" data-role="button">Yes</a>
      <a href="#" data-role="button">No</a>
      <a href="#" data-role="button">Cancel</a>
    </div>
  </div>
  </div>
  <footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>

Figure 2. Button control groups


Control group buttons do not have the same functionality as radio buttons. More than one button in a control group can be active at a time.

Button Icons

Often you will need icons in your buttons, and jQuery Mobile comes with a variety of icons. You can also control the position of the icon.

To specify the icon of a button, apply the data-icon attribute. The data-icon attribute has the following valid values.

Value	Icon
alert
arrow-d
arrow-l
arrow-r
arrow-u
back
check
delete
forward
gear
grid
home
info
minus
plus
refresh
search
star

You can specify the position of the icon using the data-iconpos attribute. Valid values are shown in the table below.

Value	Result
bottom	Below the text, centered
left	Left side of button
notext	Hides the text, displaying only the icon
right	Right side of button
top	Above text, centered

The example below shows the code for adding some of these button icons, and the result is shown in Figure 3.

Example 3. Button icons

<section id="page1" data-role="page">
  <header data-role="header"><h1>jQuery Mobile</h1></header>
  <div class="content" data-role="content">
    <h3>Button Icons</h3>
    <div data-role="controlgroup" data-type="horizontal" data-inline="true">
      <a href="#" data-role="button" data-icon="home" data-iconpos="left">Home</a>
      <a href="#" data-role="button" data-icon="gear"
         data-iconpos="left">Configure</a>
      <a href="#" data-role="button" data-icon="search"
         data-iconpos="left">Search</a>
    </div>
  </div>
  </div>
  <footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>

Figure 3. Button icons


Custom Icons

Though jQuery Mobile comes with its own icons, you can easily implement your own icons using CSS and a custom data-icon attribute. If you specify a value for data-icon that is not one of the valid values, jQuery Mobile will still create the button but will apply to it a custom CSS class that will consist of the value for data-icon prepended by ui-icon-. For example, if you specified data-icon="flagicons-french" then jQuery Mobile would generate the button and create within it a span tag with the CSS class ui-icon-flagicons-french.

jQuery Mobile’s button icon classes are all designed around icons that are 18 × 18 pixels square. If you will be using jQuery Mobile’s theming system, you should probably save your icons in PNG format with alpha transparency.