Announcing jQuery Mobile 1.4.0 Alpha

Posted on by

The jQuery Mobile team is thrilled to announce the 1.4.0 Alpha release. For this release 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 flip switch widget, a generic filter widget named “filterable”, popups with arrows, tooltips for sliders and we integrated the tabs widget from jQuery UI.

Key changes | Download & CDN

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. We will update the ThemeRoller soon so you can create your own themes for 1.4.

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.

Please help us test

In the next few weeks we will work on updating the API documentation and the Demo Center, and creating an upgrade guide. While we work on it, this guide will be available as wiki page on the Github repo. Please help us by testing the Alpha version, giving us your feedback, and reporting issues.

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!

More than 1,500 commits, many issues fixed, countless improvements made. Here is jQuery Mobile 1.4 Alpha!

New features

  • Theming: The active and focus styles are now themeable
  • Links: Deprecated class ui-link. One style for links in body and bars (bar link colors were never themeable in ThemeRoller)
  • Controlgroup: Added option theme
  • Popup: New feature popup arrow
  • Slider: New feature slider tooltip
  • Touch events now have teardown methods
  • New option for taphold event $.special.event.tap.emitTapOnTaphold default = true;
  • New widget Toolbar: replaces page.sections (which is removed) and handles all header and footer bars
  • Fixed Toolbars are now an extension on the toolbar widget
  • Toolbars work outside of pages
  • True persistant Toolbars
  • Textinput: added option corners
  • Slider and Rangeslider: added option corners.
  • New set of vector-based icons from Glyphish with fallbacks via Grunticon
  • Base tag support https://github.com/jquery/jquery-mobile/issues/3978
  • New flip switch widget
  • New filterable widget
  • Integrated UI tabs widget
  • Popup work outside of pages
  • Panel work outside of pages
  • Option wrapperClass to add custom classes to a generated wrapper
  • 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
  • Table now also has a rebuild method that makes it possible to dynamically add columns

Changes

  • Theming: The theme swatch for pages does no longer default to “c” but “a”. Dialog overlays still default to “a”. The loader theme defaults to “a” instead of “e”. Headers and footers don’t have default “a” anymore but inherit the page theme. List dividers don’t default to “b” but inherit the list theme. Count bubbles in listviews don’t default to “c” anymore, but inherit from the LI/button/divider. Count bubbles in multiple selects always had theme “c” but now always inherit the theme from the button.
  • Button style: We now use the same padding and icon positioning rules for all elements that are styled as button and changed px values to em values.
  • Option mini: We don’t set specific padding values for ui-mini anymore, but only set a smaller font-size. Because we use em values now, the padding will still be adjusted. Instead of data-mini=”true” you can add class ui-mini to a container. Now it’s also very easy to use a media query to only apply the mini size at a certain screen width.
  • Icons: We use :after pseudo element for icons instead of adding a span with class ui-icon. The icon class (ui-icon-[iconname]) is added to the button.
  • data-add-back-btn now set on toolbar not page
  • Listview filter has been replaced by new generic filter widget (“filterable”)
  • Panel: Always scroll to top when opening a panel, unless it’s a fixed panel

Removal

  • No generating of inner button markup (.ui-btn-inner and .ui-btn-text) anymore. For linked listviews this means the anchor is now the button and no longer get class .ui-link-inherit.
  • Listviews: We no longer add the classes ui-li-has-arrow (list item) and ui-btn-icon-right (list button).
  • Button: Button elements are no longer wrapped in a div. Inputs type submit and reset used to get class ui-submit on the wrapper div. This has been changed to class ui-input-btn and also applies to input type button. The native input element no longer gets class ui-btn-hidden.
  • Form labels: Labels no longer get a class (they used to get the widget class).
  • Listview: Removed nested listview feature (deprecated in 1.3).
  • Dropped support for IE7 and BB5 (now C-grade)

Deprecation

  • Deprecated auto-enhancement of links in toolbars: https://github.com/jquery/jquery-mobile/issues/5933
  • 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).
  • Listviews thumbs and icons (small image left): The feature to auto-detect thumbs and icons has been deprecated to improve performance. If a list item (read-only) or button (linked) contains a thumb you have to add class ui-li-has-thumb to the LI. If it contains an icon you have to add ui-li-has-icon to the LI and don’t have to add class ui-li-icon to the image element anymore. Also, the framework doesn’t add class ui-li-thumb anymore in 1.4.
  • Theming inheritance: Deprecated getInheritedTheme(). Theme inheritance is done with CSS now.
  • 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.
  • The second pagebeforechange has been replaced with pagebeforetransition. Both will be triggered for compatibility
  • Deprecated current persistent fixed toolbars in favor of true persistent (outside page)
  • Deprecated current dialog widget. Dialog will become an option in the page widget.
  • Deprecated current slider widget. We are going to refactor or replace the slider widget in next version.
  • Deprecated input element generation for filter
  • Deprecated filterPlaceholder option for filterable
  • Deprecated current behaviour of stripping query strings from hashes. Starting in 1.5 we’ll be following spec on hashes and provide a hook to handle custom navigation.

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-alpha.1/jquery.mobile-1.4.0-alpha.1.min.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script 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

31 thoughts on “Announcing jQuery Mobile 1.4.0 Alpha

  1. Thijs on said:

    Thanks a lot. I’m curious about the performance benefits. What would be the preferred alternative for nested listviews?

  2. Jasper de Groot on said:

    I didn’t link to the Demo Center in the blog post because we didn’t have enough time to update the examples, demos and custom CSS and JS in there. So a lot of things are broken at the moment. It is included in the ZIP and you can find it here http://view.jquerymobile.com/1.4.0-alpha.1/dist/demos/ like already mentioned in the other comments.

  3. Mike on said:

    It would be nice to have an option to set the content to fill remaining viewport, minus the header and footer. There are a few css and javascript option around, but they take a moment to update the heigth when a new page is loaded into the DOM.

    If there was an option to set the content to fill the viewport and apply a data-id attribute and have it behave like a persistent footer/header, so it could fill the viewport but it wouldn’t need to take a moment to update then adjust the content height. Is this even possible?

  4. Changsuk on said:

    Great~! Your team eventually released 1.4 alpha.
    That release can help my team improve Tizen Web UIFW performance.
    Jasper, Gabriel, Alex and all of jQM members, Thanks a lot~!

  5. Костадин Дамянов on said:

    Why did you reduce the themes from three to two? The one that got removed before the release was quite good 🙂

  6. Graham Radetsky on said:

    Is there any chance we can get panels from the top of the page as well. It seems like we are limited to just the sides still?

  7. mithilesh on said:

    Is there any way to search a single or multy product by Query like when i type “%spa%” and its fetch Record from database and show record without refresh the page………..!

  8. bgyhnddr on said:

    what do you mean by True persistant Toolbars? i see no different between 1.3.1 and 1.4

  9. Gene Vayngrib on said:

    Jasper, is there any plan to create an infinite listview in 1.4, with a sliding window for DOM that is visible or soon-to-be-visible? This could also be used in changePage. This widget is really non-trivial and seems to be essential for a lot of apps.

    I mean techniques that LinkedIn implemented (see http://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5 ), e.g. removing all DOM elements outside the sliding window, splitting sliding window into sections, with different optimization techniques per section. Sencha used some other clever techniques developed for their Fastbook demo, e.g. keeping long lists in separate iframes and carefully scheduling DOM read/write operations with two queues (see http://www.sencha.com/blog/the-making-of-fastbook-an-html5-love-story )

    If this is not planned, may be you know of third-party plugins/widgets that can be us or components ed for that. And before you mention inifinity.js by Airbnb, it is promising, but is not yet up to the task and its developers are not responsive enough IMHO for us to rely on that component.

    Thanks,
    Gene

  10. mista335@gmail.com on said:

    Persistent footers still just jump up when you scroll past. Headers scroll down when you scroll back up. Scrolling is still clunky.

    You can always tell a JQM site or app when you use a page with fixed headers.

    Appmobi and Sencha produce rock solid headers, footers and scrolling.

    This is a fundamental navigation method for mobile devices.

    I think it’s time there’s a major fundamental rethink on how fixed headers & footers are achieved.

  11. Ivan Demin on said:

    Hello, i miss pagination feature. Will it be in the future be implemented? Or how it possible to handle a realy large List of Items?

  12. Swipe actions are much more responsive, however I’ve noticed that after performing vertical swipes it no longer responds to the vertical swipes (can’t move up or down).

  13. Tyler Weldon on said:

    how do you set up a panel outside of the page? will i be able to use one panel for the entire app?

    • christianoliff ☺ on said:

      It’s an alpha version remember, it will get better. Be sure to check out Alpha 2 which is available now.

  14. Palle Simonsen on said:

    All in all a very good direction for the new release and a remarkable feat since the first release! Performance, headers, more performance and phonegap’ability is the top of my list 🙂

    Could you please, please make it backwards compatible with the old default-layout? The new layout simply looks a little too much like the existing JQM running on IE.

  15. Is it just me or is anyone else incredibly sick of the “flat” design style?

    Oh well. Still love jQuery!

  16. bach dang on said:

    Hello,
    I recently converted my 1.32 version mobile web app to the 1.4 beta version and ran into a number of issues. In nook tablet, radio buttons in horizontal group have their labels ellipsed (look fine in desktop and windows phone). I use javascript scrollIntoView function in previous version and it worked fine, but in the new version, it did not behave correctly (never work the first time). Overall, I have concern about the testing of this new version

  17. Matthew Pitts on said:

    Couple of issues:

    1. Icons in submit buttons are cut off in this release (see the submit button examples).
    2. Do you have an ETA on when the themeroller will be updated for this release?

  18. Dan Fanelli on said:

    Will image-sprites be supported as they are in 1.3 jqm? my app uses an image sprite with a few hundred icons, and it doesn’t seem to work in 1.4??? thanks!!!! the layout looks great btw…