jQuery Mobile 1.1: Smoother, Faster, Nicer

Find out what's new and improved in the jQuery Mobile 1.1 mobile web framework. The article includes detailed descriptions and demos that explain each new feature.

jQuery Mobile 1.1: Smoother, Faster, Nicer

The latest version of jQuery Mobile, 1.1, has just hit the streets, and it has some great new features and improvements over 1.0. In this article you'll get a quick run-down of jQuery Mobile 1.1, and all that it has to offer you as a mobile web developer.

You'll look at:

  • Improved fixed header and footer toolbars
  • Enhancements to page transitions, and two new transition effects
  • Loading spinner and text improvements
  • Cute mini form elements
  • Nicer-looking flip switches
  • Improved sliders
  • Disabling markup enhancements and Ajax handling for entire containers, and
  • A few other minor improvements in version 1.1.

At the end of the article, you'll also get a brief taste of the new features and widgets that are slated for the upcoming jQuery Mobile 1.2 release.

Let's start with one of jQuery Mobile 1.1's headline features: its vastly improved fixed header and footer toolbars.

Huge improvements to fixed toolbars

Fixed toolbars are header and footer bars that you lock to the top or bottom of the viewport by adding the data-position="fixed" attribute to the header or footer.

The easiest way to create fixed page elements is to use the CSS position: fixed property. Since mobile browser support for this property has historically been very patchy, older versions of jQuery Mobile dynamically repositioned the fixed toolbars as the user scrolled. This worked, but the effect was somewhat clunky.

Thankfully, browser support has improved these days, and with version 1.1, the jQuery Mobile team have totally reworked fixed toolbars so that they now use position: fixed when possible, resulting in much smoother fixed toolbars. For browsers that don't support position: fixed, such as Safari in iOS 4.3, the framework falls back to regular statically-positioned toolbars, with the header at the top of the page and the footer at the bottom.

If you want to re-enable the previous dynamically-repositioned fixed toolbars for older browsers — as used by jQuery Mobile 1.0 and earlier — there's a polyfill available. This can be useful if you use header and/or footer bars in very long pages.

Press the buttons below to compare the older, dynamically-positioned fixed toolbars with the new position: fixed toolbars. (To see the new toolbars working, you'll need a modern mobile browser such as Safari in iOS 5, or a desktop browser.)

In addition, fixed toolbars now have a range of options and methods that you can use to customize their behaviour. These include the visibleOnPageShow option that controls whether the toolbar appears when the page is initially shown; the tapToggle option for turning the "toggle-on-tap" feature on or off; and the show, hide and toggle methods for programmatically displaying and hiding toolbars.

There's one other small but important change with fixed toolbars, relating to fullscreen positioning. In jQuery Mobile 1.0, you could put fixed toolbars into a "fullscreen" mode by adding data-fullscreen="true" to the page container. In 1.1, you now need to add this attribute to the individual header and footer toolbar containers instead of the page container.

There are some known issues with position: fixed and Android 2.2/2.3. Check the docs for details.

jQuery Mobile 1.0 used the CSS overflow-scrolling: touch property to improve fixed toolbars in browsers that supported it. Since 1.1 now uses true position: fixed toolbars, the overflow-scrolling: touch code has been removed from the framework. This means that 1.0's $.mobile.touchOverflowEnabled global option no longer has any effect in 1.1. The option is now deprecated, so you should remove any reference to it from your code.

Smoother, snappier page transitions

Once of the nicest changes in jQuery Mobile 1.1 is much smoother transitions between pages. Due to the way transitions in jQuery Mobile work, the framework has to scroll to the top of the current page before transitioning to the new page. Here's the sequence of events:

  1. User scrolls down in the current page
  2. User clicks a link to view a new page
  3. jQuery Mobile has to scroll to the top of the current page
  4. jQuery Mobile transitions the new page into view

This scrolling to the top of the page can be quite jarring, especially with slower mobile browsers:

Screenshot of scrolling to the top in jQuery Mobile 1.0
In jQuery Mobile 1.0, the framework has to scroll to the top of the current page (centre image) before it can transition to the new page (right image).

Although it's not currently possible to avoid the scrolling, with version 1.1 the jQuery Mobile team have come up with a great workaround. Now the process looks like this:

  1. User scrolls down in the current page
  2. User clicks a link to view a new page
  3. jQuery Mobile starts the transition
  4. At an appropriate point during the transition, jQuery Mobile fades out the current page, scrolls to the top of the (now blank) current page, and fades the page back in
  5. jQuery Mobile completes the transition, revealing the new page

The clever bit is that jQuery Mobile now fades the current page out just before scrolling the page to the top, then fades it back in after the scroll. This has two advantages:

  • The user doesn't see the scrolling happen
  • Scrolling the page is much faster, because it doesn't have any content

You can see the difference by viewing the following two pages in a modern mobile browser. For each page, scroll down, then tap the View Transition button to see a "flip" transition in action. Notice that the transitions are quicker and smoother in 1.1, and the scroll to the top of the page is much less noticeable, particularly with mobile browsers.

You can also check out some transition demos on the jQuery Mobile site:

The exception to this new fade in/out rule is the slide transition, which still uses the old, non-fading method, since it looks a lot better without the fade. If you want to apply a faster version of the slide transition that does incorporate the fade, use slidefade instead of slide.

As of 1.1, fade is now the default transition effect (previously it was slide). Also, due to limitations in older mobile browsers, such as Android 2.x, fade is now the only supported transition type with these browsers. If you specify a different transition, it will fall back to fade when viewed in these older browsers.

Another nice improvement is that transitions are now supported in Firefox (newer versions only).

Two new transition effects

As well as the transition effects supported by 1.0 — slide, slideup, slidedown, pop, fade, and flip — 1.1 ushers in two new lovely transitions:

turn
Flips the current page towards you, bringing the new page in from behind, as if the left edges of the pages were attached to a pole. This is reminiscent of the flip effect in Windows 8's Metro UI.
flow
Moves the current page into the background, then slides it along to reveal the new page, which then moves into the foreground. This is much like Safari on the iPhone's effect when switching between tabs.

You can see these two transitions in action by pressing the following buttons:

Screenshot of turn and flow transitions in jQuery Mobile 1.1
jQuery Mobile 1.1's new turn transition (left) and flow transition (right).

A nicer, more flexible loading spinner

The loading spinner graphic has been redesigned so that it's subtler and easier on the eye. The spinner also has no text by default (previously the word "loading" appeared beneath the spinner).

In addition, you can now set various extra options on the spinner:

$.mobile.
loadingMessageTextVisible
Whether to display the "loading" message beneath the spinner. (Boolean; defaults to false)
$.mobile.
loadingMessageTheme
The swatch to use for the loading message box — the box only appears when $.mobile.loadingMessageTextVisible is true. (A single-letter swatch string; defaults to "a")
$.mobile.
pageLoadErrorMessageTheme
The swatch to use for the message box when displaying loading errors. (A single-letter swatch string; defaults to "e")

You alter these settings globally in the usual way from within a mobileinit event handler, like this:


$(document).bind( "mobileinit", function() {
  $.mobile.loadingMessageTextVisible = true;
} );

As with previous versions, you can set the actual loading message text with $.mobile.loadingMessage, and the error message text with $.mobile.pageLoadErrorMessage.

Additionally, if you call $.mobile.showPageLoadingMsg() to display the loading message on demand, you can now pass up to three arguments to customize the message and spinner:

  1. The swatch for the message box (defaults to "a")
  2. The message text (defaults to "loading")
  3. Whether to hide the spinner image (true) or show it (false). Defaults to false.

Here's a demo page that shows how some of these loading message options look:

Screenshot of loader options in jQuery Mobile 1.1
jQuery Mobile 1.1 has a more flexible, customizable loading graphic.

Mini form elements for use in toolbars

You can now add the attribute data-mini="true" to any form element to create a slightly smaller version of the element, perfect for placing in toolbars. If you like, you can also use these mini elements in your main page content areas to save space.

This page shows you all these mini form elements next to their full-size counterparts.

Screenshot of regular and mini form elements in jQuery Mobile 1.1
You can now add data-mini="true" to any form element (left) to render a miniature version of it (right).

A new look for flip toggle switches

The jQuery Mobile developers have restyled the flip toggle switch widget for 1.1. The new switch looks cleaner and more compact, and more closely mimics the flip switch style on many mobile platforms:

Screenshot of flip switch in jQuery Mobile 1.1
The flip toggle switch has had a makeover between jQuery Mobile 1.0 (left) and 1.1 (right).

Press the buttons below to see the old and new flip switches in action:

Slider improvements

Range sliders now fully support the HTML step attribute. This attribute lets you specify the increment when moving the slider (it defaults to 1). For example, adding the attribute step="5" to an <input type="range"> element will make the slider move in steps of 5 when dragged, or when using the spinner control next to the slider (if available).

Previous versions of jQuery Mobile supported the step attribute only when using the keyboard or spinner control to move the slider. Now the step value also kicks in when dragging the slider and when using the numeric input box.

If the user enters a value in the numeric input box next to the slider, jQuery Mobile rounds the value to the nearest step value if necessary.

Another nice improvement to sliders is highlighting. By adding a data-highlight="true" attribute to a slider, you can highlight the area of the slider track to the left of the handle, giving the user a good visual indication of the value they've chosen:

Screenshot of slider with highlight in jQuery Mobile 1.1
Add data-highlight="true" to an <input type="range"> slider to add a highlight to the track.

Press the button below to check out these step and highlight improvements to sliders.

Preventing groups of elements from being enhanced

By default, jQuery Mobile goes through the markup in your mobile pages and enhances it to create touch-friendly widgets, such as sliders, checkboxes and list views. It also adds click handlers to links, and submit handlers to forms, to enable jQuery Mobile's Ajax-based navigation system on these elements.

Usually this is what you want to happen. However, sometimes you might be creating your own custom widget, and you don't want jQuery Mobile to apply its own enhancements to your widget markup.

With previous versions of jQuery Mobile, you could use various tricks such as the page plugin's keepNative option, the initSelector property of individual plugins, and the data-role="none" attribute to disable enhancement for specific elements or element classes.

jQuery Mobile 1.1 adds a new level of flexibility, in the form of the data-enhance="false" attribute. By adding this attribute to a container element, you prevent jQuery Mobile from enhancing any of the markup inside the element, or attaching its own click or submit handlers to links or forms inside the element:


<div id="myContainer" data-enhance="false">
<!-- Enhancement and Ajax handling disabled for all elements inside this div -->
</div>

For this to work, you also need to set the global option $.mobile.ignoreContentEnabled to true inside a mobileinit event handler, like this:


$(document).bind( "mobileinit", function() {
  $.mobile.ignoreContentEnabled = true;
} );

Try this out by pressing the button below:

Turning off Ajax handling for whole containers

As mentioned above, jQuery Mobile automatically adds event handlers to links and forms to load target pages using its Ajax-based navigation system. Previous versions of jQuery Mobile let you disable Ajax handling for a specific link or form by adding the data-ajax="false" attribute to the a or form element.

In jQuery Mobile 1.1, you can now easily disable Ajax handling for all links and/or forms within a container element by adding data-ajax="false" to the container:


<div id="myContainer" data-ajax="false">
<!-- Ajax handling disabled for all elements inside this div -->
</div>

As with the data-enhance="false" attribute described in the previous section, you also need to set the global option $.mobile.ignoreContentEnabled to true inside a mobileinit event handler for data-ajax="false" to have any effect.

Try this out by pressing the button below. The demo page includes two containers, each with a link styled as a button. The first container's link uses jQuery Mobile's Ajax handling in the usual way. The second container has the data-ajax="false" attribute, so the link inside the container behaves as a standard, non-Ajax link:

The demo page works like this:

  • When you tap the first button, jQuery Mobile loads the target page, page2.html, using Ajax, and transitions to the page using the flip transition specified by the button's data-transition attribute.
  • The second button isn't Ajax-enhanced, so when you tap it, the browser loads page2.html in the usual way, bypassing jQuery Mobile's Ajax navigation system and transition effect.

Other changes

There are some other minor improvements in jQuery Mobile 1.1:

  • Cleaner default theme
    Various aspects of the default theme, such as padding, margins and colours, have been subtly tweaked to make everything look neater and cleaner.
  • Easy theme upgrading with ThemeRoller
    The ThemeRoller tool now supports jQuery Mobile 1.1, and makes it easy to convert your existing 1.0 themes to 1.1. Just click Import, paste in your 1.0 theme's CSS, make sure Upgrade to version: 1.1.0 is selected, then click the Import button in the dialog (see screenshot below).
  • Support for jQuery 1.7.1
    Like version 1.0, jQuery Mobile 1.1 supports jQuery 1.6.4. However, it also works with the latest and greatest version of jQuery, 1.7.1.
  • AMD module support
    jQuery Mobile 1.1 now uses RequireJs's Asynchronous Module Definition API to allow the various modules in jQuery Mobile to load as required.
  • Zoom fixes
    Mobile Safari on iOS contains an annoying bug related to user-zoomable pages (pages that don't have maximum-scale=1 included in their viewport meta tag): When rotating from portrait to landscape, the viewport zooms in too much, and you lose some of the page's right-hand content. Scott Jehl has come up with a cunning workaround for this, and it's included in jQuery Mobile 1.1 by default. The workaround also stops iOS zooming in when focusing input and select elements. If required, you can disable this feature by setting calling $.mobile.zoom.disable( true ).
  • Searchable documentation
    The jQuery Mobile team have added a useful search / sitemap feature to the docs, which makes it easy to find stuff. Naturally, the page uses a jQuery Mobile filterable list view to do the job! Search for any text, and the list view reveals the relevant sections.
Screenshot of jQuery Mobile ThemeRoller import dialog
jQuery Mobile's ThemeRoller now lets you upgrade your jQuery Mobile 1.0 themes to 1.1 quickly and easily.

What's coming up in 1.2

While 1.1 has been mainly about improving jQuery Mobile's current functionality, 1.2 will see the introduction of some new widgets and features. Here are some highlight features that are currently planned:

  • A popup component
    This allows you to turn any div into a popup by adding the attribute data-role="popup" to the div. You can create a button that opens the popup by linking to the popup's id and adding a data-rel="popup" attribute to the link. Popups are great for small dialogs, login boxes, simple menus, and lots more. Check out this popup demo page.
  • Fetch links
    By adding a data-target attribute to a link, you can tell jQuery Mobile to load the linked page's content (or partial content) into an existing container in the page, rather than doing a full transition to the linked page. This makes it really easy to create things like slideshows and "pull to refresh" widgets.
  • Download builder
    The jQuery Mobile team are also working on a download builder. This will allow you to choose exactly which jQuery Mobile functionality — widgets, transitions, and so on — you need for your app. The builder then serves you a custom jQuery Mobile build containing just the code you need, so you can keep your app's download times to a minimum.

Expect jQuery Mobile 1.2 to launch in a few months' time. You can find out more about jQuery Mobile's roadmap on their blog.

Summary

In this article you explored many of the new features and improvements that jQuery Mobile 1.1 brings. You learned about:

  • Fixed toolbar improvements, including genuine CSS position: fixed toolbars; a polyfill for the older fixed toolbar style; new toolbar options and methods; changes to fullscreen toolbars; and the deprecated touchOverflow feature.
  • Improvements to page transitions, including smoother, faster transitions; a change to the default transition; Firefox support; and two new transitions: turn and flow.
  • An enhanced loading spinner, with a new design and a range of options that let you customize the spinner's appearance.
  • The data-mini="true" attribute for creating miniature versions of form controls.
  • Better-looking flip toggle switches. The new switches have a cleaner, more compact look.
  • Improvements to range sliders, including full support for the step attribute and a new data-highlight attribute.
  • Preventing whole groups of elements from being enhanced by using the data-enhance="false" and data-ajax="false" attributes.
  • Various other improvements, including a cleaner theme; the ability to upgrade themes with ThemeRoller; jQuery 1.7.1 support; AMD module support; iOS zoom fixes when changing orientations; and new searchable online docs.
  • jQuery Mobile 1.2: What new features to expect in the upcoming 1.2 release.

I hope you enjoyed reading this article. You can download jQuery Mobile 1.1 now from the jQuery Mobile website, and start building some great mobile websites and apps. Happy coding!

Master Mobile Web Apps with jQuery Mobile

Find Out More!

Want to get the most from jQuery Mobile? Check out my detailed book, Master Mobile Web Apps with jQuery Mobile. It contains all the info you need to start building great-looking mobile web apps with ease!

You can learn more about the book over on the Elated Store. Have fun!

— Matt

Follow Elated

Related articles

Responses to this article

There are no responses yet.

Post a response

Want to add a comment, or ask a question about this article? Post a response.

To post responses you need to be a member. Not a member yet? Signing up is free, easy and only takes a minute. Sign up now.

Top of Page