What’s New in jQuery Mobile 1.2.0?

A highly anticipated new version of jQuery Mobile was recently released. Let’s have a look at what’s been added and changed in this 1.2.0 version. Throughout the code samples, you’ll learn also how to handle these new features and harness them to improve your mobile apps.

jQuery Mobile is a lightweight, useful, and easy-to-learn mobile framework defined by a unified user interface system that works across all popular mobile device platforms. I must admit that as soon as I started to study and use it, I fell in love. I’ll focus on the new features of the latest version, but in case you don’t know what jQuery Mobile is or if you need a starting point, I advise you to read Hello jQuery Mobile and Building a Staff Directory on jQuery Mobile.

Keep in mind that the newest version also solves a lot of bugs from the previous one. If you need a complete list of the changes, refer to the official change log for 1.2.0. Please note that I’ll use the term “virtual page” to emphasize the difference between a jQuery Mobile page and a physical page — a file like index.html or page.php.

Compatibilities

The first thing to highlight is that jQuery Mobile 1.2.0 increased device compatibility. Actually, most of these operating systems or browsers already worked with the version 1.1, but jQuery Mobile now has an unrivaled “‘A’ grade” compatibility. “A” grade means full, enhanced experience with Ajax-based animated page transitions. If you need more information about what those grades are, you can read Mobile Graded Browser Support.
The complete list of fully compatible mobile operating systems includes: iOS 6, Android 4.1, Tizen, Firefox for Android, and Kindle Fire HD. Now, you’re probably puzzled by Tizen. It’s an open-source operating system created by the Linux Foundation. To be more accurate, I’ll to cite their “About” page:

Tizen is an open source, standards-based software platform supported by leading mobile operators, device manufacturers, and silicon suppliers for multiple device categories, including smartphones, tablets, netbooks, in-vehicle infotainment devices, smart TVs, and more. Tizen offers an innovative operating system, applications, and a user experience that consumers can take from device to device.

As you may know, jQuery Mobile relies on the jQuery library. The new version of jQuery Mobile added the support for the latest jQuery version, the 1.8 branch and — on the other end of software modernization — the jQuery team dropped the support for the 1.6 branch. However, if you still use that old version, your code should work as before, but be aware that if bugs are found that affect just this older 1.6 version, they won’t be fixed.

Popups

Popups are one of the new features introduced in the latest version of jQuery Mobile. They allow you to put any content like menus, widgets, or images inside a container that floats above the current page. It’s very easy to create one. In fact, all you have to do is to follow the structure of a classic jQuery Mobile virtual page and replace the data-role="page" with data-role="popup". To call a popup widget, just like a dialog, you have to place a link pointing to the ID of the popup and add data-rel="popup". The following is an example of how to call a popup.

<a href="#helloPopup" data-rel="popup">Basic Popup</a>

And this is how it resembles a basic popup.

<div data-role="popup" id="helloPopup">
  <header data-role="header">
    <h1>Popup</h1>
  </header>
  <div data-role="content">
    <p>Hello! I'm a brand new popup widget.</p>
    <a href="#" title="Go back" data-role="button" data-rel="back">Close</a>
  </div>
</div>

Like almost every other feature, the popup widget has a lot of useful options like theme to set the color scheme for the popup contents, corners to determine if the popup has rounded corners, and probably the most interesting, positionTo, which allows you to determine where to render the popup. The possible values are:

• origin, the default, which means centered based on the element that called the popup; 
• window, centered in the current window;
• a jQuery selector, centered among the given element.

One of the main differences between popups and dialogs is that while a dialog must be an external page and a physical file, a popup is placed in the same file and within the same virtual page that will call it.

I must admit that this dialog constraint made me waste a lot of time when I started with jQuery Mobile. In fact, at that time I wasn’t using the popup widget, and I felt that having a physical file was a waste of disk space. Citing the documentation:

Any page can be presented as a modal dialog by adding the data-rel=”dialog” attribute to the page anchor link.

Although the documentation examples always show a link to a physical file, they don’t specify that it must be a physical file. However, thanks to the new popup widget, you’ll never have to build additional external files or run in this issue again.

Lists

In this new jQuery Mobile version, lists are rendered, altered, and manipulated much more easily. Let’s take a closer look.

Listview Autodividers

The jQuery Mobile team has introduced a new list attribute that will absolutely thrill you. The attribute is data-autodividers, and it greatly improves the readability of your lists by adding alphabetical list dividers. The great news is that this attribute can work together with the data-filter to further improve your apps. So, if you employ both techniques on your list and a user types a string into the input box to filter data, the dividers will change accordingly. Of course, they still remain independent from each other. To start using this new attribute, your list view should resemble to the following.

<ul data-role="listview" data-autodividers="true" data-filter="true">
  <li><a href="#">Audero.it</a></li>
  <li><a href="#">Aurelio De Rosa</a></li>
  <li><a href="#">BuildMobile.com</a></li>
</ul>

To see in action a full example, please refer to the its demo page on the jQuery Mobile website.

Collapsible Lists

From this release onward, you’ll have collapsible lists at your disposal. Lists within lists are displayed when the parent list is tapped. Being lists, you can use all of the attributes that you already know such as data-inset, data-filter, and the previous-explained data-autodividers. You’ll now be able to show a single collapsible element or create an accordion. In case you aren’t familiar with accordions, they are sets of collapsible elements that you can create by wrapping several collapsed elements with a tag having attribute data-role="collapsible-set".

Read-only Lists

In jQuery Mobile, lists are very easy to read due to the readability enhancement made by the framework. Although they’re mainly used to list links, lists are also used to display read-only list items. In this 1.2.0 version, an aesthetic style modification now renders read-only list items using a flat background color to give the user a visual understanding that they aren’t clickable. You can see an example of this change by looking at the read-only list demo.

Deprecated Methods and Properties of the Page Loading Widget

In this version, several methods and properties of the page loading widget have been deprecated. In jQuery Mobile, you used to configure it using $.mobile properties like loadingMessage, loadingMessageTextVisible, and loadingMessageTheme. Now, they should be set using properties text, textVisible, and theme of the $.mobile.loader.prototype.options object respectively. So, the following configuration:

$.mobile.loadingMessage = "Please wait...";
$.mobile.loadingMessageTextVisible = true;
$.mobile.loadingMessageTheme = "e";

should be changed in this way:

$.mobile.loader.prototype.options.text = "Please wait...";
$.mobile.loader.prototype.options.textVisible = true;
$.mobile.loader.prototype.options.theme = "e";

Other changes have been implemented within the methods to show or hide the page loading widget. In fact, before the 1.2.0 version, developers used the $.mobile.showPageLoadingMsg() and the $.mobile.hidePageLoadingMsg() methods. They are now deprecated, so you should use $.mobile.loading("show") and $.mobile.loading("hide") instead if at all possible. Please note that using this new method, you also gain the option to overwrite the global configuration in favor of one specified passing a configuration object when you call those methods. An example of a call to show the widget using a local configuration is below.

// Show the widget using theme swatch "e",
// a custom message and setting the text visible
$.mobile.loading(
   "show",
  {
    theme: "e",
    text: "foo",
    textVisible: true
  }
);

Conclusion

Throughout this article, you’ve seen the new version’s features created by the jQuery Mobile team, including popups, minor list style improvements, and several deprecated methods and properties. Thanks to the expanded device compatibilities, you can spread even more your own applications among a greater array of operating systems and markets.