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.
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.
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: http://jsfiddle.net/Gajotres/vds2U
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: http://jsfiddle.net/Gajotres/vds2U
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.
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 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 (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
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.
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" />
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