jQuery Mobile 1.0 Final Released

Share this article

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> 
	<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>

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

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

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


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

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

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



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?

Craig BucklerCraig Buckler
View Author

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

HTML5 Dev CenterjQueryMobile Tutorials & Articles
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form