Posted on by & filed under Content - Highlights and Reviews, Mobile Development.

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:

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 shows a standard list view without links, and a list view with links.

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:

Figure 2 shows how dividers look.

Figure 2: Dividers in a list view.

Creating Nested List Views

You can nest lists within a list view, like this:

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 shows a split-button list.

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

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:

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.

Summary

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

  Matt Doyle is an experienced technical author and coder who has written three well-received books on jQuery Mobile, PHP and Photoshop. He has also written articles for Elated.com and SitePoint.com on a variety of topics, including jQuery Mobile, jQuery, JavaScript, PHP, HTML and CSS. Learn more about jQuery Mobile with Matt’s comprehensive eBook, “Master Mobile Web Apps with jQuery Mobile”. It’s available for instant download at http://store.elated.com/.

Tags: jQuery Mobile, list views, serach filters,

Trackbacks/Pingbacks

  1.  jQuery Mobile Tip: Adding Thumbnails and Icons to List Views « Safari Books Online's Official Blog
  2.  jQuery Mobile Tip: Styling List Views « Safari Books Online's Official Blog