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

I covered the topic of jQuery Mobile list views in the jQuery Mobile: Getting the Most from List Views post, and in this tip we will look at how to style list views, starting with inset lists.

Inset Lists

If you’re mixing a list view with other elements in the same page, add data-inset=”true” to the list view’s ul or ol element. This adds a border and margin to the list view and rounds the corners so that it sits nicely within the page alongside other elements (see Figure 1 below).

Formatting List Item Content

You can use headings and paragraphs within list items to give different weights to the content. You can also use the ui-li-aside CSS class to place text off to the right within a list item. Here’s an example:

Figure 1 shows the result.


Figure 1: Inset list views (left), and formatting content (right).

Count Bubbles

Count bubbles are handy for displaying the number of items associated with a particular list item, such as messages in a mailbox, or products inside a category. To add a count bubble to a list item, add an element with a class of ui-li-count inside the item (see Figure 2 below):

Theming List Views

jQuery Mobile allows you to assign swatches (color combinations) to elements in the page. Each swatch has a letter from ‘a’ to ‘z’ (the default theme has five swatches, ‘a’ to ‘e’).

To set the swatch used by a list view’s items, use the data-theme attribute. For example, this code makes a list view’s items use the ‘b’ swatch (Figure 2):

You can also apply a swatch to other list view elements using various attributes:

  • data-divider-theme for dividers
  • data-count-theme for count bubbles
  • data-split-theme for the right-hand icons in split-button lists


Figure 2: Count bubbles (left), and theming list views (right).

You should now have a better idea of how to add thumbnails and icons to list views in your jQuery Mobile apps.

Safari Books Online has the content you need

Here are some good jQuery Mobile resources found in Safari Books Online:

jQuery Mobile First Look Find out more about list views and learn how to take advantage of jQuery Mobile widgets and what you can do to customize and enhance their behavior.
Dreamweaver CS5.5: The Missing Manual helps you master Dreamweaver with jargon-free language, hands-on tutorials, savvy advice from a Dreamweaver pro, and it contains this jQuery Mobile section.

Pro jQuery Mobile
will teach you how to create responsive, native-looking applications for iOS, Android, Windows Phone, Blackberry, and more.

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: count bubbles, jQuery Mobile, list views,

Comments are closed.