Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

3. Page Elements > List Views

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


  

You are currently reading a PREVIEW of this book.

                                                                                                                    

Get instant access to over $1 million worth of books and videos.

  

Start a Free Trial


  
  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint