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:
![The new default theme in jQuery Mobile 1.4](https://www.elated.com/res/Image/articles/development/javascript/jquery/jquery-mobile-1-4-cleaner-faster-more-powerful/default-theme.png)
In addition, the number of swatches has been reduced from five down to just two:
Swatch | Description |
---|---|
a |
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 |
b |
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.
![Default swatches in jQuery Mobile 1.4](https://www.elated.com/res/Image/articles/development/javascript/jquery/jquery-mobile-1-4-cleaner-faster-more-powerful/default-swatches.png)
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:
![The flipswitch widget in action](https://www.elated.com/res/Image/articles/development/javascript/jquery/jquery-mobile-1-4-cleaner-faster-more-powerful/icons.png)
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>
![The flipswitch widget in action](https://www.elated.com/res/Image/articles/development/javascript/jquery/jquery-mobile-1-4-cleaner-faster-more-powerful/flipswitch.png)
flipswitch
widget. The top two switches are created using checkboxes, while the bottom switch uses a select
element.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
containingp
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:
- 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 anid
, such asfilter-input
. For best results, wrap the input in aform
element with theui-filterable
CSS class. - 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>
![The filterable widget in action](https://www.elated.com/res/Image/articles/development/javascript/jquery/jquery-mobile-1-4-cleaner-faster-more-powerful/filterable.png)
filterable
widget 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.
Add adiv
to your page to hold both the list of tabs and the associated content panels, and give thediv
adata-role="tabs"
attribute. - Add the content panels.
Add a series ofdiv
elements inside yourdata-role="tabs"
container, onediv
per content panel. Give each content panel a uniqueid
attribute – for example,myPanel
. - Add the list of tabs.
Also inside yourdata-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 anid
ofmyPanel
, 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 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>
![The tabs widget in action](https://www.elated.com/res/Image/articles/development/javascript/jquery/jquery-mobile-1-4-cleaner-faster-more-powerful/tabs.png)
tabs
widget 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
toolbar
widget, instead of the page widget. - The
dialog
plugin is deprecated; dialogs are now handled by thepage
plugin. This also means that you should no longer create a dialog by addingdata-rel="dialog"
to a link, or by using thedata-role="dialog"
attribute. Instead, simply adddata-dialog="true"
to thedata-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
andtable-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. Usedata-role="collapsibleset"
instead.- The
changePage()
andloadPage()
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
orui-li-has-icon
class to a list item’sli
element. - The
data-role="fieldcontain"
attribute has been deprecated. Instead, add theui-field-contain
class to the field’s wrapperdiv
. - 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 andselect
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!
Really nice. I enjoyed very much with your article. And please keep update like this
Link drop spam removed
[Edited by chrishirst on 10-May-16 07:13]
I don’t understand,
If I browse JQM’s demo versions 1.4.5, 1.3.1 and 1.2.1 from my smartphone , the 1.2.1 seems to offer the best performance (check sliders)
[Edited by viliomo on 05-Jul-16 06:46]