jQuery Mobile: Formatted content

This entry is part 50 of 73 in the series jQuery Mobile

To add text hierarchy, use headings to increase font emphasis and use paragraphs to reduce emphasis.

Supplemental information can be added to the right of each list item by wrapping content in an element with a class of ui-li-aside.

Formatted Content
<!DOCTYPE html>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
<div data-role='page'>
    <div data-role='header'><h1>Formatted Content</h1></div>
    <ul data-role='listview' data-inset='true'>
        <li data-role='list-divider'>Friday, October 8, 2010 <span class='ui-li-count'>2</span></li>
        <li><a href='index.html'>
            <h2>Stephen Weber</h2>
            <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
            <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
            <p class='ui-li-aside'><strong>6:24</strong>PM</p>
        <li><a href='index.html'>
            <h2>jQuery Team</h2>
            <p><strong>Boston Conference Planning</strong></p>
            <p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
            <p class='ui-li-aside'><strong>9:18</strong>AM</p>
        <li data-role='list-divider'>Thursday, October 7, 2010 <span class='ui-li-count'>1</span></li>
        <li><a href='index.html'>
            <h2>Avery Walker</h2>
            <p><strong>Re: Dinner Tonight</strong></p>
            <p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait!</p>
            <p class='ui-li-aside'><strong>4:48</strong>PM</p>

    <div data-role='footer' data-position='fixed'>
Try The Code
Series Navigation<< jQuery Mobile: List items with icons
jQuery Mobile: Navigation bar >>

Leave a comment

Leave a Reply