List views in jQuery Mobile are standard HTML lists; ordered (<ol>) and unordered (<ul>).
To create a list, apply the data-role="listview" to the <ol> or <ul> element. To make the items tappable, specify a link inside each list item (<li>):
To style your lists with rounded corners and some margin, use the data-inset="true" attribute:
By default, links inside a list item will automatically turn into a button (no need for ui-class="btn" or data-role="button") |
List dividers are used to organize and group items into categories/sections.
To specify a list divider, add the data-role="list-divider" attribute to an <li> element:
If you have an alphabetically list, (for example a phone book) jQuery Mobile automatically adds appropriate dividers by setting the data-autodividers="true" attribute on the <ol> or <ul> element:
The data-autodividers="true" attribute creates dividers with uppercased first letters of the item's text. |
Read-only lists
How to create lists without links (will not be buttons and not tappable).
Panels
How to insert panels to your list items.