List views

List basics

jQuery Mobile will automatically enhance any native HTML list (<ul> or <ol>) into a mobile optimized view when we add the data-role=”list” attribute to our list element.

The enhanced list will display edge-to-edge by default, and if our list items contain links, they will be displayed as touch-friendly buttons with a right-aligned arrow icon.

By default, lists will be styled with the “c” swatch (gray) color. To apply an alternate theme, add the data-theme attribute to the list element or list items (<li>).

<ul data-role="listview" data-theme="c">
    <li><a href="#">Artists</a></li>
    <li><a href="#">Albums</a></li>
    <li><a href="#">Songs</a></li>
</ul>

Inset Lists

An inset list will not appear edge-to-edge. Instead, an inset list is automatically wrapped inside a block with rounded corners and has margins set for additional spacing. To create an inset list, add the data-inset=”true” attribute to the list element.

<ul data-role="listview" data-theme="c" data-inset="true">
    <li><a href="#">Artists</a></li>
    <li><a href="#">Albums</a></li>
    <li><a href="#">Songs</a></li>
</ul>

Split button lists

In cases where there is more than one possible action per list item, a split button can be used to offer two independently clickable items — the list item and a small arrow icon in the far right.

To make a split list item, simply add a second link inside the li and the framework will add a vertical divider line, style the link as an icon-only arrow button, and set the title attribute of the link to the text the link for accessibility.

You can set the icon for the right split icon by specifying a data-split-icon attribute with the icon name you want. The theme swatch color of the split button can be set by specifying a swatch letter in the data-split-theme attribute

Post A Comment

Anti-Spam Quiz: