jQuery Mobile: Button on the right hand side of the header

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

Many app designers like to put a button on the top of the page.

For example, we put an info button on the right hand side of the header bar.

<!DOCTYPE html>
<html>
<head>
    <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>
    <title>Codecrawl</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header'>
        <h1>I'm a header</h1>
        <a href='#' data-icon='info' class='ui-btn-right'>Info</a>
        <div data-role='navbar'>
            <ul>
                <li><a href='#'>One</a></li>
                <li><a href='#'>Two</a></li>
                <li><a href='#'>Three</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /header -->

    <div data-role='content'>
        <p>You can put your content here...</p>
    </div>

    <div data-role='footer'>
        <h1>My Footer</h1>
    </div>
</div>

</body>
</html>
Try The Code

The line needed for the info button is:

<a href='#' data-icon='info' class='ui-btn-right'>Info</a>

button_r

jQuery Mobile: Navigation bar

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

jQuery Mobile has a very basic navbar widget that is useful for providing up to 5 buttons with optional icons in a bar.

A navbar is coded as an unordered list of links wrapped in a container element that has the data-role=’navbar’ attribute.

To set an item to the active state, add class=’ui-btn-active’ to an anchor in the markup. 

In an earlier example, we have made some brief introduction to navbar.  We make some slight change to this example by adding class=’ui-btn-active’ to set the first home button to active state.

<!DOCTYPE html>
<html>
<head>
    <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>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header'>
        <h1>Welcome To My Mobile App</h1>
        <div data-role='navbar'>
            <ul>
                <li><a href='#' data-icon='home' class='ui-btn-active' >Home</a></li>
                <li><a href='#' data-icon='arrow-r'>Latest Posts</a></li>
                <li><a href='#' data-icon='search'>Search</a></li>
            </ul>
        </div>
    </div>

    <div data-role='content'>
        <p>You can put your content here...</p>
    </div>

    <div data-role='footer'>
        <h1>My Footer</h1>
    </div>
</div>

</body>
</html>
Try The Code

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>
<html>
<head>
    <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>
    <title>Codecrawl</title>
</head>
<body>
<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>
        </a></li>
        <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>
        </a></li>
        <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>
        </a></li>
    </ul>

    <div data-role='footer' data-position='fixed'>
        <h1>Footer</h1>
    </div>
</div>
</body>
</html>
Try The Code

jQuery Mobile: List items with icons

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

To use standard 16×16 pixel icons in list items, add the class of ui-li-icon to the image element and insert 16×16 icons as img tags inside the list items.

<!DOCTYPE html>
<html>
<head>
    <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>
    <title>Codecrawl</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header'><h1>Count Bubbles On List</h1></div>
    <ul data-role='listview' data-inset='true'>
        <li><a href='#'><img src='https://codecrawl.com/code/flag/gf.png' alt='France' class='ui-li-icon ui-corner-none'>France</a></li>
        <li><a href='#'><img src='https://codecrawl.com/code/flag/de.png' alt='Germany' class='ui-li-icon'>Germany</a></li>
        <li><a href='#'><img src='https://codecrawl.com/code/flag/gb.png' alt='Great Britain' class='ui-li-icon'>Great Britain</a></li>
        <li><a href='#'><img src='https://codecrawl.com/code/flag/fi.png' alt='Finland' class='ui-li-icon'>Finland</a></li>
        <li><a href='#'><img src='https://codecrawl.com/code/flag/us.png' alt='United States' class='ui-li-icon ui-corner-none'>United States</a></li>
    </ul>

    <div data-role='footer' data-position='fixed'>
        <h1>Footer</h1>
    </div>
</div>
</body>
</html>
Try The Code

In the img tag above, I have added class=’ui-li-icon’, a class that is designed for list items.

.
List Item Icons Output

jQuery Mobile: Count bubbles on list

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

To add a count indicator to the right of the list item, wrap the number in an element with a class of ui-li-count.

The theme for count bubbles can be set by adding the data-count-theme to the list and specifying a swatch letter.

Count Bubbles
<!DOCTYPE html>
<html>
<head>
    <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>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header'><h1>Count Bubbles On List</h1></div>
    <ul data-role='listview' data-count-theme='b' data-inset='true'>
        <li><a href='#'>Inbox <span class='ui-li-count'>12</span></a></li>
        <li><a href='#'>Outbox <span class='ui-li-count'>0</span></a></li>
        <li><a href='#'>Drafts <span class='ui-li-count'>4</span></a></li>
        <li><a href='#'>Sent <span class='ui-li-count'>328</span></a></li>
        <li><a href='#'>Trash <span class='ui-li-count'>62</span></a></li>
    </ul>

    <div data-role='footer' data-position='fixed'>
        <h1>Footer</h1>
    </div>
</div>
</body>
</html>
Try The Code Count Bubbles Output