jQuery Mobile 1.1 has been released. The most notable improvements in 1.1 are true fixed toolbars, revamped page transitions and Ajax loader, and refined form elements. The new ThemeRoller tool allows existing jQuery developers to import their 1.0 theme and migrate it to 1.1. jQuery Mobile 1.1 requires jQuery 1.6.4 or 1.7.1.
Here's a quick rundown of the key changes in jQuery Mobile 1.1.
CSS-based Fixed Toolbars
During the early stages of jQuery Mobile development, there was minimal CSS support for position:fixed in mobile platforms. The "fixed" toolbar solution was to dynamically re-position the toolbar using JavaScript on page scroll. CSS support for position:fixed in mobile browsers (iOS5+, Android 2.2+, BlackBerry 6) has since improved and jQuery Mobile now provides CSS-based fixed toolbars. It falls back to static toolbar positioning for older browsers. To enable fixed toolbars, add the data-position="fixed" attribute to a header or footer element.
<div data-role="header" data-position="fixed"> <h1>...</h1> </div>
Developers who do not want to fallback on static toolbar positioning can add the 1.0-style toolbar polyfill extension. This optional extension adds the 1.0-style fixed toolbars for browsers that don't support position:fixed but can handle dynamic re-positioning. Note that the experimental touchOverflow feature that allowed for true fixed toolbars in iOS5 is now deprecated in 1.1. If you wish to render form controls in toolbars, use the data-mini="true" attribute. This will display the more compact versions of form controls which fit better in toolbars.
Improved Transitions
In jQuery Mobile 1.0, there were 2 major issues with regards to page transitions. There was the need to scroll the page between page transitions, and Android has very poor performance rendering CSS keyframe animations. In jQuery Mobile 1.1, to make the page scroll faster and to make the transitions look smoother, pages are first faded out before the page scroll and transition. Since adding the fade changes the slide effect, 1.1 has support for both 1.0 style slide and the 1.1 style slidefade transitions. With regards to Android 2.x performance, it was determined that it's not possible to dumb down page transitions to get acceptable performance, so it will no longer be supported. jQuery Mobile 1.1 now runs a feature test for 3D transforms. If a browser passes, it will see the full range of transitions. If a browser fails this 3D test, they will fall back to a fade transition, regardless of the transition specified. The fallback behavior for each transition is configurable if you want to change this behavior. Also note the default page transition is now fade, changed from the previous default of slide.
Page transitions in newer versions of Firefox are now supported by the addition of -moz prefixed rules for all the page transitions. 1.1 has also added two new transitions: turn and flow. The turn transition is similar to the WP Metro style page effect. The flow transition is similar to the iOS tab switching transition where pages zoom in and out.
Improved Design
The default theme has been cleaned up and tweaked. The focus style is now stronger for keyboard navigation, and contrast has been adjusted for platforms like WP7 that don't support gradients. A new Ajax loader is now implemented as minimal as possible. It is now a lighter spinner image with no text. For those who want to display text with the loader, there are new global options that let you set whether you want to see the text, loader or both. You can also set the theme or text at runtime.
The flip switch has been improved. The design was tweaked to use a round handle for the flip switch and re-vamped the underlying code to make it more robust. The slider widget has a new highlight feature. A track highlight was added from the left of the track to the slider position, which can be activated by adding data-highlight="true" attribute to the range input. Support for slider step attributes has also been added. It allows developers to specify the increment the slider handle moves.
jQuery 1.7.1
jQuery Mobile 1.1 now supports both jQuery 1.6.4 and 1.7.1. It's recommended that developers use jQuery 1.7.1 to take advantage of all the improvements in the latest release. Testing on jQuery 1.7.2 is ongoing and will be officially supported in a future release.
Data Enhancement
In jQuery Mobile 1.0, the entire markup is scanned for elements to be enhanced, which is problematic for 3rd party widgets and libraries. In 1.1, there is the new data-enhance=false attribute that can be added to a container to prevent both auto-initialization and link/form hijacking. This is also available via $.fn.jqmEnhanceable. This feature must be turned on explicitly using $.mobile.ignoreContentEnabled=true. It is also now possible to disable the Ajax navigation system from hijacking a group of links or form submits via the data-ajax="false" attribute. You simply add the data-ajax=false attribute to the parent container and it will exclude all the child links and forms from the Ajax navigation system behavior.
Zoom Fixes
In jQuery Mobile 1.0, developers had to disable user zooming via the viewport meta tag if they wanted to avoid the page zooming in oddly when you rotated an iOS device into landscape mode. To keep user zooming enabled as much as possible, 1.1 now temporary disables zooming if a device is in the process of being rotated. This is in the utility called zoom.iosorientationfix.js. There is another utility called zoom.iosfocusfix.js, which temporarily disables zooming when a select or input element is focused, preventing iOS from zooming into that element and cropping the viewport. There is also a new general utility called $.mobile.zoom used by the two utilities mentioned.
Current jQuery Mobile users who wish to upgrade should keep the following in mind.
- The default transition has changed from slide to fade.
- Browsers that don't support 3D transforms will fallback to fade. The fallback option is configurable.
- The touchOverflow feature is now deprecated.
- $.mobile.fixedToolbars.setTouchToggleEnabled(false) has been replaced with the tapToggle option.
- The data-fullscreen="true" option for fixed toolbars should now be added to the individual header or footer toolbars, instead of the page container.
For more information, check the jQuery Mobile change log and supported platforms. To get started, visit the jQuery Mobile download & CDN section.