Inset Lists

An inset list will not appear edge-to-edge. Instead, an inset list is automatically wrapped inside a block with rounded corners and has margins set for additional spacing. To create an inset list, add the data-inset="true" attribute to the list element (see Figure 5–2 and 5–3, and the related code in Listing 5–2).

Figure 5–2. Inset list (iOS)

Figure 5–3. Inset list (Windows Phone 7)

Listing 5–2. Inset list (ch5/list-inset.html)<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">Contact Options</li>
    <li><a href="#"><img src="phone.png" class="ui-li-icon">Call</a></li>
    <li>...</li>
</ul>CopycopyHighlighthighlightAdd NotenoteGet Linklink