jQuery Mobile: Organizing Information with List Views

Exclusive offer: get 50% off this eBook here
jQuery Mobile First Look

jQuery Mobile First Look — Save 50%

Discover the endless possibilities offered by jQuery Mobile for rapid Mobile Web Development

€18.99    €9.50
by Giulio Bai | June 2011 | Open Source

List views play a huge role in jQuery Mobile when it comes to organizing and laying out our content. The jQuery Mobile framework makes available a set of list types, each of which is best suited to certain situations and applications: we can have numbered lists, nested lists, lists with icons, thumbnails, and many other improvements, and user-friendly options that will no doubt enhance the usability of our list view elements. In this article by Giulio Bai, author of jQuery Mobile First Look, we will create a jQuery Mobile-based music player interface, which helps us in illustrating and understanding exactly what list views are and how we can use them in our own web applications.

This article will address the following issues:

  • Basics and conventions for list views
  • Choosing the list type, as per your requirements

 

jQuery Mobile First Look

jQuery Mobile First Look

Discover the endless possibilities offered by jQuery Mobile for rapid Mobile Web Development

        Read more about this book      

(For more resources on this subject, see here.)

You might have noticed that the vast majority of websites built using jQuery Mobile have their content laid out in very similar ways; sure, they differ in the design, colors, and overall feel, but they all have a list-based layout.

There is a way in which we can organize our information and take advantage of each and every space in the browser: information is displayed vertically, one piece under another. There are no sidebars of any kind and links are organized in lists – for a cleaner and tidy look.

But list views are also used to actually be a list of information. Some examples may be lists of albums, names, tasks, and so on: after all, our purpose is to build a mobile web application and the majority of services and pages can be organized in a way which closely resembles a list.

Basics and conventions for list views

Due to the particular nature of lists, list views are coded exactly the same way a standard HTML unordered list would.

After all, the purpose of list views is to organize our information in a tidy way, presenting a series of links which are placed one under another; the easiest way to grasp their usefulness is, in my opinion, imagining a music player application.

A music player would need a clean enough interface, listing the artists, albums, and songs by name. In order to play a song, the user would need to select an artist, and then choose the album in which the song he wishes to play has been released.

To create our first view (artists), we would use the following code. Make sure you add the data-role="listview" attribute to the unordered list tag:

<ul data-role="listview">
<li><a href="astra.html">Astra</a></li>
<li><a href="zappa.html">Frank Zappa</a></li>
<li><a href="tull.html">Jethro Tull</a></li>
<li><a href="radiohead.html">Radiohead</a></li>
<li><a href="who.html">The Who</a></li>
</ul>

The jQuery Mobile framework automatically styles the list elements accordingly, and adds a right arrow icon. List elements fill the full width of the browser window:

jQuery Mobile tutorial on List Views

Whenever an item is selected (click/tap event), jQuery Mobile will parse the code inside the list element and issue an AJAX request for the first URL found.

The page (obtained via AJAX) is then inserted into the existing DOM and a page transition event is triggered.

The default page transition is a slide-left animation; clicking the back button on the newly displayed page will result in a slide-right animation.

Choosing the list type as per your requirements

A somewhat large variety of lists are available for us to choose from in order to make use of the type of list view that is best suited to our needs.

Below are listed (sorry, no pun intended!) the different types of list views along with a brief description of how to use them and what part of code we need to change in order to obtain a certain list view.

Nested lists

Bearing in mind that list views elements are based on the standard HTML unordered list element, we might be wondering what would happen if we try and create a second list inside a list view.

By nesting a ul element inside list items, jQuery Mobile will adopt a different kind of behavior to our list items.

Our first step toward the creation of a nested list is removing any link present in the list item, as a click event will show the nested list instead of redirecting to another page. The child list will be put into a new "page" with the title of the parent in the header.

We're now implementing nested list elements into our sample music player interface by changing our markup to the following. This way, we are able to browse artists and albums.

Please note that we have removed any links to external pages:

<ul data-role="listview">
<li>Astra
<ul>
<li><a href="astra_weirding.html">The Weirding</a></li>
</ul>
</li>
<li>Frank Zappa
<ul>
<li><a href="zappa_hotrats.html">Hot Rats</a></li>
<li><a href="zappa_yellowshark.html">Yellow Shark</a></li>
</ul>
</li>
<li>Jethro Tull
<ul>
<li><a href="tull_aqualung.html">Aqualung</a></li>
<li><a href="tull_thick.html">Thick as a Brick</a></li>
</ul>
</li>
<li>Radiohead
<ul>
<li><a href="radiohead_ok.html">OK Computer</a></li>
<li><a href="radiohead_rainbows.html">In Rainbows</a></li>
<li><a href="radiohead_kol.html">The King of Limbs</a></li>
</ul>
</li>
<li>The Who
<ul>
<li><a href="who_next.html">Who's Next</a></li>
<li><a href="who_q.html">Quadrophenia</a></li>
<li><a href="who_tommy.html">Tommy</a></li>
</ul>
</li>
</ul>

If we clicked on the Radiohead element, we would then be able to see the following page:

jQuery Mobile tutorial on List Views

By default, child list will be given a Swatch B theme to indicate they are at a secondary level of navigation; we can select a different color swatch by specifying a data-theme attribute on the child list element.

We can see the header turned blue, and the artist name is used as the header. We have a choice to go back to the previous page (artists) or click again onto a list item (album) to view more.

Numbered lists

Our music player interface has reached the point in which we need to list the tracks contained in an album. Of course, tracks have a sequence, and we want to give the user the possibility to see what track number is without having to count them all – and without writing numbers manually, that would be terrible!

In a very similar fashion, we can use ordered list elements (ol) to obtain numbering: jQuery Mobile will try to use CSS to display numbers or, if not supported, JavaScript.

The following code lists all of the tracks for an album:

Note there is no limit to the number of lists you can nest.

<ul>
<!-- ... -->
<li>Radiohead
<ul>
<li><a href="radiohead_ok.html">OK Computer</a></li>
<li><a href="radiohead_rainbows.html">In Rainbows</a></li>
<li>The King of Limbs
<ol>
<li><a href="play.html">Bloom</a></li>
<li><a href="play.html">Morning Mr. Magpie</a></li>
<li><a href="play.html">Little by Little</a></li>
<li><a href="play.html">Feral</a></li>
<li><a href="play.html">Lotus Flower</a></li>
<li><a href="play.html">Codex</a></li>
<li><a href="play.html">Give Up the Ghost</a></li>
<li><a href="play.html">Separator</a></li>
</ol>
</li>
</ul>
</li>
<!-- ... -->
</ul>

jQuery Mobile tutorial on List Views

jQuery Mobile First Look Discover the endless possibilities offered by jQuery Mobile for rapid Mobile Web Development
Published: June 2011
eBook Price: €18.99
Book Price: €30.99
See more
Select your format and quantity:
        Read more about this book      

(For more resources on this subject, see here.)

Read-only lists

Sometimes, we just need to list a certain number of items and don't want to provide a link for them.

Read only lists can be created by omitting the anchor link element. The jQuery mobile framework will automatically style the list items so that they look flat. They are displayed using a Swatch C coloring.

jQuery Mobile tutorial on List Views

However, this kind of list is usually displayed using a data-inset="true" to the (un)ordered list attribute, which inserts some spacing and allows lists that have borders, or don't take up the whole page, to coexist with other elements on the page.

<li>The King of Limbs
<ol data-inset="true">
<!-- list items with no anchor links -->
</ol>
</li>

We can see how a list with the data-inset attribute looks in the following screenshot:

jQuery Mobile tutorial on List Views

Split button lists

There may be cases in which we wish to be able to let the user perform more than one action on the same list item. For example, were the user browsing a list of albums, they should be presented with the possibility to buy, rate, or listen to each of them in a quick and simple way.

In order to provide such functionality, a split button can be used to offer two (or more) clickable items for each list item.

To create a split list item, simply add a second link to the list item; jQuery Mobile will then add a vertical line to separate the two buttons.

If we were to implement a "buy album" button next to the album name, we would need the following code:

<ul data-role="listview">
<!-- ... -->
<li>Radiohead
<ul>
<li>
<a href="radiohead_ok.html">OK Computer</a>
<a href="purchase.html">Buy album</a>
</li>
<li>
<a href="radiohead_rainbows.html">In Rainbows</a>
<a href="purchase.html">Buy album</a>
</li>
<li>
<a href="radiohead_kol.html">The King of Limbs</a>
<a href="purchase.html">Buy album</a>
</li>
</ul>
</li>
<!-- ... -->
</ul>

The following screenshot shows how split buttons are rendered by jQuery Mobile. Notice the thin vertical line separating the main text body from the arrow button on the right:

jQuery Mobile tutorial on List Views

jQuery Mobile sets the title attribute of the second button to the text of the anchor link. You may want to use some descriptive text.

The icon can be changed by specifying a data-split-icon attribute with the icon name we wish to display:

<ul data-role="listview">
<!-- ... -->
<li>Radiohead
<ul data-split-icon="gear">
<li>
<a href="radiohead_ok.html">OK Computer</a>
<a href="purchase.html">Buy album</a>
</li>
<li>
<a href="radiohead_rainbows.html">In Rainbows</a>
<a href="purchase.html">Buy album</a>
</li>
<li>
<a href="radiohead_kol.html">The King of Limbs</a>
<a href="purchase.html">Buy album</a>
</li>
</ul>
</li>
<!-- ... -->
</ul>

In the following screenshot, the arrow icon has been replaced with a gear icon:

jQuery Mobile tutorial on List Views

Spicing up your lists

Sure, list views appear to be of undoubted usefulness already, but there are some details and tweaks that will make them even more interesting and fun to use and work with.

Count bubbles

To proceed with our music player interface example, we are about to show the number of tracks in each album into a count bubble.

Count bubbles are count indicators sitting on the right of the list item, and they are of proven usefulness in many e-mail applications as indicators of how many messages are contained in a certain folder.

To create a count bubble, we simply wrap the number in an element with a class of ui-li-count, just like the following:

<ul data-role="listview">
<!-- ... -->
<li>Radiohead
<ul data-list-icon="gear">
<li>
<a href="radiohead_ok.html">OK Computer</a>
<a href="purchase.html">Buy album</a>
<span class="ui-li-count">12</span>
</li>
<li>
<a href="radiohead_rainbows.html">In Rainbows</a>
<a href="purchase.html">Buy album</a>
<span class="ui-li-count">10</span>
</li>
<li>
<a href="radiohead_kol.html">The King of Limbs</a>
<a href="purchase.html">Buy album</a>
<span class="ui-li-count">8</span>
</li>
</ul>
</li>
<!-- ... -->
</ul>

Clicking on count bubbles does not trigger any event.

jQuery Mobile tutorial on List Views

List dividers

To allow for an easier browsing experience, we might want to add headers for each letter in the "artists" view. The user will be able to identify their favorite band looking after the right letter.

The jQuery Mobile framework supports turning a list item into a list divider by adding a data-role="list-divider" attribute to any list item:

<ul data-role="listview">
<li data-role="list-divider">A</li>
<li><a href="astra.html">Astra</a></li>
<li data-role="list-divider">F</li>
<li><a href="zappa.html">Frank Zappa</a></li>
<li data-role="list-divider">J</li>
<li><a href="tull.html">Jethro Tull</a></li>
<li data-role="list-divider">R</li>
<li><a href="radiohead.html">Radiohead</a></li>
<li data-role="list-divider">W</li>
<li><a href="who.html">The Who</a></li>
</ul>

jQuery Mobile tutorial on List Views

As you can see, artists are now grouped by letter.

List dividers are styled using a Swatch B, by default; this can be changed by specifying a data-group-theme attribute.

jQuery Mobile First Look Discover the endless possibilities offered by jQuery Mobile for rapid Mobile Web Development
Published: June 2011
eBook Price: €18.99
Book Price: €30.99
See more
Select your format and quantity:
        Read more about this book      

(For more resources on this subject, see here.)

Images

Album artwork can be added to the list item by providing an image as the first child of the list item; that is, the img tag must be before any link or text we want to be displayed in the list item.

The jQuery Mobile framework will automatically resize the image to an 80 pixels square.

Note, however, that if an image is larger than 80x80 pixels, it will still need the bandwidth to travel from the server to the client (that is, your computer). In addition, images that are not square in proportion will not look right when resized.

<ul data-role="listview">
<!-- ... -->
<li>Radiohead
<ul data-list-icon="gear">
<li>
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="ro_artwork.png" />
<a href="radiohead_ok.html">OK Computer</a>
<a href="purchase.html">Buy album</a>
<span class="ui-li-count">12</span>
</li>
<li>
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="rr_artwork.png" />
<a href="radiohead_rainbows.html">In Rainbows</a>
<a href="purchase.html">Buy album</a>
<span class="ui-li-count">10</span>
</li>
<li>
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="rk_artwork.png" />
<a href="radiohead_kol.html">The King of Limbs</a>
<a href="purchase.html">Buy album</a>
<span class="ui-li-count">8</span>
</li>
</ul>
</li>
<!-- ... -->
</ul>

The following screenshot shows the album cover next to the album name:

jQuery Mobile tutorial on List Views

Alternatively, we can use regular 16 pixels square icons instead of an image: simply add the class ul-li-icon to the img tag.

Formatting content

Now that our list elements are bigger, we can add some more text, to give some more detailed information.

There are various ways in which we can modify the overall look of list items and content:

  • Text hierarchy is added by using headers (increase emphasis) and paragraphs (reduce emphasis):

    <ul data-role="listview">
    <!-- ... -->

    <li>Radiohead
    <ul data-list-icon="gear">
    <li>
    <img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="ro_artwork.png" />
    <a href="radiohead_ok.html">
    <h3>OK Computer</h3>
    <p>Capitol, 1995</p>
    </a>
    <a href="purchase.html">Buy album</a>
    <span class="ui-li-count">12</span>
    </li>

    <li>
    <img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="rr_artwork.png" />
    <a href="radiohead_rainbows.html">
    <h3>In Rainbows</h3>
    <p>Self-released, 2007</p>
    </a>
    <a href="purchase.html">Buy album</a>
    <span class="ui-li-count">10</span>
    </li>

    <li>
    <img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="rk_artwork.png" />
    <a href="radiohead_kol.html">
    <h3>The King of Limbs</h3>
    <p>Self-released, 2011</p>
    </a>
    <a href="purchase.html">Buy album</a>
    <span class="ui-li-count">8</span>
    </li>
    </ul>
    </li>

    <!-- ... -->
    </ul>

    A smaller line of text (label name) appears under the album name:

    jQuery Mobile tutorial on List Views

  • Additional information can be added to the right of each list item by wrapping content in an element with a class of ul-li-aside. For example, here we are adding the track length (in minutes) to the right side of each list item in an album:

    <!-- ... -->

    <li>Radiohead
    <ul>
    <!-- ... -->
    <li>
    <img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="rk_artwork" />
    <h3><a href="#">The King of Limbs</a></h3>
    <p>Self-released, 2011</p>
    <ol>
    <li>
    <a href="#">Bloom</a>
    <p class="ui-li-aside">5:15</p>
    </li>
    <li>
    <a href="#">Morning Mr. Magpie</a
    <p class="ui-li-aside">4:41</p>
    </li>
    <li>
    <a href="#">Little by Little</a>
    <p class="ui-li-aside">4:27</p>
    </li>
    <li>
    <a href="#">Feral</a>
    <p class="ui-li-aside">3:13</p>
    </li>
    <li>
    <a href="#">Lotus Flower</a>
    <p class="ui-li-aside">5:01</p>
    </li>
    <li>
    <a href="#">Codex</a>
    <p class="ui-li-aside">4:47</p>
    </li>
    <li>
    <a href="#">Give Up the Ghost</a>
    <p class="ui-li-aside">4:50</p>
    </li>
    <li>
    <a href="#">Separator</a>
    <p class="ui-li-aside">5:20</p>
    </li>
    </ol>
    <a href="purchase.html">Buy album</a>
    <span class="ui-li-count">8</span>
    </li>
    </ul>
    </li>

    Note that, in order to create a nested list with formatted content, we need to specify an anchor link for the text we wish to provide in the list item element. The link can also point to the same page (#), so we prevent jQuery Mobile from fetching another page and messing up coloring and the title/header of the nested list(s).

    jQuery Mobile tutorial on List Views

Implementing a search filter bar

As a last trick, in case we want to make it easier for the user to find their favorite artists, we may implement a search filter bar.

A search filter bar will look like an input element (search input) and will filter out all list elements that do not match with the user input in real time.

The search input will sit on top of the list and it can be included by adding a data-filter="true" attribute to the list:

<ul data-role="listview" data-filter="true">
<li><a href="astra.html">Astra</a></li>
<li><a href="zappa.html">Frank Zappa</a></li>
<li><a href="tull.html">Jethro Tull</a></li>
<li><a href="radiohead.html">Radiohead</a></li>
<li><a href="who.html">The Who</a></li>
</ul>

The following screenshot shows how search filters work:

jQuery Mobile tutorial on List Views

Summary

In this article, we have created a simple (not dynamic), jQuery Mobile-based music player interface, which has helped us in illustrating and understanding exactly what list views are and how we can use them in our own web applications.


Further resources on this subject:


About the Author :


Giulio Bai

Giulio Bai is a law student living in Italy who spends most of his time toying with stuff that doesn't have anything to do with law.

Even after trying to keep the list of his past achievements as short as possible, the number of projects that he joined in (and that invariably sunk shortly thereafter) makes it hard to narrow down his interests to programming and carousels alone.

It should be made clear that any claim of responsibility for those unfortunate ventures is wholeheartedly rejected – they never had the necessary potential to make it anyway.

Books From Packt


iPhone JavaScript Cookbook
iPhone JavaScript Cookbook

Sencha Touch 1.0 Mobile JavaScript Framework
Sencha Touch 1.0 Mobile JavaScript Framework

Android 3.0 Application Development Cookbook
Android 3.0 Application Development Cookbook

Xcode 4 iPhone Development Beginner's Guide
Xcode 4 iPhone Development Beginner's Guide

jQuery 1.4 Animation Techniques: Beginners Guide
jQuery 1.4 Animation Techniques: Beginners Guide

jQuery 1.4 Reference Guide
jQuery 1.4 Reference Guide

PhoneGap Beginner's Guide: RAW
PhoneGap Beginner's Guide: RAW

Android User Interface Development: Beginner's Guide
Android User Interface Development: Beginner's Guide


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software