jQuery Mobile button

	In jQuery Mobile, buttons are automatically styled to make them more attractive and available on mobile devices. W e recommend that you link between pages using the "button" element with data-role="button" and submit the form using the .lt;input=gt; or the "lt;button"?

Navigation buttons

To link between pages via a button, use the element with the data-role"button" property:

< a href="#pagetwo" data-role="button" > Visit the second page </a>

Try it out . . .

Inline button

By default, the button fills the entire screen width. If you want a button that is only as wide as the content, or if you want to display two or more buttons side by side, add data-inline."true":

<a href="#pagetwo" data-role="button" data-inline="true" > Visit the second page </a>

Try it out . . .

Combine the buttons

jQuery Mobile provides an easy way to put buttons together.

Use the data-role-"controlgroup" property with the data-type|s horizontal "vertical" to specify whether to combine buttons horizontally or vertically:

Try it out . . .

	By default, the combined buttons are vertically combined, with no margins and space between them. And only the first and last buttons are fillets so that they combine to create a nice look.

Back button

To create a back button, use the data-rel"back" property (which ignores the anchor's href value):

Try it out . . .

	You can also add the back button automatically, please use: data-add-back-btn="true".

More data-to-property for buttons

Attributes	value	describe	Example
data-corners	true \| false	Specify whether the button is rounded	try it
data-mini	true \| false	Specify whether the button is smaller	try it
data-shadow	true \| false	Specify whether the button has a shadow	try it

To view the full reference manual for all jQuery Mobile Data-? properties, visit our jQuery Mobile Data Properties Reference Manual.

In the next chapter, we'll show you how to attach icons to your buttons.

jQuery Mobile button

Table of contents