jQuery Mobile 1.0 Final Released

Contributing Editor

Following a year of thorough testing and debugging by 125 contributors, the final gold version of jQuery Mobile has been released. If you’re developing mobile applications for iOS, Android, Blackberry, Bada, Windows, WebOS, Symbian or MeeGo, you should certainly investigate what jQuery Mobile offers.

Before we go any further, I should clear up some confusion. Despite the name, jQuery Mobile is not jQuery for mobiles! It’s an interface framework which requires the standard jQuery core (1.6.4 is supported at this time). It could be likened to jQuery UI for mobile devices or, more accurately, projects such as Sencha Touch.

jQuery mobile interface

In essence, jQuery mobile helps you build cross-platform mobile web applications using HTML5. Common elements such as pages, toolbars, dialogs, lists, navigation and form fields are styled and transformed into an attractive iPhone-inspired mobile interface.

Impressively, jQuery Mobile provides A-grade support for all modern platforms including: iOS 3.2+, Android 2.1+, Windows Phone 7+, Blackberry 6+, WebOS 1.4+, Firefox Mobile, Opera Mobile 11, Meego 1.2, Kindle 3 and Kindle Fire. Lesser browsers such as Blackberry 5, Opera Mini, and Symbian will work but features such as Ajax navigation may be disabled. Older browsers will still receive a functional, non-enhanced HTML-only experience.

A-grade support also extends to the desktop editions of IE (7+), Chrome, Firefox and Opera. That should make testing significantly easier for developers.

How to use jQuery Mobile

The jQuery documentation is impressive:

Those with a little HTML experience can implement basic multi-page templates and transitions using markup alone:


<!DOCTYPE html> 
<html> 
	<head> 
	<title>My Page</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head> 
<body> 

<div id="one" data-role="page">

	<div data-role="header">
		<h1>Page One</h1>
	</div>

	<div data-role="content">	
		<p>Hello world</p>
		<p><a href="#two" data-role="button"data-transition="slide">Show page 2</a></p>		
	</div>

</div>

<div id="two" data-role="page">

	<div data-role="header">
		<h1>Page Two</h1>
	</div>

	<div data-role="content">	
		<p>Hello again</p>
		<p><a href="#one" data-role="button">Show page 1</a></p>		
	</div>

</div>

</body>
</html>

Those requiring more sophistication can access the API to configure the defaults, define events and modify themes.

Building Your Own Theme

If you’re not keen on the subtle blue and gray iPhone design, the theme can be tweaked using CSS. If that’s a little too much effort, try the ThemeRoller application. The whole design can be modified by dragging colors on to interface elements and downloading the customized CSS file.

Suitable File Sizes?

jQuery Mobile’s JavaScript code is contained in a 24KB minified and gzipped file. A further 7KB is required for the CSS theme and 32KB for the jQuery 1.6.4 core. That’s a total of 63KB — a reasonable download for the slowest of connections. Don’t forget that you’ll probably require fewer graphics too.

jQuery Mobile looks great. It won’t magically convert your existing project to a mobile app but it’ll make the task far easier, more reliable and it’ll work on multiple devices.

Are you intending to use jQuery Mobile in your next project?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://pixelpress.co @pixelpress branden

    Awesome news and a powerful new tool in a developer’s toolkit. Solid mobile web apps without writing a line of JS!

  • http://www.danielanderson.com.au Daniel Anderson

    Yeah, I have just done my first jQuery Mobile App for a local football club stonecats.com.au/mobile, still adding features and other things to it. jQuery Mobile seems like a great framework, I like it!

  • http://twitter.com/drale2k Drazen Mokic

    I liked it since the beta but one thing still holds me back from using it. When you hit a link it first jumps back to the top of the site and then it animates to the next page, i hate it, it`s so ugly.

    Any way to have it behave like on the iphone? Where you hit a link and it just animates to the next page?