X
HOME HTML5 CSS3 JAVASCRIPT SQL PHP5 JQUERY ANGULAR BOOTSTRAP3 XML MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

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.




Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB HOSTING

UK Reseller Hosting

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE

facebook