jQuery Mobile will automatically enhance any native HTML list (<ul> or <ol>) into a mobile optimized view when we add the data-role=”list” attribute to our list element. The enhanced list will display edge-to-edge by default, and if our list items contain links, they will be displayed as touch-friendly buttons with a right-aligned arrow icon (see Figure 5–1 and the code snippet to produce it in Listing 5–1). By default, lists will be styled with the “c” swatch (gray) color. To apply an alternate theme, add the data-theme attribute to the list element or list items (<li>).
Listing 5–1. Basic list (ch5/list-basic.html)<ul data-role="listview" data-theme="c">
<li><a href="#">Action</a></li>
<li><a href="#">Adventure</a></li>
<li><a href="#">Comedy</a></li>
</ul>CopycopyHighlighthighlightAdd NotenoteGet Linklink
Leave a Reply