Announcing jQuery Mobile 1.4.0 Beta

Posted on by

The jQuery Mobile team is thrilled to announce the 1.4.0 Beta release. First of all, we would like to thank everyone for testing the alpha releases. For this new version of the jQuery Mobile framework we focused on performance improvements, reviewing widgets as well as 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.

Demos | Key changes | Download & CDN

Performance

To improve performance we reduced DOM manipulation as much as possible. Generation of inner markup for elements styled as buttons 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 be finishing updating the API documentation, demos, ThemeRoller, and create an upgrade guide. What we would love you to do is to please help us by testing the Beta version and reporting issues.

Thank You

We want to say thanks to everyone who contributed. A special thank you to Sven Franck for all the hard work on the new filterable and table widgets!

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

New features

Alpha 1:

  • 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
  • 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

Alpha 2:

  • Autoinit: Now any widget included in a jquery mobile site will get automatic init by using data-role=”widgetname”
  • $.fn.enhanceWithin() to enhance all content within the selected element
  • Textinput: Option inset was introduced in 1.4.0 Alpha 1 to style the filterable input when used in combination with a listview. This option has been removed. Class ui-filterable is used to adjust the style.
  • Added dialog extension for page which simply styles a page as a dialog to replace deprecated dialog widget.

Beta 1:

  • Setting data-defaults=”true” will skip checking of data-attributes for widget options

Changes

Alpha 1:

  • 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

Alpha 2:

  • Count bubbles in listviews and the custom selectmenu button now use body theme.
  • Collapsible: content theme is inherited from container by default and can be set to false to have no theme.

Beta 1:

  • Classes “ui-icon-nodisc” and “ui-icon-alt” have been renamed to ui-nodisc-icon and ui-alt-icon, because using the same naming structure as for icon classes (ui-icon-search, ui-icon-delete, etc.) was causing conflicts.
  • Default for panel option theme is now null (inherit) instead of “a”.
  • Widgets outside pages inherited the theme from the overlay but we reverted this change because of conflicts during transitions. You have to set a theme for widgets outside a page.
  • Renamed content widget to pagecontainer widget

Removal

Alpha 1:

  • 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)

Alpha 2:

  • Listviews: List buttons with icons get the ui-btn-icon-right class again.

Deprecation

Alpha 1:

  • Deprecated auto-enhancement of links in toolbars.
  • 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.

Alpha 2:

  • Deprecated reading DOM parameters from buttonMarkup. If you call buttonMarkup, pass buttonMarkup-related options into the function via its options parameter, not via the element that needs to be enhanced.
  • Deprecated calling create to enhance a container or widget $.fn.enhanceWithin() will now be the method to enhance containers
  • Deprecated setContainerBackground and removeContainerBakcground instead set option on content widget
  • Deprecated $.mobile.pageContainer with new content widget there can be more then one page container
  • Deprecated $.mobile.changePage
  • Deprecated $.mobile.loadPage
  • Deprecated degradeInputs option on page will now be global $.mobile.degradeInputs
  • Deprecated keepNativeSelector on page widget and keepNative option on page widget will be replace by $.mobile.keepNative which will just be a string selector
  • Deprecated $.mobile.subPageUrlKey was only used by nested listview which is deprecated
  • Deprecated $.mobile.* for any class options most of these will be removed remaining ones will move to something like $.mobile.classes which will be an object
  • Deprecated $.mobile.minScrollBack any amount of scrolling will be preserved to match native behavior changing default to 0 until 1.5 when it will be removed
  • Deprecated adding aria role and classes to content and use of data-role=content you can add class .ui-content and theme and aria your self
  • Deprecated the application of class ui-link to anchors. The CSS now selects anchors directly.
  • Deprecated class ui-li-has-icon (you can override height/width rules to match your image size). We provide class ui-li-thumb to position elements other than img.
  • Deprecated listview option countTheme. As from 1.5 the count bubble will inherit the theme from its container or you can add class ui-body-[a-z] to the ui-li-count element to specify a theme.

Beta 1:

  • Deprecated class ui-hide-label (was meant to be used with field containers). Basically it negated the effect of field containers so you get the same result by not using field containers and adding class ui-hidden-accessible to the label.
  • Deprecated $.mobile.activePageClass, $.mobile.activeBtnClass, $.mobile.focusClass
  • Deprecated buttonMarkup method
  • Deprecated table-stroke and table-stripe classes
  • Deprecated $.mobile.getDocumentUrl and $.mobile.getDocumentBase – both are available from $.mobile.path
  • Deprecated $.mobile.activePage. Use the getActivePage method on content widget or activePage property

For a full list of changes see the list of 1.4 fixed tickets on GitHub.

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-beta.1/jquery.mobile-1.4.0-beta.1.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-beta.1/jquery.mobile-1.4.0-beta.1.min.js"></script>

jQuery Mobile 1.4 Beta 1 supports jQuery core 1.8.3 – 1.10.2 and 2.0.3.

ZIP File: If you want to host the files yourself you can download a zip of all the files:

Fork jQuery Mobile on GitHub

38 thoughts on “Announcing jQuery Mobile 1.4.0 Beta”

        • Anthony on said:

          What good would that do? Last update to the REPO was 15 days ago and it was “First pass on 1.4 update”

        • Jasper de Groot on said:

          We are working as hard as we can to update the ThemeRoller for 1.4, but because of all the changes we made in the theme CSS this is a very complex and time-consuming process.

        • Anthony on said:

          Jasper, I am sure the complexity is great. I never actually said that it was not. But to my point and the other 20+ votes on the above comments, maybe you could give us a little insight as to how the progress is going and if there is any eta on a release? Thanks.

        • Jasper de Groot on said:

          Hi Anthony, We just released 1.4.0 RC1 and are planning on releasing 1.4.0 final in the week of Monday 4 November. The ThemeRoller will be updated before the final release. It has highest priority and hopefully it will be ready first half next week so people can test RC1 with the ThemeRoller. Thanks for your patience!

        • Anthony on said:

          Thanks for the update Jasper and thanks to you and all the JQM devs 🙂 You guys and gals do a wonderful job! Have a great day.

  5. TaeShik Kim on said:

    I really like this “To improve performance we reduced DOM manipulation as much as possible.”

    jQuery Mobile DOM manipulation is too terrible for Mobile App and give pain to much me.
    Recently, Customers want more flexible App, but until now jQuery Mobile too restrict and don’t allow it.

    Of course, New function is important, but performance and a less DOM manipulation more important.
    Please remember it.

  7. Stephen Burdeau on said:

    Downloaded and ran a few tests with 1.4.0 Beta 1 and noticed the following:

    With Alpha 2, a custom select menu with multiple select was rendered as a dialog with a list of choices. With the default theme, each selected choice displayed a white check mark on the blue background checkbox.

    With Beta 1, each selected choice is displayed with NO check mark, just the blue background checkbox.

    Running the supplied demo for custom select menus shows this behavior.

    Is this a bug or as designed?

  8. njtman on said:

    $.trigger(‘pagecreate’); looks like it is no longer working in 1.4. Is there any documentation related to this? What can we use now to re-enhance an entire page, (headers, footers, content).?

  10. Prasun Bannerjee on said:

    Was planning an app for my tech blog http://techlobe.com but instead was keen to know if jquery mobile is going flat in design. As of now, even iOS7 has turned to flat UI. Default UI should be in trend.

  14. Oriol Palenzuela on said:

    Wow… almost 200 issues registered and solved for this release. This 1.4.0 will rock the web, that’s for sure!

  15. Brett Ryan on said:

    What is the alternative to $.mobile.changePage? Both it and $.mobile.loadPage have been marked deprecated with no reasoning or hint as to what to replace this with.

    • Brett Ryan on said:

      It seems that navigate (introduced in 1.3) works, however this does not support transitional data that changePage does, i.e. I can no longer reverse the transition “{transition: “slide”, reverse: true}”

  16. Daniel Brookshier on said:

    I just found a big issue yesterday. I am running 1.4 beta1 on IOS 7 (could apply to earlier version and other platforms). If an iFrame fails to load the SRC (I was pointing to a you tube video in this case), the initialization process halts without error. The symptom is that I see the splash screen and due to how IOS 7 works, I can see a 20px sliver of my start page underneath. On iOS7 it is easy to reproduce by going to Airplane mode.

  17. Simone Marcutti on said:

    What about panel issue in JQM 1.4 beta?
    When I open panel and i make a slow swipe from right to left to close it the panel have a strange behaviour.
    Seems like dragged and with a blank space on the right. You can view it from the online demo using an iPhone

  18. Ivan Demin on said:

    Is the project on ice? I would really try jquery mobile 1.4.0 but without the ThemeRoller Update I can’t do this…

    • Jasper de Groot on said:

      No, it’s not on ice, but very complex to update the ThemeRoller to 1.4 because of all the changes we made in theme CSS. We are working on it.