Finally after few months of speculation alpha version of jQuery Mobile 1.4 is finally available.
Let’s have a look at what’s been added and changed in this 1.4.0 version. Thankfully a lot have changed since version 1.3, not to mention that this version came out just several weeks after a third installment of a previous version.

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


Performance improvements

First and foremost this release was focused on performance improvements and widgets rewrites. If anyone of you ever worked with previous jQuery Mobile versions you could have noticed that this framework heavily depends on HTML DOM manipulation. This also resulted in heavy performance requirements that could have caused usability degradation on mobile devices. This new version is increasing performance through reduced DOM manipulation.
Button, as one of the keystones to jQuery Mobile widgets, have experienced the greatest changes. Generation of inner markup for elements styled as buttons has been completely removed. Developers have even reduced the amount of classes that are added by the framework.
At the same time theme handling has also experienced big changes. The number of swatches has been reduced from five to two; a light ‘A’ swatch and a dark ‘B’ swatch. Unfortunately, theme builder still doesn’t support this framework version so we will need to wait a little bit more. Another big change is theme inheritance. In a previous version, JavaScript was used to find the nearest parent element with a theme and added theme classes to all elements.
This has been replaced by a pure CSS solution where the level of specificity of the selector determines what theme (swatch) is applied. For example, if swatch ‘A’ is applied to a page div it will inherently work to inner elements like header, content and footer.
Icons have also seen a full overhaul. What we got are new vector-based SVG icons with a fallback to external PNG icons on browsers that don’t support inline SVG. It goes even more, to support different devices we will get additional stylesheets, each with different icon CSS.
Click on a Result if you want to see new theme and widget changes, or find it here:

Widget improvements

Almost every widget got a visual change or overhaul of some kind, unfortunately only few features are available at this moment and you can see them in an example below. Let me first name few of the changes:
  • New tab widget
  • New widget Toolbar – will handle header and footer bars, it should be scrollable horizontally
  • Support using widgets like toolbars, popups, panels outside of a page – Finally but still buggy, popups still don’t work outside
  • New flip switch widget – Much better then old one, no more flunky animations
  • New filterable widget – Still buggy
  • New option for taphold event $.special.event.tap.emitTapOnTaphold default = true;
  • All widgets (excluding listview, tables, and selectmenu) have options that can be set after the widget has been instantiated
  • All widgets (excluding listview, tables, and selectmenu) have an option named “enhanced” that allows you to provide the markup the widget itself would generate, thus saving startup time
Find this example here:
I will add other examples as they become live and available. Currently, this is an early alpha and a lot of new stuff is not available.

General stuff

Finally we are promised deep linking like, if, this is what I think it is we are finally going to be able to use more than one page in subsequent HTML pages. This change will at the same time bring anchors support in both inside a page (#bar) and across pages ( We will be able to update hash w/o manipulating history. This functionality was missed in version 1.3 and it was heavily in demand. If this three functionality ends up in a final version I will become a very happy man.

Removed and deprecated functionality

Some major widgets are removed or deprecated. Nested listview’s don’t exist any more, at the same time developers have promised another similar solution. Dialog page is deprecated from this version. This functionality should be merged with panel widget, currently this is just a proposal. Slider is also deprecated and it will get an overhaul in a next version, probably 1.5.
  • Listview: Removed nested listview feature
  • Dialog/Slider are deprecated.
  • Because of a button overhaul, inner button markup (.ui-btn-inner and .ui-btn-text) will not exist anymore
  • Because of a icon overhaul, listview’s will no longer have classes ui-li-has-arrow (list item) and ui-btn-icon-right (list button).
  • IE7 and BlackBerry 5 OS is no longer supported and they are going to be moved into C grade browser group.
  • Deprecated class ui-disabled. Use class ui-state-disabled instead.
  • Deprecated class ui-btn-corner-all. One corner class: ui-corner-all (corner radii for buttons have selector .ui-btn.ui-corner-all).
  • Deprecated data-role=”field-contain”. Just add class “ui-field-contain”
  • Icon shadow: Deprecated option iconshadow for buttons and select. You can use class ui-shadow-icon on a container or a button (same as ui-icon-alt and ui-icon-nodisc). Also work with listviews, controlgroups, checkbox/radio, etc. that didn’t have option iconshadow.
  • Deprecated input element generation for filter
  • Deprecated filterPlaceholder option for filterable

Final notes

If there’s something you would like to see but is missing in my examples just leave me a comment and I will create an example.

Editor note – 23.09.2013

Personally I would have waited few more weeks before publishing this alpha version. 2 months have passed since I wrote this article, at this point a lot of things are still missing or half way done. Demo page was not updated since I don’t know when. What’s the point in supporting and testing this alpha version if we must dig into the framework just to find how to even turn some announced functionality on.
I hope this will change soon. jQuery Mobile is a great framework and I hope 1.4 will be next great version in line.


CDN-Hosted JavaScript:
CDN-Hosted CSS:
Copy-and-Paste Snippet for CDN-hosted files:
<link href="" rel="stylesheet" />
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
Note: jQuery Mobile 1.4 also supports jQuery core 2.0.
ZIP File: If you want to host the files yourself you can download a zip of all the files:
Fork jQuery Mobile on GitHub

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.

  • xleoa

    Hi Dragan, good work! Keep it up! It would be nice also to have some hint about how to upgrade from JQM 1.3 to 1.4.

  • Juan Alpízar

    Maybe I missed it but I didn’t notice any change in transitions, however the transitions are not working in android 4.3. Do you know any workaround for this?

    I tried to remove the zooming lines in the jQuery mobile the same as people did in 1.3 but didn’t seem to work