In Figure 3–3, we have a header with a “Cancel” and a “Done” button to help manage the entry of a movie review. As shown in Listing 3–2, the button is styled as an ordinary link. We also attached an icon to each button with the data-icon attribute. To create a text-only button simply remove the data-icon attribute. Within a header, buttons are positioned according to their semantic order. For example, the first button will be left-aligned and the second button will be right-aligned. If your header only contains a single button you can right-align the button by adding class="ui-btn-right" to the button’s markup.
Listing 3–2. Header Buttons (ch3/header-buttons.html)<div data-role="header" data-position="inline">
<a href="#" data-icon="delete">Cancel</a>
<h1>Add Review</h1>
<a href="#" data-icon="check">Done</a>
</div>
Figure 3–3. Header with buttons
Leave a Reply