Skip to Main Content
jQuery Mobile: Up and Running
book

jQuery Mobile: Up and Running

by Maximiliano Firtman
February 2012
Beginner to intermediate content levelBeginner to intermediate
272 pages
6h 20m
English
O'Reilly Media, Inc.
Content preview from jQuery Mobile: Up and Running

Using Count Bubbles

A count bubble is a circle with a number inside rendered at the right of the row usually showing how many items are in there on interactive rows. It can be used to show unread elements, unfinished tasks, or any other numeric information in a very simple way.

Warning

There is no limitation to a numeric value for the count bubble. However, using text is discouraged because the space available is optimized for numeric values. For text, use aside content or description.

Just use any element, such as a span tag, with a class of ui-li-count inside a list row and that’s all. For example:

<li><a href="inbox.html">Inbox</a>
    <span class="ui-li-count">86</span>

In Figure 4-15 we can see how a count bubble is rendered on an interactive list. We can define the count bubble’s color swatch via data-count-theme on the ul element so we can change the default white background color.

An interactive lists with count bubbles

Figure 4-15. An interactive lists with count bubbles

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

jQuery Mobile

jQuery Mobile

Jon Reid

Publisher Resources

ISBN: 9781449331085Supplemental ContentErrata Page