Latest web development tutorials
 

jQuery Mobile List Content



jQuery Mobile List Icons

The default icon for each list item containing a link is "carat-r" (right arrow). To change this to another icon, use the data-icon attribute on the list item you want to modify:

Example

<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>
Try it Yourself »

data-icon="false" will remove the icon.

For a complete reference of all the jQuery Mobile button icons, please go to our jQuery Mobile Icons Reference.


16x16 Icons

To add a standard 16x16px icon to your list, add an <img> element inside the link with a class of "ui-li-icon":

Example

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

jQuery Mobile 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:

Example

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

Use standard HTML to fill the list with information:

Example

<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>
Try it Yourself »

Split Buttons

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

jQuery Mobile will automatically place the second link on the right side of the list with a right arrow-icon. And the text inside the link (if any) will be shown when a user hover 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 »

Lets add some pages and dialogs to make the links more functional:

Example

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#download" data-transition="pop" data-icon="gear">Download Browser</a>
  </li>
</ul>

<div data-role="page" id="download" data-dialog="true">
Try it Yourself »

Count Bubbles

Count bubbles are used to display numbers associated with list items, such as messages in a mailbox:

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

Example

<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>
Try it Yourself »

Note: To show the correct number in a count bubble, it must be updated programmatically. This will be explained in a later chapter.


More Examples

Popup lists
How to create a popup list.

Collapsible lists
How to create lists that hide and show content.

Collapsible popup lists
How to create a collapsible popup list.

Full width collapsible lists
Using the data-inset="false" attribute on "collapsibles/collapsible set" to enable a full width listview.

More content formatting
How to make a calendar.