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:
|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.
To add a standard 16x16px icon to your list, add an <img> element inside the link with a class of "ui-li-icon":
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:
Use standard HTML to fill the list with information:
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:
Lets add some pages and dialogs to make the links more functional:
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:
Note: To show the correct number in a count bubble, it must be updated programmatically. This will be explained in a later chapter.
How to create a popup list.
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.