jQuery Mobile 1.4: Cleaner, Faster and More Powerful

jQuery Mobile is a great JavaScript framework that’s designed to help you build mobile web apps and mobile-friendly websites quickly and easily. The latest version, 1.4, came out last month, and it represents a big step forward for the framework.

In this article you’ll get an overview of the changes and improvements in 1.4, and learn how to apply some of these techniques to your own websites and web apps. You’ll look at:

• The performance improvements in 1.4 that result in a smoother, faster experience for users
• The new, simpler theming system
• The new default theme and simplified swatches
• 1.4’s brand-new SVG-based icon set
• The new flipswitch widget for smoother, more flexible flip switches
• The filterable widget that lets you filter anything from listviews to tables and paragraphs of text
• A new tabs widget for separating your page content into tabbed sections, and
• A brief summary of the API changes and deprecations that are new to 1.4.

Let’s start with a quick look at how the jQuery Mobile team has improved performance in 1.4.

Faster and more lightweight

One of the main goals of the 1.4 release has been to improve the framework’s performance. To this end, jQuery Mobile now adds a lot less markup when it enhances widgets in the page. Instead, it uses CSS a lot more, and simply adds CSS classes to native HTML elements to make them mobile-friendly.

For example, in jQuery Mobile 1.3.1, the markup for a link styled as a touch-friendly button looked something like this:

<a href="view-recipe.html" data-role="button" data-corners="true"
data-shadow="true" data-iconshadow="true" data-wrapperels="span"
data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c">
<span class="ui-btn-inner"><span class="ui-btn-text">View
Recipe</span></span></a>

In jQuery Mobile 1.4, the markup is a lot simpler:

<a href="view-recipe.html" data-role="button"
class="ui-link ui-btn ui-shadow ui-corner-all" role="button">
View Recipe</a>

Simpler theme inheritance

In jQuery Mobile, most widgets can have a swatch associated with them to give them a colour scheme. A child element often inherits the swatch of its parent.

Previous versions of the framework used JavaScript to search through the page’s DOM to find an element’s parent so that it could apply the inherited swatch to the element. This process slowed down page rendering and was not always that intuitive to work with and debug.

As of 1.4, this has all been replaced by pure CSS; in most cases, elements simply inherit their parent’s swatch (or the page’s swatch) using standard CSS inheritance. This removes the need for costly JavaScript DOM traversal, and also makes it easier to style your page elements using CSS.

A new default theme and simplified swatches

The default jQuery Mobile theme has been reworked to be more in line with current design trends, sporting a flatter look with fewer gradients and squarer corners on elements:

In addition, the number of swatches has been reduced from five down to just two:

You can see these two swatches in the screenshots below. Each swatch coordinates the colors of the bars, body content and buttons to provide a consistent look.

In previous versions of jQuery Mobile, most elements used the c swatch by default. Now, in 1.4, most elements default to using the a swatch.

You can use the updated ThemeRoller tool to create your themes, as well as upgrade older themes so that they are compatible with jQuery Mobile 1.4.

New SVG icons

The default set of PNG button icons has been replaced with a new set of lovely resolution-independent SVG icons created by Glyphish:

There’s also a PNG fallback icon set for browsers that don’t yet support the SVG format.

Since SVG is vector-based and resolution-independent, the same icon set looks great on both HD (“Retina”) and non-HD displays. It’s also easy to create your own SVG icon set using any vector illustration app, such as Illustrator, Sketch or iDraw.

A new flipswitch widget

In previous versions of jQuery Mobile, you created a flip switch using a select element with the data-role="slider" attribute. As of 1.4, this approach has been deprecated for performance reasons, and a new flipswitch widget plugin is available instead. You can use flipswitch to create a flip switch from either a checkbox or a select element.

When creating a flip switch from a checkbox, you can use the data-on-text and data-off-text attributes to set the text that appears for the switch’s “on” and “off” states.

Here are some examples using the new flipswitch widget — I’ve highlighted the important attributes that control the flip switch behaviour in bold:

<h2>Flip Switch Using a Checkbox</h2>

<div class="ui-field-contain">
  <label for="turboMode-checkbox">Turbo Mode:</label>
  <input type="checkbox" data-role="flipswitch" name="turboMode-checkbox" id="turboMode-checkbox" value="yes">
</div>


<h3>Changing the On and Off Text</h3>

<div class="ui-field-contain">
  <label for="turboMode-checkbox">Turbo Mode:</label>
  <input type="checkbox" data-role="flipswitch" name="turboMode-checkbox" id="turboMode-checkbox" value="yes" data-on-text="Yes" data-off-text="No">
</div>


<h2>Flip Switch Using a <code>select</code> Element</h2>

<div class="ui-field-contain">
  <label for="turboMode-select">Turbo Mode:</label>
  <select data-role="flipswitch" name="turboMode-select" id="turboMode-select">
    <option value="off">Off</option>
    <option value="on" selected>On</option>
  </select> 
</div>

Read more about the flipswitch widget in the API documentation.

A new filterable widget

In previous jQuery Mobile versions you added data-filter="true" to a listview to make the listview filterable: the listview widget included an auto-generated text box above the list that the user could type text into to narrow down the items in the list.

In 1.4, this filtering function has been moved out of the listview widget and wrapped in a new filterable widget. It works in a similar way to before, but the main advantage is that you can apply the filterable widget to almost any kind of element, not just listviews. For example, you can now filter:

• Tables
• Controlgroups
• select menus
• …or even a plain div containing p child elements.

As long as the element contains a list of child elements, you can filter it with the filterable widget.

You add this widget to an element as follows:

1. Add the attribute data-filter="true" to the element you want to filter.
2. Create an <input type="search"> element, just before the element you want to filter. Give the input an id, such as filter-input. For best results, wrap the input in a form element with the ui-filterable CSS class.
3. Add the attribute data-input to the element you want to filter. Its value should be a CSS selector that selects the search input you created in Step 2 – in this case, data-input="#filter-input".

For example, here’s how to add a filter box to a listview using the new filterable widget:

<form class="ui-filterable">
  <input type="search" id="filter-input">
</form>

<ul data-role="listview" data-inset="true" data-filter="true" data-input="#filter-input">
  <li><a href="#">Ruby Red</a></li>
  <li><a href="#">Plush Purple</a></li>
  <li><a href="#">Cool Cream</a></li>
  <li><a href="#">Lovely Lilac</a></li>
  <li><a href="#">Bold Black</a></li>
  <li><a href="#">Glorious Green</a></li>
  <li><a href="#">Passionate Pink</a></li>
  <li><a href="#">Majestic Mauve</a></li>
  <li><a href="#">Wistful White</a></li>
  <li><a href="#">Outstanding Orange</a></li>
  <li><a href="#">Titillating Turquoise</a></li>
  <li><a href="#">Inspiring Indigo</a></li>
</ul>

You can discover all of the filterable widget’s options and methods in the API documentation.

A new <code>tabs widget</code>

As of version 1.4, jQuery Mobile includes a handy tabs widget, borrowed from the jQuery UI library. Tabs are typically displayed horizontally across the page, and each tab has an associated content panel, which the user can view by tapping the tab. Only one content panel is shown at a time.

You can use many different types of element for the tab buttons – including navbars, buttons and listviews – as long as you create the tab elements as list items within a list. You can also easily pull a tab’s content remotely from the server via Ajax.

To create a set of tabs, follow these steps:

1. Create a container for the tab buttons and content panels.
   Add a div to your page to hold both the list of tabs and the associated content panels, and give the div a data-role="tabs" attribute.
2. Add the content panels.
   Add a series of div elements inside your data-role="tabs" container, one div per content panel. Give each content panel a unique id attribute – for example, myPanel.
3. Add the list of tabs.
   Also inside your data-role="tabs" container, just above the content panels, add the tabs as list items within an unordered list. Within each item, add a link that points to its corresponding content panel. For example, if a content panel has an id of myPanel, you’d add the tab as follows:

   
   <li><a href="#myPanel">My Tab Name</a></li>
   

4. Wrap the tabs list in a widget.
   In order to make the tabs look like tabs — rather than just a list of links — you usually want to wrap the list in an appropriate jQuery Mobile widget, such as a navbar.

To load a tab’s content via Ajax, simply link to the server-side URL that serves the tab content, and omit the corresponding content panel for that tab.

Here’s a simple example that shows how to create tabs with the tabs widget — notice that the third tab loads its content via Ajax from the URL pricing.html:

<div data-role="tabs" id="myTabs">

  <div data-role="navbar">
    <ul>
      <li><a href="#details">Details</a></li>
      <li><a href="#specs">Specs</a></li>
      <li><a href="pricing.html">Pricing</a></li>
    </ul>
  </div>
  
  <div id="details">
    <h3>Details</h3>
    <p>This top-of-the-range widget is available in 76 different colors. It comes with a leather carry case and a large cup holder.</p>
  </div>
  
  <div id="specs">
    <h3>Specs</h3>
    <dl>
      <dt>Width:</dt><dd>600mm</dd>
      <dt>Height:</dt><dd>300mm</dd>
      <dt>Depth:</dt><dd>20mm</dd>
      <dt>Weight:</dt><dd>4.65kg</dd>
    </dl>
  </div>
  
</div>

Read more about the tabs widget in the jQuery UI documentation.

Lots of API changes and deprecations

With version 1.4, the jQuery Mobile team went back to the drawing board for many areas of the jQuery Mobile API. This has resulted in a cleaner, faster and more flexible framework, but it does mean that you’ll probably need to make a few changes to your apps to work with the new API and CSS classes.

Here’s a list of some of the major changes and deprecated features in the 1.4 API compared to 1.3:

• Toolbars (header and footer bars, as well as persistent toolbars) are now handled by a new dedicated toolbar widget, instead of the page widget.
• The dialog plugin is deprecated; dialogs are now handled by the page plugin. This also means that you should no longer create a dialog by adding data-rel="dialog" to a link, or by using the data-role="dialog" attribute. Instead, simply add data-dialog="true" to the data-role="page" container that you want to style as a dialog.
• The pageContainer object is now a fully-fledged widget to better handle page content and support multiple containers per page (for example, in tablet apps with split views).
• The $.mobile.activePage property is deprecated; use $.mobile.pagecontainer.getActivePage() instead.
• The table-stroke and table-stripe CSS classes for tables are deprecated. Create your own CSS classes to style tables.
• The minScrollBack option is deprecated. Now, when you press the Back button, jQuery Mobile always scrolls the page to its previously-viewed position, much like native browser pages.
• data-role="collapsible-set" is deprecated. Use data-role="collapsibleset" instead.
• The changePage() and loadPage() methods are deprecated. Call $.mobile.pageContainer.pagecontainer("change", ... ) and $.mobile.pageContainer.pagecontainer("load", ... ) instead.
• Auto-detection of thumbnails and icons inside listviews is deprecated. Instead, you should manually add the ui-li-has-thumb or ui-li-has-icon class to a list item’s li element.
• The data-role="fieldcontain" attribute has been deprecated. Instead, add the ui-field-contain class to the field’s wrapper div.
• The feature that automatically styles plain links inside toolbars as buttons still works, but it is deprecated. Instead, you should manually add data-role="button" to links inside your header and footer bars.

For a full list of changes and deprecations, see the jQuery Mobile 1.4 changelog.

Summary

With the release of version 1.4, the jQuery Mobile team has made the framework faster, more lightweight and more powerful. In this article you’ve explored many of these improvements, including:

• Faster widget creation with a lot less markup added to the page.
• Simpler theme inheritance that uses a pure CSS solution.
• A new, more modern default theme with just two default swatches for easier theming.
• A new set of SVG icons that work well across all displays.
• The new flipswitch widget that lets you create smooth flip switches using both checkboxes and select elements.
• A new filterable widget that replaces the listview filtering function, and that can be applied to a wide range of elements.
• A tabs widget that lets you easily add tabbed content to your page, as well as pull tab content from the server via Ajax.
• Some of the major API changes and deprecated features that 1.4 ushers in.

If you haven’t yet done so, I recommend heading over to the jQuery Mobile site, downloading 1.4, and taking it for a spin. Enjoy!

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 you need to start building great-looking mobile web apps!

The Fourth Edition is due out in February 2014 and covers jQuery Mobile 1.4. Buy the Third Edition today and you’ll get the Fourth Edition absolutely free!

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

— Matt