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.
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:
<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" />
<div id="one" data-role="page">
<p><a href="#two" data-role="button"data-transition="slide">Show page 2</a></p>
<div id="two" data-role="page">
<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 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?