O'Reilly logo

jQuery Mobile by Jon Reid

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

List Views

jQuery Mobile can produce visually formatted lists that are very similar to the styles seen in native applications.

Basic List View

jQuery Mobile can enhance either an ordered or unordered list. Just apply the data-role="listview" to a list, and jQuery Mobile will do the rest (Example 3-1, Figure 3-1).

Example 3-1. Basic list view

<h3>Unordered List</h3>
<ul data-role="listview">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>
<h3>Ordered List</h3>
<ol data-role="listview">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

List View Buttons

By default, list view elements have no interactive properties: tapping or swiping on them has no effect. A common use of list views in mobile user interfaces is to have the list items be tappable buttons. To do this with jQuery Mobile, you have to include anchor tags in the list item markup (Example 3-2).

Example 3-2. List view with buttons

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

The list items are now tappable (see Figure 3-2). (In this example, of course, these items don’t go anywhere; keep reading for a more fully functional example.)

Basic list view

Figure 3-1. Basic list view

Figure 3-2. List view with buttons

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required