jQuery Mobile 1.4.0 Released

Posted on by

We are happy to announce the first stable release of jQuery Mobile 1.4. For this new version we focused on performance improvements and reviewing widgets. We also introduced a new default theme and SVG icons. Some of the new features that come with this release are a flipswitch widget, a generic filter widget named “filterable”, popups with arrows, tooltips for sliders and we integrated the tabs widget from jQuery UI.

Performance

To improve performance we reduced DOM manipulation. Generation of inner markup for elements styled as butons has been completely removed. In many cases the framework just adds classes to the native element during enhancement and we even reduced the amount of classes that are added by the framework.

Theme inheritance

One of the biggest changes is the way theme inheritance works. In previous versions we used JavaScript 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. In almost all cases the default for option theme has been removed and widgets get the same theme as their container or page via CSS.

New default theme

This was also a good time to switch to a new default theme with a flat, more modern, design. The number of swatches has been reduced from five to two; a light “A” swatch and a dark “B” swatch.

SVG icons

Not only the theme is new. A big thank you to Glyphish for creating a complete new icon set for jQuery Mobile! These are vector-based SVG icons, but we included a fallback to external PNG icons on browsers that don’t support inline SVG. We are also going to provide additional stylesheets, each with different icon CSS (inline SVG, data-uri PNG, and external PNG) that can be used with the full Grunticon solution.

Demos

The style and structure of the demos have been changed. The demos are no longer divided in sections, but all content is grouped by component. All demos are now directly accessible via the new, responsive, navigation menu.

New website

We did not only release a new version of the framework, but also launched our new website! The jQuery Mobile site now uses the same WordPress parent theme as the other jQuery projects.

Thanks

We want to say thanks to everyone who contributed. Thank you Sven Franck for all your hard work on the new filterable widget and the table widget!

Download

CDN-Hosted JavaScript:

CDN-Hosted CSS:

Copy-and-Paste Snippet for CDN-hosted files:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>

ZIP File:

If you want to host the files yourself you can download a zip of all the files.

Download Builder:

Git

Supported jQuery versions

jQuery Mobile 1.4 supports jQuery core 1.8 and newer.

Graded Browser Support

See the jQuery Mobile 1.4 Supported Platforms page for the Graded Browser Support of this version.

Changelog

All changes are listed in the 1.4.0 changelog. If you are upgrading from jQuery Mobile 1.3 you can use the 1.4 upgrade guide.

Comments

Please do not use the comments section of this blog post to report bugs or ask for support. See our Contributing Guidelines for instructions about reporting issues. Use the forum for support questions. Thank you!

  • Nathan Gerber

    The theme roller does not seem to allow me to choose a black iconset. This was attempted utilizing Chrome and there weren’t any errors in the JavaScript console.

    • http://www.thinkingabout.it/ Gabriele Giannotti

      Yes. Got same problem.

      • surajkala

        The number of swatches has been reduced from five to two; a light “A” swatch and a dark “B” swatch. .. so incase if u used theme C D or E.. happy editing

  • http://elmapps.com/ Anthony

    Great stuff!

  • Dattatray Walunj

    Great stuff! there is typo “butons” . search and fix it.

  • rgfpy

    muy buen trabajo! Pero lastima que ahora se tenga que escribir mas codigos para generar el contenido :(

  • http://romero.me/ Jose Romero

    Thanks jQuery Mobile team; you guys are a true example of dedication and perseverance.
    Your improvements in UX and design makes this framework to be THE one for responsive development.