jQuery Mobile – What You Need to Know

Posted in Coding, JS & AJAX, Tutorials • 506 days ago • Written by Rochester Oliveira • 17 Comments

jQuery Mobile version 1.0 finally launched this past November. Don’t know if you heard about it, but if you are planning to do any mobile app or website development, it’s better to get started with it right now.

I’m sure you’ve heard about jQuery. So, its mobile version is pretty close to what you already are used to, but with a lot of enhancements for mobile screen events (like touching instead of click, and there is no hover) and browsers (this one is tricky since there are plenty of browsers and devices out there) and capabilities (pluggable components).

The crazy thing is how simple it is to initiate and build a fully working mobile site. Actually, we’ll be talking about concepts, tips, codes, and in the meantime you can build your own app, in no more than one hour. Yeah, noob to ninja in one hour, this is what you’ll get here :)

So, let’s rock!

jQuery Mobile’s Main Concept

Cross browsing, a nightmare that was coming back

Those who used to code anything between 2001 and 2008 (while < IE6 was pretty huge, and Firefox / Chrome were just the new kids on the browser block) faced the nightmare of cross-browser issues. I mean, if you think that putting a vendor prefix before CSS code is cross-browser, try to get things working well on IE5.5, IE6, Opera and Firefox without CSS / JS hacks.

That, dear Padawan, was crazy.

Back to 2010, mobile was getting bigger and bigger. So were the types of browsers out there. Each smart phone and tablet has its own capabilities and its own particularities. Try mixing that with touch oriented screens and a huge range of screen sizes. Sound familiar?

Then, the hero arrives

jQuery Mobile What You Need to Know

Credits: bizior (photo) & Rochester Oliveira (edit)

jQuery Mobile comes with a huge compatibility table, with lots of devices and platforms well covered. All you’ve got to do is include their libraries, and try to stop your jaw from hitting the floor when you see the amazing features.

Oh, and it’s not just about cross browsing. It also covers a lot of UI elements that are already standards out there. And if you want a little more customized look you can easily change that, without messing up functionality.

Awesomeness proven, let’s code!

Ok, now you know why this project is so great, let’s take a look at some of the overall effects, components, good practices and code that you may want to use.

Basic structure

Just to get started, let’s grab our files from jQuery’s CDN. We’ll need just 3 files:

jQuery Mobile stylesheet
jQuery JS
jQuery Mobile JS

So your code will look like:

<!DOCTYPE html>
<html>
<head>
	<title>Starter page</title>
	<meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
	<div data-role="page" id="home">
		<div data-role="header">
			<h1>Header</h1>
		</div>
		<div data-role="content">
			<p>Lorem ipsum</p>
		</div>
		<div data-role="footer">
			<h4>Footer</h4>
		</div>
	</div>
</body>
</html>

As you may notice it uses HTML5 markup and data-* attributes to get things working. This snippet will output this (all tests done with iOS 5.0.1 @ iPod):

Important note, any “traditional” jQuery call should be placed before the call for mobile framework.

Basic UI components

jQuery Mobile uses data-* attributes to define UI components. Actually you just saw 4 of them above. Let’s see a small list of them and their correspondent data attribute:

data-role=”page” : you can set divs inside your HTML page to behave as pages. SO what we’ve done above is to create a page “home” inside our file
data-role=”header”: used to mark divs as top toolbars. You can set up data-position=”fixed” as well so it’ll behave as fixed toolbar
data-role=”content”: the main part of your website / app. Images, buttons, actions and all the magic happens here!
data-role=”footer”: defines a toolbar at the bottom of current page. May use data-position=”fixed” too so it’ll force to stay at the bottom of the screen
data-role=”button”: it’ll be useful together with elements. You may use also data-transition to define how it’ll load next page. Options: slide, slideup, slidedown, pop, fade, flip. Another cool thing is data-icon, which gives you a lot of default icons. You may also reduce its size using data-inline=”true”.
data-theme=”a/b/c/d/e”: Define color scheme used for elements.

Let’s wrap up all those attributes in a simple 2-page linking. Output:

Second page:

Code:

<!DOCTYPE html>
<html>
<head>
	<title>Starter page</title>
	<meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
	<div data-role="page" id="home" data-theme="b">
		<div data-role="header">
			<h1>Header</h1>
		</div>
		<div data-role="content">
			<p>Lorem ipsum</p>
			 <p><a href="#second" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right">Second page</a></p>
		</div>
		<div data-role="footer">
			<h4>Footer</h4>
		</div>
	</div>
	<div data-role="page" id="second">
		<div data-role="header">
			<h1>Header second page</h1>
		</div>
		<div data-role="content">
			<p>I'm second page!</p>
		</div>
		<div data-role="footer">
			<h4>Footer second page</h4>
		</div>
	</div>
</body>
</html>

Navigation, Lists, Form & Dialog Components

Then we have a bunch of other default components that are easily implemented with jQuery Mobile:

data-role=”navbar”: Used to create menus. Then you should place a ul item with li’s and a’s (BTW, that’s the way you should create menus, always)
data-role=”listview” + data-filter=”true” : Awesomely easy way to create searchable lists. Really useful!
data-role=”fieldcontain”: This is a container for form elements
select data-native-menu=”false”: creates a cool select element as “floating” element instead of default select which stole half of screen area
select data-role=”slider”: Creates a “on / off” slider, useful for options pages
input type=email, tel, number, url..: accepts any HTML5 data format, and adjust keyboard to better fit data type
input type=range: same as before, but this one uses new HTML format and creates an actual slider, good for numbers range inputs
data-rel=”dialog”: is an anchor attribute that makes target page opens as dialog box.
data-add-back-btn=”true”: add this attribute to your page and you’ll have a “back” button. Cool, huh?

Now we’ll edit our demo file a little bit. It’ll be 4 pages now:

Home screen will have a dialog box
Form elements page will use all we have mentioned
List page will have a searchable list so you can try it
Alert page has target content when user clicks the alert link

Previews:

Alert page:

Form page:

Lists page:

<!DOCTYPE html>
<html>
<head>
	<title>Starter page - 1stWebDesigner.com</title>
	<meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
	<div data-role="page" id="home" data-add-back-btn="true">
		<div data-role="header">
			<h1>Alert element</h1>
		</div>
		<div data-role="content">
			<p><a href="#alert" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" data-theme="b" data-rel="dialog">Open alert</a></p>
		</div>
		<div data-role="footer">
			<div data-role="navbar">
				<ul>
					<li><a href="#form" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" data-inline="true">Form Elements</a></li>
					<li><a href="#list" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" data-inline="true">List element</a></li>
				</ul>
			</div>
		</div>
	</div>
	<div data-role="page" id="form" data-add-back-btn="true">
		<div data-role="header">
			<h1>Form elements</h1>
		</div>
		<div data-role="content">
			<div data-role="fieldcontain">
				<label for="name" class="select">Choose:</label>
				<select id="name" name="select" data-native-menu="false">
					<option value="value1">option1</option>
					<option value="value2">option2</option>
					<option value="value3">option3</option>
				</select>

				<label for="slider">Select slider:</label>
				<select name="slider" id="slider" data-role="slider">
					<option value="off">Off</option>
					<option value="on">On</option>
				</select>

				<label for="slider">Input slider:</label>
				<input type="range" name="slider" id="slider" value="0" min="0" max="100"  />

				<label for="email">Email Input:</label>
				<input type="email" id="email" name="email" value=""  />

				<label for="num">Number Input:</label>
				<input type="number" id="num" name="num" value=""  />
			</div>
		</div>
		<div data-role="footer">
			<div data-role="navbar">
				<ul>
					<li><a href="#home" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" data-inline="true">Home</a></li>
					<li><a href="#list" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" data-inline="true">List element</a></li>
				</ul>
			</div>
		</div>
	</div>
	<div data-role="page" id="list" data-add-back-btn="true">
		<div data-role="header">
			<h1>This is a list</h1>
		</div>
		<div data-role="content">
			<ul data-role="listview" data-filter="true">
				<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
				<li>Aliquam vitae leo metus, quis suscipit nulla.</li>
				<li>Maecenas accumsan urna sit amet justo commodo accumsan.</li>
				<li>Nulla vitae lacus augue, vel eleifend tellus.</li>
				<li>Integer at ligula turpis, at fermentum nisl.</li>
				<li>Nam dapibus risus at massa sagittis egestas.</li>
				<li>Praesent hendrerit purus vitae enim faucibus tincidunt.</li>
				<li>Curabitur sit amet lectus neque, id facilisis elit.</li>
			</ul>
		</div>
		<div data-role="footer">
			<div data-role="navbar">
				<ul>
					<li><a href="#home" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" data-inline="true">Home</a></li>
					<li><a href="#form" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" data-inline="true">Form element</a></li>
				</ul>
			</div>
		</div>
	</div>
	<div data-role="page" id="alert" data-add-back-btn="true">
		<div data-role="header">
			<h1>Alert!</h1>
		</div>
		<div data-role="content">
			<p>I'm alert page!</p>
		</div>
	</div>
</body>
</html>

Custom font embedding

Probably no method will beat @font-face. So I suggest you go to Font Squirrel and generate your font files.

Compress images

You should do this all the time, actually. But when you are designing for the mobile world, even a few kb’s makes big difference. So save your user’s bandwidth and compress not only your code, but all your images.

JPEG mini has the best compressing service I’ve ever seen, and it’s quite easy to use, you should give it a try!

Remove components

We talked about just a few of many jQuery Mobile’s components. So it’s more likely you won’t be using them all.

The good news is that you can easily remove them, by making your own build :)

Now it’s your turn?

So, how are you planning to use jQuery Mobile? Have another cool tip to share? Don’t be shy and comment!

Join over 55,891 Subscribers Today! FREE UPDATES!

Get The Only Freelancer crash course you will ever need to read!

Rochester Oliveira

43 Written Articles • Twitter • Website • Google+

I'm a web designer and entrepreneur from Itajubá (MG), Brasil. I love writing about obscure topics and doing some cool stuff. And also I do some FREE stuff, check it out: http://www.roch.com.br/

17 Comments Best Comments First

Dan

Tuesday, January 31st, 2012 03:07

6

Great article, thanks – from previous experience with jQuery Mobile (pre 1.0), it’s was a great framework for iOS and newer Android devices. What I experienced though, was a big inconsistency between iOS and Android for swipe and multi-touch gestures (read: swipe, etc., worked less than 50% of the time), to the point where I opted not to use the entire framework because of the necessity for those functions.

Hopefully with the release of 1.0 these have all been fixed. I’ll have to give it another whirl soon.

+1
- Rochester Oliveira
  
  Tuesday, January 31st, 2012 15:43
  
  11
  
  Hi Dan!
  
  Nice point, I’ll try it on Android also. But according to their page, device support is pretty good right now!
  
  []‘s
  
  0
Ben

Tuesday, January 31st, 2012 07:02

7

Awesome post, Rochester. Great for getting started with jQuery Mobile! At the very least it’s a nice way to get familiarized with jQuery Mobile framework… and it’s free. :)

0
- Rochester Oliveira
  
  Tuesday, January 31st, 2012 15:44
  
  12
  
  Hi Ben,
  
  Thanks for sharing!
  
  I’ll take a look at it, maybe we use in future projects :)
  
  []‘s
  
  0
Nimsrules

Monday, January 30th, 2012 13:04

1

Awesome beginners article on jQuery mobile. Finally better UI is gonna enter the mobile industry. Thanks!

0
- Rochester Oliveira
  
  Monday, January 30th, 2012 15:41
  
  2
  
  Hi Nimsrules,
  
  Yeah, you got the point, jQuery mobile allows us to easily add great UI enhancements with awesome cross-browsing support.
  
  Thanks for commenting!
  []‘s
  
  0
Chris

Monday, January 30th, 2012 17:49

5

Yep – it is CRAZY easy to work with, and looks pretty good right out of the box! Thanks also for the links to jpgmini! great resource!

0
- Rochester Oliveira
  
  Tuesday, January 31st, 2012 15:41
  
  10
  
  Hi Boulder!
  
  Yeah, it is pretty easy indeed. JPGmini is awesome! And we’lll have more on this tomorrow :)
  
  []‘s
  
  0
Mehdi Raza

Monday, January 30th, 2012 20:31

3

There’s one problem: Using a big jQuery library with additional jQuery mobile component would make our JS very heavy. The webpages would load very slowly on lower-end mobile phones.

0
- Rochester Oliveira
  
  Tuesday, January 31st, 2012 15:38
  
  9
  
  Hi Medhi,
  
  Yeah, there is always a downside, isn’t it?
  
  But I guess it worth trying. As I say, you shouldn’t make things for the worst scenario. You have to make it to encourage updated users, then you thing about fallbacks for limited ones.
  
  []‘s
  
  0
luk3thomas

Monday, January 30th, 2012 22:41

4

Any comments on jQuery Mobile performance? I used it in 2011, and found the performance to be sort of laggy and jumpy. Not sure if things have improved since then or not?

0
- Rochester Oliveira
  
  Tuesday, January 31st, 2012 15:35
  
  8
  
  Hi luk3thomas,
  
  I’ve tried only on iPod 4 and it worked pretty well.. But some effects (like “fade” transition) may take a while to load..
  
  []‘s
  
  0
petur kirke

Sunday, March 25th, 2012 23:18

17

This sounds good, but there is no information about how to test, debug and release an app

0
Tessa

Wednesday, February 1st, 2012 13:38

14

I have been big fan of jQuery for many years. Recently i come across the jQuery mobile, it creates fantastic effect with little effort.

0
- Rochester Oliveira
  
  Wednesday, February 22nd, 2012 21:57
  
  16
  
  Tessa,
  
  Yeah, it’s amazing isn’t it? I’m writing another article about it right now, stay tuned :)
  
  []‘s
  
  0
canal

Tuesday, January 31st, 2012 22:27

13

hy Rochester Oliveira, thanks for this article.. it’s cool

0
- Rochester Oliveira
  
  Wednesday, February 22nd, 2012 21:54
  
  15
  
  Hi canal,
  
  I’m glad you liked!
  
  []‘s
  
  0

petur kirke

Sunday, March 25th, 2012 23:18

17

This sounds good, but there is no information about how to test, debug and release an app

0
Tessa

Wednesday, February 1st, 2012 13:38

14

I have been big fan of jQuery for many years. Recently i come across the jQuery mobile, it creates fantastic effect with little effort.

0
- Rochester Oliveira
  
  Wednesday, February 22nd, 2012 21:57
  
  16
  
  Tessa,
  
  Yeah, it’s amazing isn’t it? I’m writing another article about it right now, stay tuned :)
  
  []‘s
  
  0
canal

Tuesday, January 31st, 2012 22:27

13

hy Rochester Oliveira, thanks for this article.. it’s cool

0
- Rochester Oliveira
  
  Wednesday, February 22nd, 2012 21:54
  
  15
  
  Hi canal,
  
  I’m glad you liked!
  
  []‘s
  
  0
Ben

Tuesday, January 31st, 2012 07:02

7

Awesome post, Rochester. Great for getting started with jQuery Mobile! At the very least it’s a nice way to get familiarized with jQuery Mobile framework… and it’s free. :)

0
- Rochester Oliveira
  
  Tuesday, January 31st, 2012 15:44
  
  12
  
  Hi Ben,
  
  Thanks for sharing!
  
  I’ll take a look at it, maybe we use in future projects :)
  
  []‘s
  
  0
Dan

Tuesday, January 31st, 2012 03:07

6

Great article, thanks – from previous experience with jQuery Mobile (pre 1.0), it’s was a great framework for iOS and newer Android devices. What I experienced though, was a big inconsistency between iOS and Android for swipe and multi-touch gestures (read: swipe, etc., worked less than 50% of the time), to the point where I opted not to use the entire framework because of the necessity for those functions.

Hopefully with the release of 1.0 these have all been fixed. I’ll have to give it another whirl soon.

+1
- Rochester Oliveira
  
  Tuesday, January 31st, 2012 15:43
  
  11
  
  Hi Dan!
  
  Nice point, I’ll try it on Android also. But according to their page, device support is pretty good right now!
  
  []‘s
  
  0
Chris

Monday, January 30th, 2012 17:49

5

Yep – it is CRAZY easy to work with, and looks pretty good right out of the box! Thanks also for the links to jpgmini! great resource!

0
- Rochester Oliveira
  
  Tuesday, January 31st, 2012 15:41
  
  10
  
  Hi Boulder!
  
  Yeah, it is pretty easy indeed. JPGmini is awesome! And we’lll have more on this tomorrow :)
  
  []‘s
  
  0
luk3thomas

Monday, January 30th, 2012 22:41

4

Any comments on jQuery Mobile performance? I used it in 2011, and found the performance to be sort of laggy and jumpy. Not sure if things have improved since then or not?

0
- Rochester Oliveira
  
  Tuesday, January 31st, 2012 15:35
  
  8
  
  Hi luk3thomas,
  
  I’ve tried only on iPod 4 and it worked pretty well.. But some effects (like “fade” transition) may take a while to load..
  
  []‘s
  
  0
Mehdi Raza

Monday, January 30th, 2012 20:31

3

There’s one problem: Using a big jQuery library with additional jQuery mobile component would make our JS very heavy. The webpages would load very slowly on lower-end mobile phones.

0
- Rochester Oliveira
  
  Tuesday, January 31st, 2012 15:38
  
  9
  
  Hi Medhi,
  
  Yeah, there is always a downside, isn’t it?
  
  But I guess it worth trying. As I say, you shouldn’t make things for the worst scenario. You have to make it to encourage updated users, then you thing about fallbacks for limited ones.
  
  []‘s
  
  0
Nimsrules

Monday, January 30th, 2012 13:04

1

Awesome beginners article on jQuery mobile. Finally better UI is gonna enter the mobile industry. Thanks!

0
- Rochester Oliveira
  
  Monday, January 30th, 2012 15:41
  
  2
  
  Hi Nimsrules,
  
  Yeah, you got the point, jQuery mobile allows us to easily add great UI enhancements with awesome cross-browsing support.
  
  Thanks for commenting!
  []‘s
  
  0

Comments are closed.

jQuery Mobile’s Main Concept

Cross browsing, a nightmare that was coming back

Then, the hero arrives

Awesomeness proven, let’s code!

Basic structure

Basic UI components

Navigation, Lists, Form & Dialog Components

Custom font embedding

Compress images

Remove components

Now it’s your turn?

Join over 55,891 Subscribers Today! FREE UPDATES!

Dan

Ben

Chris

Mehdi Raza

luk3thomas

petur kirke

Tessa

canal

petur kirke

Tessa

canal

Ben

Dan

Chris

luk3thomas

Mehdi Raza

Join over 55,891 Subscribers Today.

New? Start here:

Pages

Quick Links

1st WebDesign Ebooks

Web Designers Ultimate 3 Book Bundle

Responsive Web Site Design, Get Your Site Ready For Every Device And Browser

Learn HTML5 Website Basic Features And Elements In 1 Day

Latest Web Design Trends, The Road To Good Website Design

Do You Know How To Freelance And Get More Clients?