Gajotres.net

What’s New in jQuery Mobile 1.4

Share this article
/whats_new_1.4
 
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.
 

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 a 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 don’t support this framework version so we will need to wait a little bit more. Other big change is theme inheritance. In a previous versions 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 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.
 
Example:
 
 
Click on a Result if you want to see new theme and widget changes, or find it here: http://jsfiddle.net/Gajotres/vds2U
 

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 a 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: http://jsfiddle.net/Gajotres/vds2U
 
I will add other examples as they become live and available. Currently this is early alpha and a lot of new stuff is not available.
 

General stuff


 
 
Finally we are promised deep linking like foo.com#bar, if this is what I think it is we are finally going to be able to use more then 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 (foo.com#bar). 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 publish 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 great framework and I hope 1.4 will be next great version in line.
 

Download

 
CDN-Hosted JavaScript:
 
 
CDN-Hosted CSS:
 
 
Copy-and-Paste Snippet for CDN-hosted files:
 
<link href="http://code.jquery.com/mobile/1.4.0-alpha.1/jquery.mobile-1.4.0-alpha.1.min.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.0-alpha.1/jquery.mobile-1.4.0-alpha.1.min.js"></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
 
 
 

2 COMMENTS ON THIS POST To “What’s New in jQuery Mobile 1.4”

  • xleoa

    November 4, 2013 at 11:21

    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

    February 18, 2014 at 22:26

    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

Leave a Reply


nine − = zero