Barry's jQuery Mobile Tutorial: Buttons

Button basics

The default jQuery Mobile button looks like this:

Notice how, by default, the button spans the available window space. We will see how to adjust this below.

For coding buttons there are three tags that can be used to create a JQuery Mobile button like the one above.

	<input type="button" value="Button">
	<button class="ui-btn">Button</button>
	<a class="ui-btn">Button</a>

Normally the <input> and <button> tags are used for form and JavaScript actions and the <a class="ui-btn"> is used for navigating between pages. For the <input>tag the text that appears on the button is given by the value attribute, while for the other tags the text is enclose by the start and finish tags as shown.

Button appearance

The default button spans the width of the display area. This is fine for small screens which require a large area to accept touch or other pointer interaction. However, for larger screens and desktop mouse pointers a smaller button is useful. The text ui-btn-inline can be added to the class ui-btn to restrict the button width to the width of the text. For example, the link <a href="#" class="ui-btn ui-btn-inline">Button</a> will create the button Button at the current text location.

We can also change the appearance of a button using various CSS classes. Some examples with in-line buttons are:

We can also mix and match the above class attributes. For example, the button definition <a href="#" class="ui-btn ui-btn-inline ui-btn-b ui-mini ui-corner-all">Button</a> will produce this button Button which is a small, white on black button with all rounded corners.

Only two colour options (themes) are provided by default. ui-btn-a is the default button theme and ui-btn-b is the alternate default white on black version shown above. However, you can also assign your own colour themes to ui-btn-c through ui-btn-z. Themes can also be applied to other widgets besides buttons and we will look at them separately.

It is also common to use icons with buttons to assist the user selecting the appropriate button. Icons are also discussed separately.

Button groups

It is also useful to group buttons together to provide a nice set of alternate choices for the user. This is done with the data-role="controlgroup" attribute on a <div> element. We can also group buttons either horizontally or vertically by specifying the attribute data-type="horizontal" or data-type="vertical" in the same <div> element.

An example of a horizontal group of four buttons

  <div data-role="controlgroup" data-type="horizontal">
	<a href="#" class="ui-btn">Button 1</a>
	<a href="#" class="ui-btn">Button 2</a>
	<a href="#" class="ui-btn">Button 3</a>
	<a href="#" class="ui-btn">Button 4</a>
  </div>
  

Is displayed as follows:

Button 1 Button 2 Button 3 Button 4

and the equivalent vertical button set can be coded:

  <div data-role="controlgroup" data-type="vertical">
	<a href="#" class="ui-btn">Button 1</a>
	<a href="#" class="ui-btn">Button 2</a>
	<a href="#" class="ui-btn">Button 3</a>
	<a href="#" class="ui-btn">Button 4</a>
  </div>
  

Is displayed as follows:

Button 1 Button 2 Button 3 Button 4

The Back button

There is a special syntax for defining a back button. The attribute data-rel="back" will implement a back button in a normal <a> link tag and will ignore the href attribute. For example, the following button definition will go back to the previous page:


  <a href="#" class="ui-btn" data-rel="back">Go back</a>
  

will implement the following button (try it!)

Go back

Home