Book Image

jQuery Mobile First Look

Book Image

jQuery Mobile First Look

Overview of this book

Table of Contents (17 chapters)
jQuery Mobile First Look
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

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 Computer</a>
        <a href="purchase.html">Buy album</a>
        <span class="ui-li-count">12</span>
      </li>
      
      <li...