O'Reilly logo

jQuery Mobile: Up and Running by Maximiliano Firtman

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required