jQuery Mobile List Content
jQuery Mobile List Icons
By default, each list item includes an arrow icon "carat-r" (right arrow). To modify this icon, you can use the data-icon attribute:
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>
| | data-icon="false" will remove the icon. |
| --- | --- |
For a more complete list of jQuery Mobile button icons, visit our jQuery Mobile Icons Reference Manual.
16x16 Icons
If you want to add standard 16x16px icons to your list, you can include an <img> element within the list item and use the "ui-li-icon" class:
Example
<ul data-role="listview">
<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li>
</ul>
jQuery Mobile List Thumbnails
For images larger than 16x16px, add an <img> element within the link.
jQuery Mobile will automatically scale the image to 80x80px:
Example
Add list information using standard HTML:
Example
jQuery Mobile List Icons
Add 16x16px icons in list <img> elements using class="ui-li-icon":
Example
class="ui-li-icon">USA</a></li>
Split Buttons
In jQuery Mobile lists, sometimes you need to perform two different actions on an option, which requires splitting the link button within the option. To achieve this, add another <a> element within the <li> element, which will create a split effect on the page.
jQuery Mobile will automatically set the second link to a blue arrow icon, and any link text (if present) will be displayed when the user hovers over the icon:
Example
Add some pages and dialogs to enrich the link functionality:
Example
Bubble Numbers
Bubble numbers are used to display numbers related to list items, such as the number of emails in an inbox:
To add bubble numbers, use an inline element like <span>, set the class "ui-li-count" attribute, and add the number:
Example
class="ui-li-count">25</span></a></li>
class="ui-li-count">432</span></a></li>
class="ui-li-count">7</span></a></li>
Note: To display a correct bubble number, you must modify the programming approach. This will be explained in a later chapter.