Blog / 2010 / November / 12

jQuery Mobile Basics

November 12, 2010

Here's some details of how I built a simple site using jQuery Mobile. Future articles look at integrating this with Django, see the links at the end.

First Page

Here's the HTML used on the first page.

<!DOCTYPE html> 
<html> 
    <head> 
    <title>BrassBandResults</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
    <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
</head> 
<body>

<!-- Home Page -->
<div data-role="page" id="home"> 
    <div data-role="header">
        <h1>BrassBandResults</h1>
    </div> 
    <div data-role="content">
        <ul data-role="listview" data-inset="true">
            <li><a href="/bands/">Bands</a></li>
            <li><a href="/contests/">Contests</a></li>
            <li><a href="/pieces/">Test Pieces</a></li>
            <li><a href="/conductors/">Conductors</a></li>
            <li><a href="/adjudicators/">Adjudicators</a></li>
            <li><a href="#about">About</a></li>
    </ul>
    </div> 
    <div data-role="footer">
            <h4>Footer</h4>
    </div> 
</div>

<!-- About Page -->
<div data-role="page" id="about">
    <div data-role="header">
        <h1>About</h1>
        <a data-icon="arrow-u" class="ui-btn-right" href="#home">Home</a>
    </div> 
    <div data-role="content">
        <p>About this site</p>
    </div> 
    <div data-role="footer">
        <h4>Footer</h4>
    </div> 
</div>

</body>
</html>

This will render a list of links, like this:

Home

The key things to note about this page are:

data-role="listview" on the ul tag turns a simple list of links into the styled wide links shown here
data-inset="true" on the ul tag is responsible for doing iphone like rounded corners on the list and having space left and right. Without this, the links would extend out to the edge of the page.
Each link automatically gets the right arrow at the right of the page.
There are two pages in this source - one with an id of home, and the other with an id of about. Only the first of these is shown by default.

Hash Links

All of the links in this page are normal navigation links, with the exception of the last one, which just links to an anchor: #about. As we said above, the first div with a page-role="page" is shown, and the second is hidden. To show this second page, we just need to link to its id, in this case about. This will hide the first div, and transition to the second, without doing a page reload.

Clicking on the about link, with therefore link to #about and show the about page:

About

The key things to note about this page are:

We've automatically gained a back button
We've added a home link at the top right. This position is controlled by class="ui-btn-right" on the a tag.
The home button has an up arrow on. This is controlled by data-icon="arrow-u" on the a tag. Valid values here as shipped by default with jquery mobile are arrow-u (up), arrow-d (down), arrow-l (left), arrow-r (right), plus , minus , delete , search (magnifying glass).
The url contains /#about. This is a bookmarkable url for this page.