jQuery Mobile List Content
jQuery Mobile List Icons
By default, every list item will contain an arrow icon "carat-r" (right arrow). To modify this icon, you can use the data-icon attribute:
Example
<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 more complete set of jQuery Mobile button icons, please visit ourjQuery Mobile Icons Reference Manual。
16x16 Icons
If you want to add standard 16x16px icons to your list, you can add an <img> element in the list item and use the "ui-li-icon" class:
Example
<li><a href="../index.html"><img src="us.png.html" 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 in the link.
jQuery Mobile will automatically scale the images to 80x80px:
Example
<li><a href="../index.html"><img src="chrome.png.html"></a></li>
</ul>
Try it Yourself »
Use standard HTML to add list information:
Example
<li>
<a href="../index.html">
<img src="chrome.png.html">
<h2>Google Chrome</h2>
<p>Google Chrome is a free, open-source web browser. Released in 2008.</p>
</a>
</li>
</ul>
Try it Yourself »
jQuery Mobile List Icons
Use class="ui-li-icon" on the list <img> element to add 16x16px icons:
Example
Try it Yourself »
Split Buttons
In jQuery Mobile lists, sometimes you need to perform two different operations on an option's content. In this case, you need to split the link button in the option. The way to achieve the split is to add another <a> element inside the <li> element, and the split effect can be implemented on the page.
jQuery Mobile will automatically set the second link as a blue arrow icon. The icon's link text (if any) will be displayed when the user hovers the mouse over the icon:
Example
<li>
<a href="../index.html"><img src="chrome.png.html"></a>
<a href="../index.html">Some Text</a>
</li>
</ul>
Try it Yourself »
Add some pages and dialogs to make the link functionality richer:
Example
<li>
<a href="../index.html"><img src="chrome.png.html"></a>
<a href="../index.html" 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 the emails in a mailbox:
To add count bubbles, use an inline element such as <span>, set the class "ui-li-count" attribute, and add the number:
Example
<li><a href="../index.html">Inbox<spanclass="ui-li-count">25</span></a></li>
<li><a href="../index.html">Outbox<spanclass="ui-li-count">432</span></a></li>
<li><a href="../index.html">Trash<spanclass="ui-li-count">7</span></a></li>
</ul>
Try it Yourself »
Note:To display a count bubble correctly, the programming method must be modified. This will be explained in later chapters.
More Examples
Popup List
How to create a popup list
Change the default link icon of list items
How to set the default link icon of list items (default is right arrow).
Collapsible Popup List
How to create a collapsible popup list.
Collapsible List
How to create a list that can be shown/hidden.
More Content Formats
How to make a calendar.