Enhancing lists
Once you understand how simple it is to create basic lists, you may find yourself wanting more options. One option for providing additional functionality to a list is what’s called a split button list. A split button list allows you to provide two clickable options within the same list item. This functionality is useful for list items that include a link for, say, specific details about that particular item but may also need to include other actions related to that item, such as a button to purchase the item or to share it on a social network. Creating a split button list is simple: You add two anchor tags next to each other within a list item that uses the listview data-role
(Listing 7).
<ul data-role="listview" data-split-icon="gear"> <li> <a href="item-detail.html"> <h3>Item title</h3> <p>Item overview</p> </a> <a href="item-purchase.html" data-rel="dialog">Purchase item</a> </li> <li> <a href="item-detail.html"> <h3>Item title</h3> <p>Item overview</p> </a> <a href="item-purchase.html" data-rel="dialog">Purchase item</a> </li> </ul>
The split button list in Listing 7 provides list items that include a title and an overview that users can click to view additional details about the item. The list items also include an icon used as a hyperlink to purchase the item within a dialog box. You can also change the default icon for the split button that appears on the right-hand side of the list item by using the data-split-icon
attribute.
Another useful addition for basic lists are list dividers. List dividers provide a way to categorize your list items. For example, you could alphabetize your list items and use list dividers to separate them by each letter of the alphabet, or you could have a group of list items that relate to music and categorize them with list dividers that correspond to different music genres. Listing 8 shows an example of a simple list enhanced with list dividers.
<ul data-role="listview"> <li data-role="list-divider">Alternative</li> <li><a href="#">Nirvana</a></li> <li data-role="list-divider">Rock and Roll</li> <li><a href="#">Jimi Hendrix</a></li> <li><a href="#">Led Zeppelin</a></li> </ul>
Using the data-role
attribute value of list-divider
provides a visual style that differentiates these list items from other list items.
You can also create different visual styles by using icons, thumbnails, and count bubbles. You can add count bubbles to a list item by using the ul-li-count
class (Listing 9).
<ul data-role="listview"> <li> <a href="inbox.html">Inbox <span class="ui-li-count">12</span> </a> </li> </ul>
You can add thumbnails just as you would add an image to an HTML page. Simply add an anchor element to a list item, add an image that will act as a thumbnail, and then add the copy that you want to appear next to it. jQuery Mobile handles the rest (Listing 10).
<ul data-role="listview"> <li> <a href="zeppelin.html#thank-you"> <img src="images/album-cover.jpg" /> <h3>Led Zeppelin</h3> <p>Thank You</p> </a> </li> <li> <a href="zeppelin.html#ten-years"> <img src="images/album-cover.jpg" /> <h3>Led Zeppelin</h3> <p>Ten Years</p> </a> </li> </ul>
You add icons the same way as thumbnails; the only difference is that you use the ui-li-icon
class, as shown in Listing 11.
<ul data-role="listview"> <li> <a href="zeppelin.html"> <img src="images/album-cover.jpg" class="ui-li-icon" /> Led Zeppelin Album </a> </li> <li> <a href="hendrix.html"> <img src="images/album-cover.jpg" class="ui-li-icon" /> Jimi Hendrix Album </a> </li> </ul>
The ul-li-icon
class limits the image size to a max width and height of 40px and positions the image properly in the list item.