jQuery Mobile includes several standard icons (see Table 4-1) that you may use to create icon-only buttons. For instance, the "info" icon is commonly used with a "flip" transition to display configuration options or more information. The use of standard icons consumes very little real estate and their meaning is relatively consistent across all devices. For instance, if we wanted to add an item to an existing list we may choose to show a "plus" icon that allows users to add an entry to the list (see Figure 3–4). In this example we have a listing of movie reviews and users can tap the “add” icon to create their review. To create an icon-only button, two attributes are required as shown in Listing 3–3.
Listing 3–3. Header with Icon (ch3/header-icons.html)<div data-role="header">
<h1>Reviews</h1>
<a href="#" data-icon="plus" data-iconpos="notext" class="ui-btn-right"></a>
</div>
Figure 3–4. Header with icon
Leave a Reply