HTML5 : Custom ListViews with jQueryMobile

Almost every project I had with jqueryMobile comes with one or more customize listview. A customize listview is basically a list that doesn’t look like the default one. Today I’m going to demonstrate a little about how to add some icon, thumbnail and some css tips in handling customize listView. Customize listView is usually done by implementing a content formating listview then altering it’s css from there. This is the defaulted content formatted listview.


For this mini tutorial project, we are going use :-

  1. jQueryMobile 1.1.0
  2. jQuery 1.7.1
  3. IconFlags asset
  4. Some Thumbnail asset
You can download the assets for today’s tutorial here.
Our objective is to make a listView that contains flag icon of the country, the capital city in larger size thumbnail and name of the capital city below the country name. See results image below.

Before we begin, I would like to stress that, jQueryMobile uses a dynamic runtime styling CSS, which mean, in certain elements you inserted within the listview will have it’s own styling that only appears during runtime. If you try to style those elements with your own class, it will not work. This is because, additional jQueryMobile class appended during it’s runtime will override your css class. In this tutorial, I’ll show you how to overwrite them properly.

First let’s start up a normal jQueryMobile Page and Content tag. For this demo, we are just going to use the cdn version of jqm and the css there.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile: Customize Listview</title>
	<link rel="stylesheet"  href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
		<div data-role="page" class="type-home">
			<div data-role="header"> 
				<h1>JQM : Customize ListView</h1> 
			</div>
                        <div data-role="content">
 
                        </div>
               </div>
</body>
</html>

Next, we add the listView Components in with data.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile: Customize Listview</title>
	<link rel="stylesheet"  href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
		<div data-role="page" class="type-home">
			<div data-role="header"> 
				<h1>JQM : Customize ListView</h1> 
			</div>
                        <div data-role="content">
                             <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="a">
				<li data-role="list-divider">Overview</li>
				<li><a href="#"> <img src="./images/th.jpg"> <h1><img src="./flags/th.gif"> Country Name : Thailand </h1><p>The Capital City of The Country Thailand is Bangkok.</p></a></li>
				<li><a href="#"> <img src="./images/cn.jpg"> <h1><img src="./flags/cn.gif"> Country Name : China </h1><p>The Capital City of The Country China is Beijing.</p></a></li>
				<li><a href="#"> <img src="./images/my.jpg"> <h1><img src="./flags/my.gif"> Country Name : Malaysia </h1><p>The Capital City of The Country Malaysia is Kuala Lumpur.</p></a></li>
				<li><a href="#"> <img src="./images/in.jpg"> <h1><img src="./flags/in.gif"> Country Name : India </h1><p>The Capital City of The Country India is New Delhi.</p></a></li>
				<li><a href="#"> <img src="./images/id.jpg"> <h1><img src="./flags/id.gif"> Country Name : Indonesia </h1><p>The Capital City of The Country Indonesia is Jakarta.</p></a></li>
			     </ul>
                        </div>
               </div>
</body>
</html>

You should be getting results like this. Because, this is a mobile site, try to shrink your browser width to the smallest.


Now, let’s try to insert our own class and try to style the title and the paragraph below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile: Customize Listview</title>
	<link rel="stylesheet"  href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
        <style>
           /**** Trying to style h1 and paragraph *******/
           .myHeader {
                 color:#cc0000;
           }
 
           .myParagraph {
                color:#333;
		overflow:show;
		text-overflow:clip;
		white-space:normal;
		height:28px;
		margin-bottom:0px;
           }
        </style>
</head>
<body>
		<div data-role="page" class="type-home">
			<div data-role="header"> 
				<h1>JQM : Customize ListView</h1> 
			</div>
                        <div data-role="content">
                             <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="a">
				<li data-role="list-divider">Overview</li>
				<li><a href="#"> <img src="./images/th.jpg"> <h1 class="myHeader"><img src="./flags/th.gif"> Country Name : Thailand </h1><p class="myParagraph">The Capital City of The Country Thailand is Bangkok.</p></a></li>
				<li><a href="#"> <img src="./images/cn.jpg"> <h1 class="myHeader"><img src="./flags/cn.gif"> Country Name : China </h1><p class="myParagraph">The Capital City of The Country China is Beijing.</p></a></li>
				<li><a href="#"> <img src="./images/my.jpg"> <h1 class="myHeader"><img src="./flags/my.gif"> Country Name : Malaysia </h1><p class="myParagraph">The Capital City of The Country Malaysia is Kuala Lumpur.</p></a></li>
				<li><a href="#"> <img src="./images/in.jpg"> <h1 class="myHeader"><img src="./flags/in.gif"> Country Name : India </h1><p class="myParagraph">The Capital City of The Country India is New Delhi.</p></a></li>
				<li><a href="#"> <img src="./images/id.jpg"> <h1 class="myHeader"><img src="./flags/id.gif"> Country Name : Indonesia </h1><p class="myParagraph">The Capital City of The Country Indonesia is Jakarta.</p></a></li>
			     </ul>
                        </div>
               </div>
</body>
</html>

You’ll notice nothing happens, even if your use !important into your css. If you turn on your inspector / safari developer tools, and point into the listview elements, you will notice two new class appears into the header and paragraph .ui-li-heading and .ui-li-desc . Now all we need is to target these class to our own class like this

12
13
14
15
16
17
18
19
20
21
22
                .myHeader.ui-li-heading {
			color:#cc0000;
		}
		.myParagraph.ui-li-desc {
			color:#333;
			overflow:show;
			text-overflow:clip;
			white-space:normal;
			height:28px;
			margin-bottom:0px;
		}

And walla, all done. For paragraph version of the css, we need the content have wrappings, instead of being truncated by default with ellipsis (the ..), to do that, we need to declare 4 css props…

  • text-overflow needs to reset it back to clip (it’s set to ellipsis by jQueryMobile)
  • white-space is set back to normal, where it the text will wrap automatically.
  • Any overflow beyond the height and weight, will be seen
  • Set a proper fixed height to make it look neat.

If you are interested in performance tuning, overlay and how to solve flickering problems – download my CSS Survival Kit for JQM here

Also visit my other tutorial for jQueryMobile on extending CSS class and how to create custom navbar icons here.

I also have tutorials on a better mobile html5 framework known as EnyoJS here and here.

 

Comments

comments

3 thoughts on “HTML5 : Custom ListViews with jQueryMobile

  1. Another way (does not require putting JQM specific classes in your css) is to simply use JQuery unique classes eg h1.myHeader and p.myParagraph. I tested this works. One reason NOT to have JQM specific tags is that different themes change the class atributes eg ui-li-a vs ui-li-b. Also, it seems a bit of reverse engineering to go into JQM via inspector. Any such “hidden” logic could change in future.

Leave a Reply

Your email address will not be published. Required fields are marked *