" a brain is like a parachute ... it is only useful when it is open "

Delving into jQuery Mobile: Part 2

In my previous post we discussed how to create a couple of simple pages and how to create a list. In this post I want to discuss lists in more detail. Yes I know it doesn't sound too interesting but you will be surprised at what you can do with lists in jQuery Mobile.

There are a number of different list styles that you can create using jQuery Mobile. All off them are very simple to implement and can really impact the UI of your application.

Before anything, lets review the simple list example we used in my last post. This will be the building block for all the examples.

view plain print about
1<!DOCTYPE html>
2    <html>
3        <head>
4        <title>ColdFusion Art Gallery</title>
5        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
6        <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
7        <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
8    </head>
9    <body>
10    
11        <cfquery name="qArt" datasource="cfartgallery">
12            SELECT
13                artists.artistID,
14                firstName,
15                lastName,
16                artID,
17                largeimage,
18                artname
19            FROM
20                ARTISTS
21            INNER JOIN
22                ART ON artists.artistID = art.artistID
23             ORDER BY
24                lastname,
25                firstname,
26                artists.artistid
27        </cfquery>
28        
29        <div data-role="page">
30            <div data-role="header">
31                <h1>CF Art Gallery</h1>
32            </div>
33            
34            <div data-role="content">    
35                <ul data-role="listview">
36                    <cfoutput query="qArt">
37                        <li>
38                            <h3 ><a href="art.cfm?artID=#qArt.artID#">#qArt.artName#</a></h3>
39                        </li>
40                    </cfoutput>
41                </ul>
42                
43            </div>
44            
45            <div data-role="footer" class="ui-bar">
46                &nbsp;
47            </div>
48        </div>
49</body>
50</html>

In this example we simply query the database and output a list of art. And here is how it looks:

Pretty nice, right? The only thing that we have added to the HTML which we would not necessarily have added for a regular web page is the data role attribute on the UL tag which has been set to listview. That is what tells the jQuery Mobile framework that this is a list and that it should be generated as such. Had we not placed the attribute in the UL then it would have just rendered as a regular UL.

Now when we are dealing with lots of data it is often useful to group the data, or at least break it into smaller chunks. This is pretty simple using jQuery Mobile, all we need to do is place the list-divider role on an LI and it will change that row to be a divider row. Note that a divider row can not be clicked like the other rows.

Here is an example that implements the list-divider. I have changed the output so that it groups the art together by artist and uses a divider to show the artists name.

Here is the code:

view plain print about
1<ul data-role="listview">
2    <cfoutput query="qArt" group="artistid">
3        <li data-role="list-divider">
4            #qArt.lastName#, #qArt.firstName#
5        </li>
6        <cfoutput>
7            <li>
8                <h3 ><a href="art.cfm?artID=#qArt.artID#">#qArt.artName#</a></h3>
9            </li>
10        </cfoutput>
11    </cfoutput>
12</ul>

And this is what it looks like:

Ok so that is much more usable. Remember, when you are on a smaller screen the organization of your data is even more important. Font sizes and screen resolutions are much smaller than normal. Now looking at this list it would be really useful for the user to see a preview of the art before they click on it. Remember that every time the user clicks a link they will be requesting a new page, which over a slow cell phone connection could take time. We want to make sure that the user has as much information as possible in the constraints of the smaller screen.

view plain print about
1<ul data-role="listview">
2    <cfoutput query="qArt" group="artistid">
3        <li data-role="list-divider">
4            #qArt.lastName#, #qArt.firstName#
5        </li>
6        <cfoutput>
7            <li>
8                <img src="/cfdocs/images/artgallery/#qArt.largeImage#" />
9                <h3 ><a href="art.cfm?artID=#qArt.artID#">#qArt.artName#</a></h3>
10            </li>
11        </cfoutput>
12    </cfoutput>
13</ul>

And here is how it looks:

Now if you look at the code you will see that I did not specify any height or width for the image yet the output has all the images as the same size. The list view formats the images so that they fit the constraints of the list.

The way the images were output in the previous example are called thumbnails. An alternate way of outputting images within a list are called icons. To display the images as icons, which are much smaller, you need to add the class ul-li-icon to the image in the list.

view plain print about
1<img src="/cfdocs/images/artgallery/#qArt.largeImage#" class="ui-li-icon"/>

In all the lists we have seen so far, there has only been 1 link that the user can access. What if we wanted to add a second link to the row? Maybe we are selling music albums and we want the user to click on the album to get more detailed information but we also want the user to be able to click on a button to buy it now? All you need to do to add an additional button to the row is to add an a tag to the bottom of the content, like so:

view plain print about
1<ul data-role="listview">
2    <cfoutput query="qArt" group="artistid">
3        <li data-role="list-divider">
4            #qArt.lastName#, #qArt.firstName#
5        </li>
6        <cfoutput>
7            <li>
8                <img src="/cfdocs/images/artgallery/#qArt.largeImage#"/>
9                <h3 ><a href="art.cfm?artID=#qArt.artID#">#qArt.artName#</a></h3>
10                <a href="buyNow.cfm">Buy Now</a>
11            </li>
12        </cfoutput>
13    </cfoutput>
14</ul>

The Result looks like:

Now the default icon that is displayed is the arrow but this can be updated by changing the class information of the a tag.

One way of providing additional information to the user prior to them clicking on an item in the list is to use a bubble display. The bubble display will output a number inside a bubble at the end of the row. This can indicate to the user how many items are on the subsequent page. To add this to your list all you need to do is add a span tag with the class of ul-li-count, as bellow:

view plain print about
1<span class="ui-li-count">12</span>

Here is what it looks like:

One of the features that will have the biggest impact on usability for your user is the ability to search through the results. This feature is often the more complex piece which you need to create and often has the most questions attached to it. For example, should you start processing the search on key up so that the results automatically update? If yes, how do you handle the latency and reload on the page? Won't that cause a lot of content reload? Well jQuery Mobile has actually been able to take care of a number of these issues for you, and they have done it in the simplest way possible.

As part of the list functionality you can turn on the data filter. Turning on the data filter will display the search box at the top of your list and will also filter the list based on what the user types. The filter will only work for the content that is currently loaded in the list, it will not make any external calls, but for a simple and easy to integrate filter system this is perfect.

Here is how to integrate it:

view plain print about
1<ul data-role="listview" data-filter="true">
2    <cfoutput query="qArt" group="artistid">
3        <li data-role="list-divider">
4            #qArt.lastName#, #qArt.firstName#
5        </li>
6        <cfoutput>
7            <li>
8                <img src="/cfdocs/images/artgallery/#qArt.largeImage#"/>
9                <h3 ><a href="art.cfm?artID=#qArt.artID#">#qArt.artName#</a></h3>
10            </li>
11        </cfoutput>
12    </cfoutput>
13</ul>

Notice that all I did was add data-filter="true" to the UL? It is that simple.

And here is how it looks:

So this was my quick review of lists. They are surprisingly simple and easy to implement. I was shocked to see how many different options there are out there. I didn't even get a chance to show you the nested lists or the drill down lists. They are also super easy to integrate and like all the list features can be completely styled to your pleasing.

Check back next time when I will be reviewing buttons and pop ups.

Related Blog Entries

TweetBacks
Comments
great post!! i am so happy to read this.we should read it again and again.please you can read it for more
# Posted By car insurance quotes online | 12/11/13 8:13 AM


BlogCFC was created by Raymond Camden