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
flipswitchwidget for smoother, more flexible flip switches
filterablewidget that lets you filter anything from listviews to tables and paragraphs of text
- A new
tabswidget 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.
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:
||Black text on a mid grey background for bars
Black text on a lighter grey background for buttons
White text on a mid blue background for active buttons
Mid blue text for links
Black text on a very light grey background for everything else
||White text on a very dark grey background for bars
White text on a charcoal background for buttons
White text on a sky blue background for active buttons
Sky blue text for links
White text on a dark grey background for everything else
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
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
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.
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
When creating a flip switch from a checkbox, you can use the
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>
flipswitchwidget. The top two switches are created using checkboxes, while the bottom switch uses a
Read more about the
flipswitch widget in the API documentation.
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:
- …or even a plain
As long as the element contains a list of child elements, you can filter it with the
You add this widget to an element as follows:
- Add the attribute
data-filter="true"to the element you want to filter.
- 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
formelement with the
- Add the attribute
data-inputto 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,
For example, here’s how to add a filter box to a listview using the new
<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>
filterablewidget lets your users filter listviews, tables, and more by typing text into a search field.
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:
- Create a container for the tab buttons and content panels.
divto your page to hold both the list of tabs and the associated content panels, and give the
- Add the content panels.
Add a series of
divelements inside your
divper content panel. Give each content panel a unique
idattribute – for example,
- 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
myPanel, you’d add the tab as follows:
<li><a href="#myPanel">My Tab Name</a></li>
- 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
<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>
tabswidget in jQuery Mobile 1.4 lets you separate your page content into tabs for easy access.
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
toolbarwidget, instead of the page widget.
dialogplugin is deprecated; dialogs are now handled by the
pageplugin. 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-role="page"container that you want to style as a dialog.
pageContainerobject 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).
$.mobile.activePageproperty is deprecated; use
table-stripeCSS classes for tables are deprecated. Create your own CSS classes to style tables.
minScrollBackoption 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
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-iconclass to a list item’s
data-role="fieldcontain"attribute has been deprecated. Instead, add the
ui-field-containclass to the field’s wrapper
- 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.
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
flipswitchwidget that lets you create smooth flip switches using both checkboxes and
- A new
filterablewidget that replaces the listview filtering function, and that can be applied to a wide range of elements.
tabswidget 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!