jQuery Mobile List Content

jQuery Mobile List Thumbnails

For images larger than 16x16px, add an <img> element to the link.

jQuery Mobile will automatically adjust the image to 80x80px:

Example

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

Try it yourself

Please use standard HTML to fill in the information list:

Example

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

Try it yourself

jQuery Mobile List Icons

If you want to add a 16x16px icon to your list, add the class "ui-li-icon" attribute to the <img> element:

Example

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

Try it yourself

Split Button

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

jQuery Mobile will automatically add a blue arrow icon style to the second link, and the text in the link (if any) will be displayed when the user hovers over the icon:

Example

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

Try it yourself

By adding pages and dialogs, you can make links more functional:

Example

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#download" data-rel="dialog">Download Browser</a>
  </li>
</ul>

Try it yourself

Count bubbles

Count bubbles are used to display numbers related to list items, such as messages in an email:

To add a count bubble, use an inline element, such as <span>, set the class "ui-li-count" attribute and add a number:

Example

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

Try it yourself

Note:To display the correct number in the count bubble, it must be updated programmatically. We will explain it in the next chapter.

More Examples

Change the default link icon of the list item
How to set different link icons for list items (the right arrow is the default).
Collapsible List
How to create a list that hides and shows content.
More content formats
How to make a calendar.