jQuery Mobile List View
jQuery Mobile List View
The list view in jQuery Mobile is a standard HTML list; 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 this, add the data-role="listview" attribute to the ul or ol tag. Add links inside each item (<li>), which users can click:
Example data-role="listview"
Rounded corners and edges for the list style can be set using the data-inset="true" attribute:
Example data-inset="true"
| | By default, links in list items automatically become buttons (no need for data-role="button"). |
| --- | --- |
List Dividers
List items can also be turned into list divider items to organize lists into groups.
To specify a list divider, add the data-role="list-divider" attribute to the <li> element:
Example data-role="list-divider"Europe</li>
For an alphabetically ordered list (such as a phonebook), you can configure automatic generation of dividers by setting the data-autodividers="true" attribute on the <ol> or <ul> element:
Example data-autodividers="true"
| | data-autodividers="true" can configure automatic generation of dividers. By default, the created divider text is the first uppercase letter of the list item text. |
| --- | --- |