jQuery Mobile: Getting the Most from List Views
The jQuery Mobile framework lets you build great-looking mobile user interfaces using just HTML.
One handy user interface widget that you can create is a list view. List views let you build attractive, easy-to-use lists of items, such as product lists, lists of options, and message inboxes.
In this article you learn the basics of creating jQuery Mobile list views, and explore a few handy tricks along the way.
List View Basics
To create a list view, add a data-role=”listview” attribute to an unordered list (ul) or ordered list (ol) element:
<ul data-role="listview"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
jQuery Mobile attractively styles each list item (li) element, removing the bullet point and stretching the item across the page width. In addition, if you wrap a link around the content inside a list item, jQuery Mobile increases the height of the item to make it easy to tap, and adds an arrow icon on the right of the list item to indicate that it is tappable.
Figure 1: A basic list view (left), and a list view with links inside the list items (right).
If you have a long list of items, you can split them into more manageable groups by adding dividers, like this:
<ul data-role="listview"> <li data-role="list-divider">Group 1</li> <li>Item 1</li> <li>Item 2</li> <li data-role="list-divider">Group 2</li> <li>Item 3</li> <li>Item 4</li> </ul>
Figure 2: Dividers in a list view.
Creating Nested List Views
You can nest lists within a list view, like this:
<ul data-role="listview"> <li>Item 1 <ul> <li><a href="#">Item 1a</a></li> <li><a href="#">Item 1b</a></li> </ul> </li> <li>Item 2 <ul> <li><a href="#">Item 2a</a></li> <li><a href="#">Item 2b</a></li> </ul> </li> </ul>
When you do this, jQuery Mobile automatically breaks the list view into separate pages. The top-level list appears on the first page (Figure 3, left). When you tap an item in the list, the corresponding sub-list slides into view on its own page (Figure 3, right). This makes it easy to build up a hierarchy of tappable items – great for navigating through complex lists of options.
Figure 3: A top-level list (left) and a sub-list (right) in a nested list view.
Creating Split-Button Lists
If you create two links within each list item in a list view, jQuery Mobile displays a split-button list, with the main portion of each item on the left and a small icon on the right. When the user taps the main portion, the first link is followed; when they tap the icon, the second link is followed. This is handy when you want each item in a list view to have two different functions, such as “View Details” and “Add to Cart”.
Figure 4: By adding two links to each list item, you create a split-button list view.
Adding Search Filters
For long list views, you can use the data-filter=”true” attribute to add a search filter box, which helps the user to narrow down the options (Figure 5):
<ul data-role="listview" data-filter="true"> ... </ul>
Figure 5: A list view with a search filter. The user types text into the box to filter the list.
To change the “Filter items…” text that appears inside the box, use the data-filter-placeholder attribute:
<ul data-role="listview" data-filter="true" data-filter-placeholder="Search Products..."> ... </ul>
By default, the search filter searches the text within the list items. To search text other than the text inside a list item, add a data-filtertext attribute to the item:
<li data-filtertext=”Search this text instead”>Don’t search this text</li>
This is handy for scenarios such as filtering US states by both the displayed state names and their abbreviations.
In this article you explored jQuery Mobile list views. You saw how to create basic list views, add links and dividers, nest list views, use split-button lists, and create search filters.
List views are just one of the many useful mobile-friendly widgets that you can create using jQuery Mobile. Check out buttons, toolbars, dialogs, form widgets and collapsible blocks too. Happy building!
Safari Books Online has the content you need
Take advantage of these jQuery mobile resources in Safari Books Online:
|Pro jQuery Mobile will teach you how to create themable, responsive, native-looking applications for iOS, Android, Windows Phone, Blackberry, and more.|
|jQuery Mobile provides a practical approach to using jQuery Mobile to quickly develop web-based applications for mobile devices.|
|jQuery Mobile First Look will show you the features of the jQuery Mobile framework, what they do, and how they can be used.|
|jQuery, jQuery UI, and jQuery Mobile: Recipes and Examples is a practical “cookbook” packed with realistic, easy-to-use solutions for making the most of jQuery Core, jQuery UI, and jQuery Mobile.|
About the Author