A list divider can be used as a heading for a group of list items. For instance, if our app has a calendar listing, we may choose to group our calendar events by day (see Figure 5–4). List dividers can also be used as headers for inset lists. In our prior example, we also set the header of our inset list with a list divider (see Figure 5–2 and Listing 5–2).
To create a list divider, add the data-role="list-divider" attribute to any list item. The list divider’s default text will appear left-aligned.
TIP: In Figure 5–4, the list items contain both left-aligned and right-aligned text. To position text right-aligned, wrap it with an element that contains a class of ui-li-aside (see Listing 5–3).
By default, list dividers will be styled with the "b" swatch (light blue) color. To apply an alternate theme, add the data-divider-theme="a" attribute to the list element.
Figure 5–4. List dividers
Listing 5–3. List dividers (ch5/list-dividers.html)<ul data-role="listview">
<li data-role="list-divider" data-divider-theme="a">
Mon <p class="ui-li-aside">Feb 6 2012</p>
</li>
<li>
<a href="#">6 PM <span class="ui-li-aside">Birthday Party</span></a>
</li>
</ul>CopycopyHighlighthighlightAdd NotenoteGet Linklink
Leave a Reply