Aside Content

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>
With aside content, we can show more information about a row without using a new page

Figure 4-13. With aside content, we can show more information about a row without using a new page

Get jQuery Mobile: Up and Running now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial