Skip to Main Content
jQuery Mobile: Up and Running
book

jQuery Mobile: Up and Running

by Maximiliano Firtman
February 2012
Beginner to intermediate content levelBeginner to intermediate
272 pages
6h 20m
English
O'Reilly Media, Inc.
Content preview from jQuery Mobile: Up and Running

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

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

jQuery Mobile

jQuery Mobile

Jon Reid

Publisher Resources

ISBN: 9781449331085Supplemental ContentErrata Page