jQuery Mobile List Views

## jQ Mobile Tutorial

jQ Mobile HOME jQ Mobile Intro jQ Mobile Install jQ Mobile Pages jQ Mobile Transitions jQ Mobile Buttons jQ Mobile Icons jQ Mobile Toolbars jQ Mobile Navbars jQ Mobile Collapsibles jQ Mobile Grids

## jQ Mobile Lists

jQ Mobile List Views jQ Mobile List Content

## jQ Mobile Forms

jQ Mobile Form Basic jQ Mobile Form Inputs jQ Mobile Form Select jQ Mobile Form Sliders

## jQ Mobile Themes

jQ Mobile Themes

## jQ Mobile Events

jQ Mobile Events jQ Mobile Touch jQ Mobile Scroll jQ Mobile Orientation jQ Mobile Page Events

## Examples

jQ Mobile Examples

## References

jQ Data Attributes jQ Events jQ Icons

# jQuery Mobile List Views

« Previous
Next Chapter »

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

## Search Filter

To add a search box in a list, use the data-filter="true" attribute:

## Example

<ul data-role="listview" data-filter="true"></ul>
Try it yourself »

By default, the text inside the search box is "Filter items...".

To change the default text, use the data-filter-placeholder attribute:

## Example

<ul data-role="listview" data-filter="true" data-filter-placeholder="Search For Names">
Try it yourself »

## More Examples

Read-only lists
How to create lists without links (will not be buttons and not tappable).

« Previous
Next Chapter »

## Your suggestion:

Your E-mail (optional):

Page address:

Description:

Close [X]

## Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

## WEB HOSTING

Best Web Hosting UK Reseller Hosting Wow! $5 SSD Hosting

## WEB BUILDING

Download XML Editor
FREE Website BUILDER FREE Website Creator

## WEB RESOURCES

Web Statistics Web Validation

## SHARE THIS PAGE