jQuery Mobile 1.4.0 Alpha 2 Released

Posted on by

Today we released jQuery Mobile 1.4.0 Alpha 2. First of all, the jQuery Mobile team would like to thank everyone who has been testing the first alpha release for jQuery Mobile 1.4. The reported bugs have been fixed in this second alpha release, and in particular those relating to the new filterable widget and the change in the panel widget which allows for panels to exist outside a page. See the updated changelog below for the key changes, and have a look at the jQuery Mobile 1.4.0 Alpha 1 announcement to find out about all highlights of this new version of jQuery Mobile.

In the next few weeks, we will work on updating the API documentation and the Demo Center, as well as 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 this second Alpha version, giving us your feedback, and reporting issues.

Key changes | Download & CDN

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

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

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.

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)

Alpha 2:

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

Deprecation

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

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

jQuery Mobile 1.4 Alpha 2 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

34 thoughts on “jQuery Mobile 1.4.0 Alpha 2 Released”

  1. ColColonCleaner on said:

    Is there an API listing for all updated functions? Kinda hard to test for this without knowing what the new formats are.

  4. Rob Caldecott on said:

    Superb. One question: there are a ton of icons in the images/icons-png and images/icons-svg folders. How do I use these on buttons, etc.? Does anyone have some CSS examples?

  6. Ray on said:

    That flicker during transitions is back and really bad in this version, i tried all the usual tricks that worked successfully in an older version, (1.2). The app is loaded within a webview on android, the flicker also occurs on desktop browsers etc.

  11. lizhuang on said:

    Everybody loves jquery mobile’s predecessors everybody is good, I really like jquery mobile, I come from China, hope to be able to communicate with fellow predecessors, my email is lzread@163.com

  12. Sushil on said:

    Loved new feature section, waiting for final release. Expecting markup for side panel widget outside of the page, something like global section.

  13. Mattia Popolla on said:

    Now that panels work outside of pages, is there any chance that version 1.4 will feature out-of-the-box support for independent scrolling of panel and page contents?

  14. Viktor Szűcs on said:

    Do you plan to implement drag, drop and resizable features to jQuery Mobile? These features are available in jQuery UI, but that framework doesn’t support touch event native only with the help of TouchPunch plugin. And a last question: multitouch support? 🙂
    Thanks is advance.

  17. Guest on said:

    Is there a step by step manual about how to adapt an HTML5 currently working with JQM1.3 to the new 1.4? I tried to replace the CSS/JS, but the page is totally messed up, and I don’t want to start fixing all the issues one by one without being sure that I’m not forgetting anything…
    Thanks for the good job!

  21. erumhannan on said:

    pls elaborate alternative of ChangePage i have used at several places inside my app and after adding JQM-1.4.0-alpha2 its not working properly

  22. erumhannan on said:

    what’s the alternative option for deprecated $.mobile.changePage() as i have used at several places in phonegap app

  23. harshad on said:

    issue with alpha version , in panel while focus on input box it auto scroll to top , Is there any solution?

  24. Michael Jata on said:

    Has the panel a better performance now? I mean the reaction time when touching on the toggle or when sliding to the respective side…? I would appreciate a similar behaviour than it is in snap js…

  25. Timsta Brown on said:

    On 1.4. Alpha 2 the scrolling of an open panel with my Android is even worse then on 1.3.2…is it such hard to just let the html like it is, why using so much js stuff? it seems to blow up the hardware…especially with this issue i had great expectations in the 1.4 version 🙁

  26. Tyler Weldon on said:

    whats the status with a new update? When will you be updating themeRoller? 1.4 is great love the flat design. I cannot get class=”ui-icon-nodisc” to work.

  27. Michael SBCERA on said:

    Has anyone figured out the mark up for a panel outside of a page? I saw the demo but there isn’t a lot of info. When it says initialized manually, what am I doing? Something like $( “#idofpanel” ).panel( “open” , optionsHash );?

    I guess I should clarify that this allows us to create the panel once, as opposed to on every page?