jQuery Mobile: Up and Running

Buttons

We’ve already seen that we can use any a element to make links between pages or to link to external content. However, a typical a element is not rendered easily for touch devices. The element is typically inline, and the clickable area is only the text. That is not a good experience for the touch user. That is why jQuery Mobile provides buttons.

A button is a UI component that feels like…well, a button. That is, a larger clickable area with text and optionally an icon.

A button can be created in different ways:

• Using a button element

• Using an input element that typically renders a button, including type="button", type="submit", type="reset" and type="image"

• Any a element with data-role="button"

jQuery Mobile’s button is typically rendered with a centered label, rounded corners, and shadows, depending on CSS3 compatibility on the browser.

Tip

If we are showing a group of buttons, it’s a good UI design pattern to choose one button—the positive and most probable one—to use with a different theme.

The default button uses the whole width of the screen, so every button will use a different line. Let’s see a typical sample, rendered in Figure 3-17:

<a href="#" data-role="button">Click me!</a>
<button data-theme="b">Click me too!</button>
<input type="button" value="Don't forget about me!">

Inline Buttons

We can create inline buttons that don’t use the whole width by applying the attribute data-inline="true" over the element. Therefore, we can have three buttons in the same row (as seen on ...