Spicing up your lists

Sure, list views appear to be of undoubted usefulness already, but there are some details and tweaks that will make them even more interesting and fun to use and work with.

Count bubbles

To proceed with our music player interface example, we are about to show the number of tracks in each album into a count bubble.

Count bubbles are count indicators sitting on the right of the list item, and they are of proven usefulness in many e-mail applications as indicators of how many messages are contained in a certain folder.

To create a count bubble, we simply wrap the number in an element with a class of ui-li-count, just like the following:

<ul data-role="listview"> <!-- … --> <li>Radiohead <ul data-list-icon="gear"> <li> <a href="radiohead_ok.html">OK ...

Get jQuery Mobile First Look now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.