jQuery Mobile 1.0 Final Released

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="https://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
	<script type="text/javascript" src="https://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="https://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?