JQuery Mobile List Views
Lists are one of the most basic browsing experiences. They are a very simple and efficient way to display data. With jQuery mobile they are also incredibly flexible in how they can be styled and adapt to different screen sizes. In this blog post we will look at a few examples of how you can create list views with jQuery mobile.
Just getting started with jQuery Mobile?
Start with this article on
Introducing jQuery Mobile.
Basic ListView
jQuery mobile automatically enhances any native HTML list into a mobile optimized view when we add the data-role=”listview” attribute to our list element. By default this element will display edge to edge and included links they are displayed as touch friendly buttons. Let’s start with the basic HTML as shown below.
<!DOCTYPE html>
<html>
<head>
<title>Seattle Resteraunt Finder</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Welcome to the Seattle Restaurant Finder</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-filter="true">
<p> What kind of meal are you in the mood for?</p>
<li><a href="#"> BBQ</a></li>
<li><a href="#"> Indian</a></li>
<li><a href="#">Thai</a></li>
</ul>
</div><!-- /content -->
<div data-role="footer">
<h4> Get Kentico CMS</h4>
</div><!-- /footer-->
</div>
</div><!-- /page -->
</body>
</html>
When this is run it produces the following screenshot.
Inset Lists
An inset list will not appear edge to edge but instead is automatically wrapped inside a block with rounded corners and has margins set for additional spacing. It’s created by simply adding the data-inset=”true” attribute to the list element as shown in the following code.
<!DOCTYPE html>
<html>
<head>
<title>Seattle Restaurant Finder</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Welcome to the Seattle Restaurant Finder</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true" data-filter="true">
<p> What kind of meal are you in the mood for?</p>
<li><a href="#"> BBQ</a></li>
<li><a href="#"> Indian</a></li>
<li><a href="#">Thai</a></li>
</ul>
</div><!-- /content -->
<div data-role="footer">
<h4> Get Kentico CMS</h4>
</div><!-- /footer-->
</div>
</div><!-- /page -->
</body>
</html>
When this is run it produces the following screenshot.
List Dividers
A list divider can be used as a heading for a group of list items. To create a list divider add the data-role=”list divider” attribute to a list item. By default the text appears left-aligned. To position the text right-aligned we can wrap it with an element that contains the ul-li-aside class. The following code provides an example.
<!DOCTYPE html>
<html>
<head>
<title>Seattle Resteraunt Finder</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Welcome to the Seattle Restaurant Finder</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-filter="true">
<li data-role="list-divider"> What kind of meal are you in the mood for? <p class="ui-li-aside">Seattle Foodies Rule!</p></li>
<li><a href="#"> BBQ</a></li>
<li><a href="#"> Indian</a></li>
<li><a href="#">Thai</a></li>
</ul>
</div><!-- /content -->
<div data-role="footer">
<h4> Get Kentico CMS</h4>
</div><!-- /footer-->
</div>
</div><!-- /page -->
</body>
</html>
When this is run it produces the following screenshot.
Lists with Thumbnails and Icons
We can add thumbnails to the left of our list item by adding an image as the first child element of a list item. By default jQuery mobile will scale the image to 80 pixels square. The following code shows an example.
<!DOCTYPE html>
<html>
<head>
<title>Seattle Restaurant Finder</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Welcome to the Seattle Restaurant Finder</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-filter="true">
<li data-role="list-divider"> What kind of meal are you in the mood for? <p class="ui-li-aside">Seattle Foodies Rule!</p></li>
<li>
<a href="#"> <img src="images/bbq.jpg" />
<h1> BBQ</h1>
<p>Classic American Food</p>
</a>
</li>
<li>
<a href="#"> <img src="images/indian.jpg" />
<h1>Indian </h1>
<p> A classic Indian meal</p>
</a>
</li>
<li>
<a href="#"> <img src="images/thai.jpg" />
<h1> Thai</h1>
<p>Spice is the order of the day</p>
</a>
<li>
</ul>
</div><!-- /content -->
<div data-role="footer">
<h4> Get Kentico CMS</h4>
</div><!-- /footer-->
</div>
</div><!-- /page -->
</body>
</html>
When the code is run it produces the following screenshot.
Split button lists
Many times an application may need to support multiple actions per list. This is done with a split button list that contains both a primary and secondary button. To create this add a secondary link inside the list item. At run time this adds a vertical line that separates the primary and secondary actions. An example of this is shown in the following screenshot.
<!DOCTYPE html>
<html>
<head>
<title>Seattle Restaurant Finder</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Welcome to the Seattle Restaurant Finder</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-split-icon="gear" data-split-theme="d">
<li> What kind of meal are you in the mood for? <p class="ui-li-aside">Seattle Foodies Rule!</p></li>
<li>
<a href="reviews.htm"> <img src="images/bbq.jpg" />
<h1> BBQ</h1>
<p>Classic American Food</p>
</a>
<a href="search.htm" data-rel="dialog" data-transition="slideup">Search for reservations</a>
</li>
<li>
<a href="reviews.htm"> <img src="images/indian.jpg" />
<h1>Indian </h1>
<p> A classic Indian meal</p>
</a>
<a href="search.htm" data-rel="dialog" data-transition="slideup">Search for reservations</a>
</li>
<li>
<a href="reviews.htm"> <img src="images/thai.jpg" />
<h1> Thai</h1>
<p>Spice is the order of the day</p>
</a>
<a href="search.htm" data-rel="dialog" data-transition="slideup">Search for reservations</a>
<li>
</ul>
</div><!-- /content -->
<div data-role="footer">
<h4> Get Kentico CMS</h4>
</div><!-- /footer-->
</div>
</div><!-- /page -->
</body>
</html>
When this is run it produces the following screenshot.
In the main form we can click on the BBQ icon as shown in the following screenshot.
Hold your mouse over the star to the see the following tooltip and the second click area.
In this blog post we looked at just a few of the possibilities. I definitely encourage you to continue learning about the power of jQuery Mobile!