jQuery Mobile 1.4.2 Released

Posted on by

The second maintenance release for jQuery Mobile 1.4 is out! We fixed the issues with Android 2.3 and IE8 that were introduced in 1.4.1. More than 30 other bug fixes landed in this release, including ones for panel and transitions. See the 1.4.2 changelog for a list of all changes.

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.2/jquery.mobile-1.4.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.2/jquery.mobile-1.4.2.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.2 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!

jQuery Mobile 1.4.1 Released

Posted on by

Today we released jQuery Mobile 1.4.1 More than 50 bug fixes landed in this first maintenance release for 1.4, including fixes for swipe, panel and textinput’s autogrow. See the 1.4.1 changelog for a list of all changes.

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.1/jquery.mobile-1.4.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.1/jquery.mobile-1.4.1.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.1 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!

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!

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

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

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

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

Project leadership

Posted on by

Today we’re announcing a change to our project leadership. Since the start of the jQuery Mobile project in 2010, Todd Parker has been the project and design lead. After three years at the helm, he has decided to step aside as lead but will continue to participate as a team member with a focus on design and outreach.

We’re thrilled to announce that Jasper de Groot, a longtime team member, will be stepping in as the new jQuery Mobile project lead. Jasper is deeply knowledgeable and an all around great guy and we look forward to him leading the charge.

The most important part of any open source project is having a great team and we have that in spades with jQuery Mobile. We want to take a moment to recognize all the fantastic people on the mobile team, past and present, who have worked tirelessly over the last few years: Ghislain Seguin, John Bender, Gabriel Schulhof, Anne-Gaelle Colom, Alexander Schmitz, Scott Jehl, Mat Marquis, Kin Blas, Jason Scott, Tyler Benziger, Ralph Whitbeck, and over a hundred contributors from the community.

With this change in leadership, we’re also moving the Mobile and UI projects closer with more shared code, team members, meetings and a common destiny. We’ve been collaborating closely with Scott González, Jörn Zaefferer, and the rest of the UI team and look forward to a more unified approach going forward.

The team has been hard at work on the upcoming 1.4 release, which is nearing the alpha stage. It is focused on performance, API and code cleanup, and a new theme. Look for that release very soon.

Announcing jQuery Mobile 1.3.2

Posted on by

The jQuery Mobile team is happy to announce 1.3.2. This is the second maintenance release for 1.3 and contains fixes throughout the library. Try it now!

Demos & docs | Download & CDN | Change log

Download

CDN-Hosted JavaScript:

CDN-Hosted CSS:

 

Copy-and-Paste Snippet for CDN-hosted files (recommended):

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

 

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

Microsoft CDN hosted jQuery Mobile files:

Fork jQuery Mobile on GitHub
https://github.com/jquery/jquery-mobile

 

Change log

Popup

Popup: Correctly pass position data through to popupbeforeposition handler.

Popup: Set visibility: hidden instead of display: none to remove the need for un-hiding before height calculation.

keyboard does not disappear when after the pop-up is closed (Issue #5974)
– Popup: Blur any focused elements inside container, including the container itself, upon closing. Fixes #5974 – keyboard does not disappear when after the pop-up is closed.

Popup Widget Events Passed as init Options are Immediately Executed (Issue #5958)
– Popup: Performance improvements. Fixes #5958. Found with git bisect.

Textinput

Fix for placeholder text not being grayed out in IE10

Buttonmarkup

buttonMarkup: Remove popup special handling.

Table

Duplicated “display” property (Issue #5985)
– Table: Removed duplicate display property from CSS. Fixes #5985. Thanks @mish7 !

Custom selects

Custom selects with an id containing a period don’t open their popup (Issue #5893)
– Custom select: Escape weird characters in popup/dialog ID when they become hrefs. Fixes #5893.

Dynamic Select empty when opening second time. (Issue #5935)
– Custom select: Remove dialog upon _destroy. Fixes #5935 – Dynamic Select empty when opening second time.

Non native menus: dialog size select title should match the label when changed after the dialog markup is added to the DOM (Issue #5956)
– Dialog: Render un-closeable during pagebeforehide. Fixes #5956.

Controlgroup

Fieldcontain fieldset legend overflows in IE10 (Issue #6139)
– Controlgroup: Make legend wrap on IE10. Fixes #6139.

Fieldset

incorrect overflow handling selectmenu[multiple] inside fieldset (Issue #6077)
– Core CSS: Unset browser default min-width for fieldset. Fixes #6077.

Panel

Panel: Opening from anchor tag within listview does not remove active button class (Issue #5961)
– Panel: Make sure active button class is removed when link to panel is a listview button. Fixes #5961.

Slider

Slider widget does not work on Opera Mobile 12.10 browser with JQM version 1.3.1 (Issue #5903)
– Slider: On Opera Mobile event.which is undefined. Accept that and get slidin'. Fixes #5903.

Navigation

loadPage Cannot read property ‘prefetch’ of undefined (Issue #5877)
– Prefetch: Check for existance of options object before checking prefetch property Fixes #5877 – loadPage Cannot read property 'prefetch' of undefined and addresses execption from #5951

Navigating back is broken with autoInitializePage = false (Cannot call method ‘trigger’ of undefined) (Issue #5284)
– resolve the nav ready deferred after the page container has been created Fixes #5284

Links

Popup button missing role attribute / aria-owns missing “-popup” postfix (Issue #6117)
– Links: ID refs without hashtag for aria-owns attribute of links to popups. Fixes #6117.

The “popup” data rel attribute should be mapped to the respective ARIA attributes (Issue #5898)
– Links: Append popup accessibility attributes. Fixes #5898.

links.js needs to depend on core, because it uses .jqmEnhanceable() and the :jqmData() pseudoselector defined in core.

Theme

Split button list: Buttons not showing in IE7 (1.3 regression) (Issue #6002)
– Theme: Use shorthand for background color fallback to make it work on IE7. Fixes #6002.

Demo center

Label didn't match example.

Added note to the PHP redirect demo that says it only works on a server.

Update example CSS for “Making the panel responsive” (Issue #5889)
– Demos: Updated comment above example CSS for clarification. Fixes #5889.

Bug in documentation example “Making the panel responsive” (Issue #5936)
– Demos: Updated responsive panels CSS example. Fixes #5936.

Popup: Removed weird (and almost certainly accidental) popup-inside-popup embedding.

Tests

Popup integration tests: Add test to make sure popup elements do not have focus after the popup is closed. Tests #5974.

Custom select integration tests: Ensure dialog is removed after destroying dialog-sized select menu.

Announcing jQuery Mobile 1.3.1

Posted on by

The jQuery Mobile team is happy to announce 1.3.1. This is the first maintenance release for 1.3 and contains close to 50 fixes and improvements in the library. Try it now!

In this release, we’ve added support for sourcemaps in the library to make it possible to view the uncompressed code from the minified version. Sourcemap for jQuery Mobile 1.3.1.

Also noteworthy, the reflow and column toggle tables now have fully operational refresh methods to properly support dynamic content.

Demos & docs | Download & CDN | Change log

Download

CDN-Hosted JavaScript:

CDN-Hosted CSS:

 

Copy-and-Paste Snippet for CDN-hosted files (recommended):

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

 

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

Microsoft CDN hosted jQuery Mobile files:

Fork jQuery Mobile on GitHub
https://github.com/jquery/jquery-mobile

 

Change log

Button

Removed duplicated code in butonMarkup. Title is set twice for element when iconpos option is set. Thanks stforek!

buttonMarkup: Do not allow a value of null to end up the value of an attribute, because it gets stringified as “null”

Removed border-radius inherit for ui-btn-text (Fixes #5709) – added rule to listview because that’s the only place where we need this.

Checkboxradio

Add reset handling via $.extend, not $.widget to avoid additional subclass depth

Collapsible Set (Accordion)

addFirstLastClasses: Add it to widgets via $.extend, not $.widget because it does not use any widget factory features.

Controlgroup

addFirstLastClasses: Add it to widgets via $.extend, not $.widget because it does not use any widget factory features.

Dialog

Fix setting dialog options other than “closeBtn”. Thanks jdknezek!

Fixed Toolbars

Fixed toolbar: changed hideDuringFocus logic to fix interaction with on-screen keyboard. (Fixes #4113) and an issue on Android native browser.

Page content’s padding is not adjusted when fixed header elements changes its height (Fixes #5619) – the first argument of updatePagePadding is expected to be a page, but when it is called from the throttledResize binding, it ends up as an event object, and the padding was being set on that instead of the page. This adds a check to ensure the arg is a page before setting its padding.

Listview

Listview filter: Check if var listview is defined. (Fixess #5696 and #5643) – The listviewcreate event bubbles up which causes an error if a listview is nested in an UL or OL without data-role="listview".

addFirstLastClasses: Add it to widgets via $.extend, not $.widget because it does not use any widget factory features.

Ordered list numbering, display is not correct when adding additional tags (Fixes #1609) – Added style for ordered list with formatted content.

Navbar

Clicking a currently active navbar tab removes ui-btn-active class and styling (Fixes #5707) – Changed active state logic. Removed workaround for #1181. Fixed that issue by addressing the actual cause: event.target returns ui-btn-inner instead of the anchor

Navigation

Simplify code for getAjaxFormData (Fixes 5710). When submitting a form via GET, strip query off URL before creating new query string..

Added “contentType” to settings for $.mobile.changePage with “data” argument. Thanks aristotelos!

loadPage: update to account for if the page is prefetched done update basetag (Issue #5677) – Prefetching pages from other directories offsets -tag

Support: Turn off pushState inside FF iframes

When submitting a form via GET, strip query off URL before creating new query string. (Issue #5710).

https://github.com/jquery/jquery-mobile/commit/2d7bebe060d5edfac7d8787d7b1c08a8e5746da5“>Issues with history disabled with popups. (Issue #5775). If the default is prevented on the originalEvent of “navigate”, do not go into _handleHashChange.

Removed extra function in transition “`releasePageTransitionLock“` sets “`isPageTransitioning“` to false;
So no need to set is here as “`releasePageTransitionLock“` is called. Thanks poonkave!

Panel

Workaround for bug in Firefox 19.x/Mac with native select in hardware accelerated panels (Fixes #5753). – make "-moz-transform: none;" override non-prefixed prop/val (FF 16+). Thanks @jaxtheking!

Panel: Visibility: hidden for closed panels. (Issue #5652). This prevents focus on links in closed panels when using the tab key.

Call positionPanel() before we start opening the panel. – This prevents a vertical scrollbar on the page div when opening a long panel on a short page.

Unset transform translate3d for FF where possible. (Fixes #5753). We don’t need translate3d(0,0,0) for hardware acceleration in case of FF and it causes problems with selects due to a FF bug.

Fix for panel Flickering on iOS and Android (Fixes #5831) – Adding 3D for reveal panel content and page sections in content wrap to kick in hardware acceleration.

Only set a default min-height for the page for panel consistency. (Fixes #5755) – resetActivePageHeight() only overrides the page min-height. Setting this for ui-mobile causes issues on small screens.

Fixed typo in panel code – Fixes _panelInner

Set max-height for closed panel (Fixes #5843) - Page div gets a vertical scrollbar on IE9 if panel is longer than page content.

Give content wrapper a min-height on IE7 (Fixes #5607). Because of IE7′s min-height bug, the content wrapper doesn’t inherit the min-height of the page. On short pages you see the page background below the content.

Popup

Text input in popup doesn’t loose focus (Issue #5706) – When focusing on the container, do not bounce focus to an element inside it even if such an element is available.

Range slider

Add form reset via $.extend, not $.widget.

Force update on mousedown to prevent situation where user has typed in input but input has not yet blurred (Fixes #5644) – Rangeslider makes FF (Mac OS) pause for few sec and throw error “too much recursion” when manually enter right value less than left one and click middle slider area

Update highlight on form reset (Fixes #5773) - Rangeslider layout breaks upon form reset.

Select menu

Add reset handling via $.extend, not $.widget to avoid additional subclass depth

Blur after change to make hideDuringFocus work correctly on Android/Chrome (Fixes #5514)

Slider

Add reset handling via $.extend, not $.widget to avoid additional subclass depth

Slider: drag should start only for left mouse button. Thanks stforek!

Account for mouse and touch input event differences “`event.which““ for“ mousedown“` can be 0 or 1, because it is 0 on mobile and 1 (left mouse button) on desktop

https://github.com/jquery/jquery-mobile/commit/949a16a880f06c71bc8277fdcdd46520a4a9355c“>Flip swith style issues inside a table cell. (Issue #5809) Reset unnecessary clearfix for the flip toggle switch.

Style tweaks for missing border for native range control (Fixes #5846) – Switch to border-width: 0 instead of border: none for the input to make it easier to restore the border if you want.

Tables: Reflow and Column Toggle

Added missing refresh method for reflow and column toggle tables (Fixes #5842 and #5841) – This method wasn’t implemented fully for 1.3.0 but was documented in the API so we have now added this capability for both table modes. Thanks frequent!

Text Inputs & Textareas

Improved vertical alignment of clear button in mini sized text inputs (Fixes #5840)

Textinput: height correctly calculated (without extra padding) for box-sizing. Thanks jhogervorst!

Automatic resizing now works for disabled textareas with pre-filled values. Thanks jhogervorst!

Theme

Remove “px” from zero values in CSS. Saving bytes. Thanks nschonni!

Transitions

Removed animation-fill-mode properties to improve animations in Android 4.x. (Issue #5679)

Slide transition not working properly on iOS (Fixes #5764) – Use translate3D instead of translateX for slide transition. Fix for iOS 6.