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:
input element that
typically renders a button, including
a element with
jQuery Mobile’s button is typically rendered with a centered label, rounded corners, and shadows, depending on CSS3 compatibility on the browser.
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!">
We can create inline buttons that don’t use the whole width by applying
data-inline="true" over the element. Therefore, we can have three buttons in the same row (as seen on ...