jQuery Mobile: Count bubbles on list

This entry is part 48 of 73 in the series jQuery Mobile

To add a count indicator to the right of the list item, wrap the number in an element with a class of ui-li-count.

The theme for count bubbles can be set by adding the data-count-theme to the list and specifying a swatch letter.

Count Bubbles
<!DOCTYPE html>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
<div data-role='page'>
    <div data-role='header'><h1>Count Bubbles On List</h1></div>
    <ul data-role='listview' data-count-theme='b' data-inset='true'>
        <li><a href='#'>Inbox <span class='ui-li-count'>12</span></a></li>
        <li><a href='#'>Outbox <span class='ui-li-count'>0</span></a></li>
        <li><a href='#'>Drafts <span class='ui-li-count'>4</span></a></li>
        <li><a href='#'>Sent <span class='ui-li-count'>328</span></a></li>
        <li><a href='#'>Trash <span class='ui-li-count'>62</span></a></li>

    <div data-role='footer' data-position='fixed'>
Try The Code Count Bubbles Output
Series Navigation<< jQuery Mobile: Icon positioning
jQuery Mobile: List items with icons >>

Leave a comment

Leave a Reply