February 2012
Beginner to intermediate
272 pages
6h 20m
English
Up to now, every list we’ve designed has only one column for text content. We can add a thumbnail or an icon but only one text column. We can add a second-level column to every row for supplemental information we want to show.
To do so, we can use any HTML element with a class of ui-li-aside,
such as a span or div element.
Let’s create a sample showing a price as the aside content (Figure 4-13):
<!DOCTYPE html>
<html>
<head>
<!-- Typical jQuery Mobile header goes here -->
</head>
<body>
<div data-role="header">
<h1>Order online</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="buy.html">Soda</a>
<span class="ui-li-aside">$1.00</span>
<li><a href="buy.html">Sandwich</a>
<span class="ui-li-aside">$3.20</span>
<li><a href="buy.html">Ice cream</a>
<span class="ui-li-aside">$1.50</span>
</ul>
</div>
</div>
</body>
</html>
Figure 4-13. With aside content, we can show more information about a row without using a new page