THE WORLD'S LARGEST WEB DEVELOPER SITE

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 »

Note 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 »

Note 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.




COLOR PICKER

colorpicker

SHARE THIS PAGE






Search w3schools.com:

Translate w3schools.com: