jQuery Mobile First Look
Discover the endless possibilities offered by jQuery Mobile for rapid Mobile Web Development
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:
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:
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>
