jQuery Mobile: List Content Cheat Sheet

List Icons

<ul data-role="listview">
  <li><a href="#">Default is right arrow</a></li>
  <li data-icon="plus"><a href="#">data-icon="plus"</a></li>
  <li data-icon="minus"><a href="#">data-icon="minus"</a></li>
  <li data-icon="delete"><a href="#">data-icon="delete"</a></li>
  <li data-icon="location"><a href="#">data-icon="location"</a></li>
  <li data-icon="false"><a href="#">data-icon="false"</a></li>
</ul>

16×16 Icons

<ul data-role="listview">
  <li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li>
</ul>

List Thumbnails

For images larger than 16x16px, add an <img> element inside a list item as the first child element (with no class name). jQuery Mobile will automatically scale the image to 80x80px:

<ul data-role="listview">
  <li><a href="#"><img src="chrome.png"></a></li>
</ul>

Use standard HTML to fill the list with information:

<ul data-role="listview">
  <li>
    <a href="#">
    <img src="chrome.png">
    <h2>Google Chrome</h2>
    <p>Google Chrome is a free, open-source web browser. Released in 2008.</p>
    </a>
  </li>
</ul>

Split Buttons

To create a split list with a vertical divider bar, place two links inside the <li> element.

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#">Some Text</a>
  </li>
</ul>

Count Bubbles

To add count bubbles, use an inline element, such as <span>, with class "ui-li-count" and add a number:

<ul data-role="listview">
  <li><a href="#">Inbox<span class="ui-li-count">25</span></a></li>
  <li><a href="#">Sent<span class="ui-li-count">432</span></a></li>
  <li><a href="#">Trash<span class="ui-li-count">7</span></a></li>
</ul>

Leave a Reply

Your email address will not be published. Required fields are marked *