jQuery Mobile 1.4.0 RC1 Released

Posted on by

The jQuery Mobile team is excited to announce the first release candidate for 1.4.0. For this new version of the jQuery Mobile framework we focused on performance improvements, reviewing widgets as well as a new default theme and SVG icons. Some of the new features in 1.4 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.

See the changelog below for the key changes, and have a look at the jQuery Mobile 1.4.0 Beta 1 announcement to find out about all highlights of this new version of jQuery Mobile.

Demos | Key changes | Download & CDN

Changes since 1.4.0 beta

We would like to thank everyone for testing the alpha and beta releases! The issues with panels, as well as most of the other bugs that were reported, are fixed in this RC1 release. We also changed the active colors in the new default theme a bit.

All demos have been updated and the problems with the Download Builder have been resolved. The 1.4 API documentation will be available when we release 1.4.0 final. We are also still working on updating the ThemeRoller for 1.4, which takes more time than usual because of all the changes we made in the theme CSS.

Please help us by testing the Release Candidate and reporting issues.

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, panel) have options that can be set after the widget has been instantiated. Dialog-related options must be set via the page plugin ( i.e., $( “#myDialog” ).page( “option”, “closeBtn”, “none” ) )
  • All widgets (excluding listview, tables, and selectmenu, dialog, toolbar, panel) 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
  • 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.
  • Setting data-defaults=”true” will skip checking of data-attributes for widget options

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. Panels no longer default to theme “c” but inherit. 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
  • 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.
  • 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.
  • Renamed content widget to pagecontainer widget

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).
  • 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)
  • Listviews: List buttons with icons get the ui-btn-icon-right class again.

Deprecation

  • Deprecated auto-enhancement of links and button elements in toolbars, including adding the ui-btn-left/right classes in header.
  • 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 $.fn.mobile.fieldcontain() and 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 is now an option in the page widget data-dialog=”true”.
  • Deprecated current slider and rangeslider 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 – just provide your own input via the data-input option
  • Deprecated filterTheme option for filterable – just provide your own input via the data-input option
  • 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.
  • 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 data-role=”content” and option contentTheme (data-theme). This also means that the framework no longer adds ARIA role “main”. Add class ui-content and role=”main” in your markup instead.
  • 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.
  • Deprecated data-role=”collapsible-set” for collapsible set. As of 1.5.0 it will be data-role=”collapsibleset”
  • Deprecated collapsibleset’s behaviour whereby it only enhances children that match the collapsible initSelector. As of 1.5.0 collapsibleset will turn all its children into collapsible widgets.
  • Deprecated auto-hiding of dividers during filtering. As of 1.5.0 divider autohiding is no longer related to whether you’re filtering or not. It is a filtering-independent option of the listview. You must add data-hidedividers=”true” to a listview in order for dividers to be automatically hidden when all the items in the section they designate are hidden/removed.
  • 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 (not documented in current API docs)
  • Deprecated $.mobile.activePage. Use the getActivePage method on pagecontainer widget or activePage property (not documented in current API docs)

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-rc.1/jquery.mobile-1.4.0-rc.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-rc.1/jquery.mobile-1.4.0-rc.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

74 thoughts on “jQuery Mobile 1.4.0 RC1 Released”

  3. chadhuntley on said:

    Surprised you guys are sticking with the 1.x branch for this with so many huge changes from 1.3.x, maybe you should consider calling it 2.0?

  4. Lalo on said:

    Any chance to have the demo site available in zip file. I want to test it with phonegap in a mobile phone. Great job btw

  5. Daryl on said:

    Nice Candidate. One thing I quickly noticed is that many of the icons are way off center. For example: carat-d
    carat-l
    carat-r
    carat-u
    navigation
    power
    comment
    star
    tag
    video
    alert

  6. fly on said:

    e,how can i work with classis theme ？the demo for classis theme don’t work，can you guys check it?

  7. Brett Ryan on said:

    Personally I feel the colours in the beta/alpha release were better than in the RC. The darker heading kinda looks like a dirty grey, whereas in the beta it was a little lighter and more fresh. Same goes with the activated links in a list when transitioning as well as the link colours themselves.

  8. alberto_iglesias on said:

    Using Select widgget with the property data-native-menu=”false” make a litle jump in the transitios.
    Without that property the action is very slow.

  9. alberto_iglesias on said:

    i have a little refresh of the pagel when i put a lot of items in a select widget with ata-native-menu=”false”

    • Component on said:

      C’mon Jasper,
      You said themeroller will be ready 10 days ago 🙁
      Honestly, waiting to try on a working project for customers to test but themeroller needed seriously…

      • Tyler Weldon on said:

        Same here, the new update is great and I will be using it on an existing phonegap/jquerymobile app but I’m waiting on the new themeroller, any idea on a release date?

    • Jurgen Fink on said:

      Hey Tyler, Jasper, and all hat are desperately waiting for the themeroller 1.4.0

      What we did meanwhile (and it works fine for us), is creating swatches with themeroller, then adding manually the additional Swatches (c, d, e, f, g and h) to jquery.mobile-1.4.0-rc.1.min at the end (obviously carefully, maintaining the new css structure of 1.4.0)

      All working perfectly so far.

      check it out at:
      http://www.oilamerica.com.pa/en/mobile/

  13. iphone app development sydney on said:

    Great blog! The
    information you provide is quiet helpful,but need a demo first. why I was not able to find it
    earlier. Anyways I’ve subscribed to your feeds, keep the good work up.

  14. alberto_iglesias on said:

    select menu without attributte data-native-menu, is very slow

    Example:

    Hasta:

    ……values

  15. nameless on said:

    Also as Jasper said, on 4 of this month (today) we’ll get the theme roller update for 1.4.0? Is there any progress?

  17. suresh on said:

    hai this is suresh working with jquery mobile since past 2 years….i have fed up with many issues and overcame them.like dynamic creation of jquery mobile controls…but still lagging with many issues…

  18. Michael SBCERA on said:

    Any chance of a better explanation of external panels. I have panels working when they are in each page. I then add:

    $(function() {
    $( “body>[data-role=’panel’]” ).panel();
    });

    and move my panel to the end of doc before I delete all the other page panels and when I build nothing happens when I click the panel open button. Am I missing a step? I use PhoneGap too.

  19. Thomas Snyder on said:

    Can someone please clarify how the above mentioned download sizes for the minified and gzipped versions are calculated? The CDN-download for the JS is 56KB and for the CSS (with theme) is around 26KB.

    Besides that I’ve gzipped the non-gzipped files myself (using gzip, directly via a web server, using Java) and I’m getting the same results (56KB for the JS and 26KB for the CSS).

    So I assume that the “ready to deploy” sizes are just not correct…?!

  25. tyroneavnit on said:

    Is it safe to use this release in Production, or is it better to stick to 1.3 and wait for the final release?

    • Joe Lannen on said:

      +1 on this… I’m building a mobile app, using 1.4rc hoping to launch in 1 month. Need safe code and theme roller! 🙂

  26. Erich Champion on said:

    I’m having trouble with a data-rel=”back” button in iOS with 1.4rc1. On desktop browsers, the button functions just as it should to close a popup. On iOS, nothing happens, and there’s no error in the console. Here’s an example of the code. It seemed to work on 1.3.2.

    Content

    Add
    Go Back

  27. Jurgen Fink on said:

    Dear jQuery mobile Team:

    Excellent work with the 1.4.0 RC1 release – well done and thanks for sharing. All working nicely so far.

    We implemented successfully the new “flip” widget and also added manually some additional Swatches (c, d, e, f, g and h).

    (creating with themeroller, then adding manually to jquery.mobile-1.4.0-rc.1.min)
    All working perfectly so far.

    see at: http://www.oilamerica.com.pa/en/mobile/

    We are even using your jQuery mobile framework for our regular web page.
    Again thanks and keep going like this ….

    Regards,
    Jurgen and IT Team from Oil America
    Panama

    • Jurgen Fink on said:

      Finished some Tuning on the 6 temporal Swatches “c”, “d”, “e”, “f”, “g” and “h”

      1.) We agree with all the members here:
      we are all desperately waiting for ThemeRoller for 1.4

      2.) Because ThemeRoller is an excellent tool.
      Congrats to the devel. team of jQuery Mobile.

      3.) jQuery and jQuery Mobile rocks – we love it:
      Hence we want to contribute some temporal Swatches, it’s not perfect and just a temporal solution for members interested, meanwhile the jQuery Mobile team releases the new ThemeRoller, please feel free to use it as is. Again, it’s not perfect – it works, though.

      4.) Swatches:
      “a” white – incorporated in 1.4.0 RC1
      “b” dark – incorporated in 1.4.0 RC1
      “c” blue_light – added by us
      “d” blue_dark – added by us
      “e” oil_light – added by us
      “f” oil_dark – added by us
      “g” green_light – added by us
      “h” green_dark – added by us

      5.) Swatches placed at the end of jquery.mobile-1.4.0-rc.1.min.css at
      http://www.oilamerica.com/mobile/

      6.) Blur effect on focus:
      As we all know, not working with Chrome and Opera, but IE and FF excellent.

      7.) New flip switch widget:
      It rocks – beautiful, works excellent with Chrome and Opera, not so smooth with IE and FF (I assume latter 2 not hardware accelerated ….)

      8.) New vector-based icons:
      Thanks, beautiful too

      Good work from all of you here in the message board and at jQuery and keep it going like this.
      Saludos, Jürgen:

    • Kelvin on said:

      I use the CDN-hosted files for my site and when I put the code of my selfmade theme in front of the CDN code (like the instruction says) nothing changes. There is still the black default theme.
      Do I have to host jQuery myself to use a custom theme?

    • Jurgen Fink on said:

      Excellent Jasper – well done;
      works perfectly well for us so far.
      Thank you so much for all the hard work and for sharing.

      Question, though:

      I noticed that ThemeRoller for version 1.4.0-rc.1 does not handle gradients for backgrounds anymore.

      Is there a special reason for it?
      Maybe certain devices or OS that would not handle gradients correctly?
      Or is it not good practice anymore to use gradients at all?

      At our site, we implemented gradients manually “background-image: -webkit-gradient …..” and at the /* Active button */ we just added the line “background-image: none;” and it works perfectly well for us. Active-state shows correctly.

      Again, thank you for the ThemeRoller for 1.4.0-rc.1 – nice work.
      Keep on going like this.
      Saludos, Jürgen

      • Jasper de Groot on said:

        Thanks Jürgen!

        We removed gradients from the default theme just to give it a more modern look. Other benefit is that it improves performance a bit, but that was not the main reason.

        We looked into keeping it possible to set gradients with the ThemeRoller, but the problem is that it isn’t designed to set a value for a property that is not in the default theme (background-image in this case).

        Manually adding the background-image settings like you did is not a problem at all. You can just copy those from your 1.3 theme. We will mention this in the upgrade guide.

        See also this demo of the 1.3 default theme upgraded to 1.4: http://view.jquerymobile.com/master/demos/theme-classic/
        It also shows how you can add the inner highlight to buttons like we had in the 1.3 theme if you would like to keep that.

        Cheers,
        Jasper

        • Jurgen Fink on said:

          Ooooops – that was a quick reply, Jasper.
          I appreciate it.

          Thanks for the link and the hint to inner highlight and the theme upgrade for the classic themes from 1.3 to 1.4 – very nice indeed, congratulations.
          (you are cheating, he he: you added manually carefully some gradients …. 🙂 )

          You do a nice work – very stylish – I love it.

          Talking of gradients:
          I saw your contributions on https://github.com/jquery/web-jquery-mobile-theme-roller/issues/149 Issue Nr. 149, and did exactly as advised by you – adding also manually the gradients – works perfectly well.

          I agree with you – one has to use gradients very carefully in order to maintain a clean look of the UI, easy to navigate, modern, metrostyle, etc ….

          Again I appreciate your quick reply and all the hard work you are doing with those nice contributions of yours – keep up the good work.
          Saludos,
          Jürgen

    • Rob Caldecott on said:

      Is there a simple way to add some of the pre-1.4 swatches (b, c and d are used in our apps) to 1.4? I tried importing the older swatches into ThemeRoller but it got itself in a right mess.

  29. 字一日 李白 on said:

    is it possible to remove the addition classes and the javascript code? and focus on provide a beautiful and clean web mobile ui framework only. which would improve the framework greatly.

    • Jurgen Fink on said:

      I understand your frustration – pure HTML5 and CSS would be perfect.

      However, the common combination of nowadays is:
      HTML5 + CSS + JS.

      In his blog, Dragan Gaić (Gajotres, https://plus.google.com/+DraganGai%C4%87/posts) made a nice comparison of the top 7 mobile ui frameworks out there.

      http://www.gajotres.net/top-7-mobile-application-html5-frameworks/

      (By the way: jQuery Mobile turned out Number 1 by points … )

      1. jQuery Mobile – 13,705
      2. Kendo UI – 3,024
      3. Titanium – 2,397
      4. Sencha Touch – 2,235 *
      5. Zepto – 232
      6. jQTouch – 465
      7. App Framework – 68 **

      Saludos,
      Jürgen

      • 字一日 李白 on said:

        Thanks for the reply, that is why i use jquerymobile. but the addition decorations on js and html dom are really awful to have a better control over jQuery mobile while js mvc becoming more and more common today.

  31. Matteo Rossi on said:

    I have a problem: I created a theme with themeroler with A, B, C, D, E but for button and other element I can’t give view different from A and B! Why don’t it work??? It don’t work with data-theme and with class=”ui-btn-c”. Thank you and sorry for my poor english!

  32. Celeste Roby on said:

    I would like a better explanation of the way the theme inheritance is supposed to work. For example If I want to have two buttons inside of a collapsible set have two separate themes, I don’t understand why I shouldn’t be able to do that. I’ve tried using the data-theme attribute as well as ui-btn-b class. Were these sorts of limitations intended?

    • val on said:

      Not sure about being it wrong, maybe not the way you would have done it, but then all requirements are different. You’re right in that I could simulate two extra links by attaching one to swipe and one to a tap-hold, but like I said I can already work around it by using buttons instead of <a>. So you’re just offering another workaround, I’ll keep it mind, thanks.

      My original point still stands though, not exactly sure why the content wrapper in a list can only be a <a>, seems like many other tags, divs for example, could do the job just as well. This seems like a needless restriction.

    • Kelvin on said:

      jQuery Mobile 1.5 as a christmas gift. That would be great 🙂 …but I can’t wait any longer 😀

  36. Luan Ngo on said:

    Hi. I apologize if this has already been pointed out but, in this version, I am unable to programmatically collapse and expand collapsibles. For example, the command $(“[data-role=’collapsible’]”).trigger(‘expand’) works for version 1.3.2 but not for 1.4.