on Articles

jQuery Mobile RC1 released – what’s new?

Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInShare on RedditShare on StumbleUpon

jQuery Mobile is a unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.

It has been around for some time and is accepted by many developers for its simplicity and device support.

The biggest challenge in developing such a system is browser support. There are many mobile browsers available and it isn’t easy to cope with that. But jQuery Mobile keeps everything up to date.

Browser support

I will just mention the newest additions to the browser/OS list and that is Nokia Meego. jQuery Mobile supports even iOS 5 Beta OS.

To view the extensive list of browsers go to jQuery Mobile browser support page.


A few final tweaks are made to the collapsible and accordion widget that really improves the visual design. First off, they removed the extra button style around the +/1 icons which made this look too much like a separate interactive element (it’s not, the whole bar is clickable) and cleaned up the visual appearance.

jQuery Mobile Collapsibles

iOS5 Transitions

The new iOS5 page transitions and true fixed headers have been improved significantly since Beta 3 but this feature is off by default for now. jQuery Mobile is now using a 3D transform CSS rule reduce page rendering artifacts which could cause memory use issues on very complex pages so you may need to override this selectively.

Download builder

This is one of the mos impressive features in jQuery Mobile RC1.

Download builder will let you build a custom version of jQuery Mobile to only include the parts you need. For example, you could just use the core files to add Ajax-based navigation with pushState and leverage some of the touch events and other utilities with a very lightweight build (roughly 10k). Or, you could add in specific UI widgets like form elements, listviews, etc. to create an optimized build. We’re aiming to have a download builder tool launch as part of 1.0 final in some form.

ThemeRoller tool

This tool will help developers make new themes a breeze. The beta of the ThemeRoller tool is only announced now and it will be available in a few weeks.

Team announced that this tool will make it drop-dead-simple to build a stunning theme in minutes.

Search input: Icon themeable and retina-ready

The small search icon in the search input was the last standalone icon that hadn’t yet been integrated into the standard icon sprite.This icon is fully themable and includes the HD retina icon version too. To do this, jQuery Mobile team had to place the icon inside the standard icon disc so the appearance is a bit different, but it now matches the rest of the UI system. Note that this is add though a CSS technique that isn’t supported by IE 6-7 so in those browsers, the icon won’t appear.

Deprecated features

Deprecated re-named page events – the deprecated beforechangepage (now pagebeforechange), changepage (now pagechange), and changepagefailed (now pagechangefailed) events references have been dropped in preparation for the 1.0 release. See the events API documentation and commit log for more info.

Removed support for the alpha signature of $.mobile.changePage() in preparation for 1.0. Folks now how to use the signature that requires the toPage (url or element) as the first arg, and options object as the 2nd. See the events API documentation and commit log for more info.

Removed deprecated navigation related properties: $.mobile.updateHash$.mobile.urlstack. See commit log for details.

Removed the deprecated $.fixedToolbars property in preparation for 1.0. See commit log for details.

Removed $.mobile.pageLoading() call which was replaced by $.mobile.showPageLoadingMsg()and $.mobile.hidePageLoadingMsg()

List of changes in changelog is impressive like adding jQuery 1.6.4 support, Hardware acceleration of elements within the page in touch-enabled scenarios to prevent hidden elements (not just blinking, but flat-out disappearing) in iOS5, enable forms to submit to the same page and many more.

Team announced a few days ago that the Nokia Meego implementation was the easiest ever.

What are you waiting for? To test this awesome new release (I know I will), just include this in your files:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>

Do you use jQuery Mobile in your line of work? Please share your thoughts in comment section and use the links below to spread the wrod abut this great release.

Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInShare on RedditShare on StumbleUpon