jQuery Mobile - List Navigation

This is one of several jQuery Mobile samples. Please refer to the jQuery Mobile and jQuery overview articles for related background information.

The source code for this sample can be found here: https://github.com/gomobile/sample-jqm-list-nav.

    

This sample is a multi-page scaffold using list-based navigation. For other page navigation styles, please see the springboard- and tab-based navigation samples.

List-Based Navigation

The main landing page presents a list of pages to navigate to. This is implemented using jQuery Mobile's basic linked list, which is an unordered HTML list with a data-role="listview" attribute. Each list item contains the link to the destination page, and the corresponding text to be displayed. In this sample, each of these links is customized with a slide transition, which will synchronously slide out the referring page and slide in the destination page when the link is clicked. Alternatively, the global page transition style can be configured by setting the $.mobile.defaultPageTransition variable while handling jQuery Mobile's mobileinit event. Please see the springboard navigation sample for an example of another page transition style (flip), and the tab navigation sample for an example of how to override the default page transition style for the entire app.

<ul data-role="listview">
    <li><a href="#section1" data-transition="slide">
        <h3>Section 1</h3>             
        <p>Some short description.</p>
    </a></li>
    <li><a href="#section2" data-transition="slide">
        <h3>Section 2</h3>
        <p>Some short description.</p>
    </a></li>
    <li>
        … additional list items …
    </li>
</ul>

Persistent Headers

The application header stays in place while transitioning between pages, providing visual application continuity across the page transitions. This is implemented using jQuery Mobile's persistent header toolbar. The baseline header toolbar is an HTML div with a data-role="header" attribute. Each page still requires its own header, but setting the same data-id attribute across all the headers informs the jQuery Mobile framework that they are to be treated as the same header.


<!-- header toolbar for the main page -->
<div data-role="header" data-id="listnav-header">
    <h1>List Navigation</h1>
</div>
<!-- identical header toolbar for all other pages, with same data-id attribute -->
<div data-role="header" data-id="listnav-header">
    <h1>List Navigation</h1>
</div>

Back Navigation

An HTML5 cross-platform web app that runs inside a webview cannot rely on the back button provided by a browser or an Android device. This sample adds a data-add-back-btn="true" attribute to all secondary pages, which asks the jQuery Mobile framework to automatically include a back button in the page's header toolbar to navigate back to the referring page. Alternatively, setting the data-rel="back" attribute on an HTML anchor will cause any click on that anchor to navigate one step back in history. Please see the springboard navigation sample for an example of how to manually add a back button, so as to have full control over its styling and positioning.


<div data-role="page" id="section1" data-add-back-btn="true">
    <div data-role="header" data-id="listnav-header">
        <h1>List Navigation</h1>
    </div>
    :

Image Formatting

The photoContainer div is used to format the image on the main landing page. First, it uses a -15px margin to offset jQuery Mobile's default content styling of 15px padding (see .ui-content in jquery.mobile-1.1.1.css), so that the photo can fill the entire width of the viewport. Second, it controls the positioning of the photo caption. The caption is absolutely positioned relative to its parentphotoContainer div, since css absolute positioning is defined to be relative to the nearest enclosing element that doesn't have the default static positioning (with the root html element as the base case enclosing element). Finally, it provides basic adaptability to large screen sizes.

The baseline image is 636 x 378 pixels. By setting the image's max-width to 100% without specifying its width or height, the image will fill the width of the viewport up to its native width. For wider screens, the photoContainer div centers the image, and provides a dark gray linear gradient background to fill the remaining space. The gradient is specified using multiple vendor prefixes and a fall-back solid color to provide cross-platform support. More sophisticated responsive image techniques can be used instead to provide images of different aspect ratios and resolutions for different screens.

<div id="photoContainer">
    <img id="photo" src="images/photo.jpg"></img>
    <div id="photoCaption">
        <a href="http://www.flickr.com/photos/msvg/4665338572/">original photo</a>
        by Michael Gil
    </div>
</div>
/* container div to position photo + caption within */
#photoContainer {
    position: relative;
    padding: 0px;
    /* override jQuery Mobile content padding of 15px */
    margin: -15px;
    /* dark background if photo doesn't fill entire width */
    background: #121212; /* fall back color if gradient is not supported */
    background-image: -webkit-linear-gradient(#111, #282828, #111);
    background-image: -moz-gradient(#111, #282828, #111);
    background-image: -ms-linear-gradient(#111, #282828, #111);
    background-image: -o-linear-gradient(#111, #282828, #111);
    background-image: linear-gradient(#111, #282828, #111);
    /* center photo */
    text-align: center;
}
/* size photo to min(screen width, original photo width) */
#photo {
    max-width: 100%;
}
/* position caption to bottom right corner of photo (with 10px padding) */
#photoCaption {
    position: absolute;
    bottom: 25px; /* accounting for -15px margin for #photoContainer */
    right: 10px;
    font-size: 10px;
    color: white;
}

Devices Tested:

  • Samsung Galaxy S* II smartphone (Google Android* 2.3.5; display: 4 inches, 480 x 800 pixels, hdpi)
  • Lava Xolo X900* smartphone (Android 2.3.7; display: 4 inches, 600 x 1024 pixels, hdpi)
  • Motorola Droid* Razr M smartphone (Android 4.0.4; display: 4.3 inches, 540 x 960 pixels, hdpi)
  • Asus Google Nexus* 7 tablet (Android 4.1.1; display: 7 inches, 1280 x 800 pixels, tvdpi)
  • Amazon Kindle Fire* 2 tablet (v.10.1.3 based on Android 4.0; display: 7 inches, 1024 x 600 pixels, mdpi)
  • Apple iPod Touch* 4th gen mobile device (Apple iOS* 4.3.1; display: 3.5 inches, 640 x 960 pixels, retina)
  • Apple iPod Touch 4th gen mobile device (iOS 6.0, display: 3.5 inches, 640 x 960 pixels, retina)
  • Apple iPad* 2 tablet (iOS 5.1.1, display: 9.7 inches, 1024 x 768 pixels, non-retina)
For more complete information about compiler optimizations, see our Optimization Notice.