jQuery Mobile List View
jQuery Mobile List View
List views in jQuery Mobile are standard HTML lists; ordered (<ol>) and unordered (<ul>).
List views are a powerful feature in jQuery Mobile. They make standard unordered or ordered lists more versatile. To apply, add the data-role="listview" attribute to the ul or ol tag. Add a link in each item (<li>) that users can click:
Example
<li><a href="../index.html">List item m</a></li>
</ol>
<ul data-role="listview">
<li><a href="../index.html">List item</a></li>
</ul>
Try it Yourself »
The rounded corners and edges of the list style are set using the data-inset="true" attribute:
 |
By default, the link in a list item automatically becomes a button (no data-role="button" needed). |
|---|
List Dividers
List items can also be converted into list dividers to organize the list and group list items.
To specify a list divider, just add the data-role="list-divider" attribute to the list item <li> element:
Example
<li data-role="list-divider">Europe</li>
<li><a href="../index.html">France</a></li>
<li><a href="../index.html">Germany</a></li>
</ul>
Try it Yourself »
If you have an alphabetically sorted list (for example a phone book), you can configure it to automatically generate item dividers via the data-autodividers="true" attribute on the <ol> or <ul> element:
Example
<li><a href="../index.html">Adele</a></li>
<li><a href="../index.html">Agnes</a></li>
<li><a href="../index.html">Billy</a></li>
<li><a href="../index.html">Calvin</a></li>
...
</ul>
Try it Yourself »
|
data-autodividers="true" can be configured to automatically generate item dividers. By default, the created divider text is the first uppercase letter of the list item text. |
|---|
More Examples
Read-only List
How to create a list without links (it won't be a button and won't be clickable).
Panels
How to insert panels into a list