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>
<a class="ui-btn"> is used for navigating between pages.
<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.
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.
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:
ui-btn-bchange theme to "b", by default this flips colour scheme to white on black background Button
ui-minimake button smaller Button
ui-corner-allmake all corners rounded Button
ui-shadowgive the button a shadow Button
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
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
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.
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
We can also group buttons either horizontally or vertically by specifying the attribute
in the same
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:
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:
There is a special syntax for defining a back button.
data-rel="back" will implement a back button in a normal
link tag and will ignore the
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