FREE Web Template Download
HTML CSS JAVASCRIPT SQL PHP BOOTSTRAP JQUERY ANGULARJS TUTORIALS REFERENCES EXAMPLES Blog
 

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.


Examples

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.