FREE Web Template Download
HTML CSS JAVASCRIPT SQL PHP BOOTSTRAP JQUERY ANGULARJS TUTORIALS REFERENCES EXAMPLES Blog
 

jQuery Mobile List Views



jQuery Mobile List Views

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>):

Example

<ol data-role="listview">
  <li><a href="#">List Item</a></li>
</ol>

<ul data-role="listview">
  <li><a href="#">List Item</a></li>
</ul>
Try it Yourself »

To style your lists with rounded corners and some margin, use the data-inset="true" attribute:

Example

<ul data-role="listview" data-inset="true">
Try it Yourself »

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

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:

Example

<ul data-role="listview">
  <li data-role="list-divider">Europe</li>
  <li><a href="#">Norway</a></li>
  <li><a href="#">Germany</a></li>
</ul>
Try it Yourself »

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:

Example

<ul data-role="listview" data-autodividers="true">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>
  <li><a href="#">Billy</a></li>
  <li><a href="#">Calvin</a></li>
  ...
</ul>
Try it Yourself »

The data-autodividers="true" attribute creates dividers with uppercased first letters of the item's text.


Examples

More Examples

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.