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.
