jQuery Mobile 1.2.0 Release Candidate 1 Released

Posted on by

The jQuery Mobile team is excited to announce the first release candidate for 1.2.0. We only had a few serious bugs come in with our recent beta release now that those are patched up, we’re moving on the RC1. There are a ton of great new features in 1.2 so if you haven’t read up, see the 1.2 alpha blog post for full details, we’re just going to cover what’s new here.

Please help us test and report issues before we move to the final version. Try it now!

Demos & docs | Change log | Download & CDN

Note: jQuery core 1.8.x with BB 5 and iOS 3 = C grade experience

In jQuery core 1.8.0, the team removed a lot of old offset code in favor of getBoundingClientRect() and window.webkitConvertPointFromNodeToPage() which are very widely supported. John Resig even wrote a blog post about the wonders of getBoundingClientRect() and we think this was a smart move because it cut a lot of code weight.

The one downside of this change is that Blackberry 5 and iOS 3 don’t support either of these more modern methods. When we tested jQuery Mobile on these platforms with 1.8.x, there were errors that broke the page because we use getBoundingClientRect() for the loader, popup and slider.

We’ve been coordinating with the core team to find a fix and in the forthcoming jQuery core 1.8.2 release, getBoundingClientRect() will return 0,0 if not supported to at least avoid errors. We’ve been looking to find ways to work around this method in our widgets but we’re concerned about adding a lot of code bloat to support these older browsers.

As of now, we’ve added in a small bit of code to detect if jQuery core 1.8+ and lack of suport for getBoundingClientRect() and don’t enhance the page in these cases. That means that if you use 1.8.x with jQuery Mobile, BB5 and iOS3 will receive the C Grade experience (basic HTML). We’re assessing our policy on what grade we should have for browsers that jQuery core doesn’t support anymore so stay tuned on that front.

Change log (since 1.2 beta)

Checkboxradio

Remove explicit left and right margin 0 to allow margins when used in grid 
– CSS improvement for checkboxes and radios to look more graceful when placed in grids.

Core

Enabled box shadow support for BlackBerry OS 6+ (Issue: #4828)
– Fixed a text input issue on Blackberry 6 browsers where the input became black when it got focus.

Moves fixed positioning blacklist to jquery.mobile.support.js – Made the frameworks browser detection for fixed positioning support a central component.

Listview

Added missing webkit prefix for border-radius on Android 2.1 and iOS 3.2.

Increase the level of specificity of the margin 0 rule for listview buttons to avoid margins when used in grid (Issue: #4945)
– CSS improvement for listviews to be more solid when placed in grids.

Navigation

Abstract backward movement in history (Issue: #4950)
– “window.history.back” doesn’t work in phonegap applications after a page refresh, though it does work under hashchange/replacestate. The solution is to use their “navigator.app.backHistory” method along with a configuration option. The reasoning for the option is to prevent any corner cases popping up with existing phonegap applications. Forward history movement for the same usecase is _not_ addressed but remains an even lower priority.

Phonegap

Added a note to the docs about using underscores within foldernames in PhoneGap for Android (Issue: #4991)

Popup

Adding header/content/footer border support for popups (Issue: #5000)
– Adds corner support for header/content/footer container inside popups having data-corners attribute set to true

Do not forget about the no-history-manipulation case when calling _open() 
– Popups open method improvement when no-history feature is used.

Exclude internal attributes from dom element (Issue: #4967)
– Fixed markup issue when popup is opened.

Perform the visual open only when the nav hook has been acquired (Issue: #4949)
– Fixed an iOS popup / custom select positioning issue.

Restrict the application of the exclusions to the recording of the new option value in the data-* attributes. Do still chain up to mobile.widget with every option. 
– Popup widget improvement.

Using “position: fixed” blacklist to fix popup overlays in browsers that know what they are doing with “position: fixed” to avoid monstrous overlays on long pages in some cases. 

Slider

Increase level of specificity to avoid conflicts when sliders used in a grid (Issue: #4944)
– CSS improvement for sliders to be more solid when placed in grids.

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.2.0-rc.1/jquery.mobile-1.2.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0-rc.1/jquery.mobile-1.2.0-rc.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

jQuery Mobile 1.2 Beta Released

Posted on by

The jQuery Mobile team is excited to announce the beta release of 1.2.0. Since we released the alpha a few weeks ago, we’ve been listening to your feedback and fixing as many issues as possible. We unearthed a few Android and WP browser bugs int he new popup widget that proved to be pretty tricky to work through so we ended up doing a fair amount of re-factoring to the code to work around the bugs.

As we spent a few weeks grinding away at workarounds for these browser bugs, we also landed another 60 fixes, upgraded to the UI 1.9 widget factory, and added full support for jQuery core 1.8.0 and 1.8.1. The upside is that the new code is now leaner, faster and more compatible.

Since we’ve made a fair amount of changes since alpha, we’ve decided to release this beta to help the community give the code a full runthrough to see if we are indeed ready for final release. Please help us test and report issues so we can move forward quickly. Try it now!

There are a ton of great new features in 1.2 so if you haven’t read up, see the 1.2 alpha blog post for full details, we’re just going to cover what’s new here. We’d also like to thank all our contributors who have helped make jQuery Mobile better.

Demos & docs | Change log | Download & CDN

The bugs: Real baddies

There were a few browser bugs in Android and WP7 that were very challenging for the team to debug and create workarounds for after alpha. Here is a rundown of the key bugs we’ve been wrestling with:

    • Visual z-index issues in Android 4.0 default browser (#4816 and #4874) – When fixed toolbars were used on a page, the use of any position:fixed elements cause havoc with rendering of stacked elements in Android. In these situations, the popup would visually appear under the overlay but was still clickable so this was just an odd a display bug. This issue was addressed by adding conditional logic that will toggle the toolbars from position:fixed to position:absolute when the popup is opened and closed. The drawback to this fix is fixed toolbars appear to hide when a popup is open, so we applied this workaround to only apply to cases where there are fixed toolbars and popups with an overlay theme on Android 4.0.
    • Animating overlay opacity bug in Android 4.0 Chrome (#4915) – The CSS-based fade in/out transition on the themed overlay causes similar visual stacking bugs as fixed toolbars in Chrome. This was addressed by removing the fade behavior on the overlay. Testing revealed that not animating the opacity of the overlay made the popup also display significantly faster so this change is now applied across the board for all browsers. The overlay now pops into place without a transition and adding a transition isn’t offered as an option.
    • Wild scrolling in WP7.5 when closing a popup (#4784) – When closing a popup in WP7, the window would appear to scroll to random locations. Turns out this was due to a bug in WP7’s history management that would not correctly remember the scroll position when we used the history and hashchange to close the popup. After spending over a week looking at possible solutions, the team has determined that this can not be worked around. To address this bug, we have excluded just WP7 from back button support with popups so these must be closed by clicking outside the popup or using a developer-supplied close button. We also had to handle the close button behavior to work without hashchange to work with this situation. The option to track history has been exposed as the “history” option now in the popup API: http://jquerymobile.com/branches/popup-simple/docs/pages/popup/options.html
    • Multiple, sticky button focus states in WP7 –  As popups were opened and closed, the blue outline of the focus state class would remain on the buttons that launched the popups. As it turns out, this was purely a display bug in related to WP7’s buggy history implementation. This issues was also fixed by excluding WP7 from history support.

Also in 1.2 – Custom collapsible icons

We forgot to mention in the alpha post that we added the ability to configure the icons for the expanded and collapsed states of a collapsibles and collapsible sets. Collapsible headings’ default icons can be overridden by using the data-collapsed-icon and data-expanded-icon attributes and choosing any of the standard icons for each.

Popup history tracking: Now an option

We heard feedback at alpha that some developers didn’t want to track popups in the history stack. Using the browser Back button to dismiss popups and menus is an important UI convention on many mobile platforms but there may be use cases like an iOS app where this is less of a concern.

Since we had to exclude WP7 from the history support to workaround a bug anyway, we decided to surface this mechanism in the popup API as the history option, a boolean that defaults to true but can be set via the data-history="false" attribute or when calling popup:

$( ".selector" ).popup({ history: false });

Popups must live within the page wrapper (for now)

After alpha went out, we also heard pretty clear feedback that folks want to re-use popups across pages by placing them outside the page container. At the moment this won’t work because many widgets (listviews, toolbars) are built with the assumption that they live inside a page container for theme inheritance and enhancement to work. Until these widgets are re-factored to work outside of pages at a future release, popups should only be added within a page.

Change log (since 1.2 alpha)

Button

Override default margin if controlgroups or form elements have class ui-btn-left/right (Issue: #4713)

CSS

Remove a typo in jquery.mobile.theme CSS (Issue: #4910)
- Corrected a typo in button hover CSS. Mitch64!

Set webkit-text-size-adjust to 100% instead of “none” (Issue: #4218)
- Fixes a desktop webkit browser bug that prevents text zoom.

Collapsible

Add support for same expanded/collapsed non default icon (Issue: #4801)
- Collapsibles now can have the same non-default icon for collapsed/expanded state.

Controlgroup

Float none for select and checkboxradio ui-btn because their container div already has float left

Keep the possibility to center the controls with vertical-align property (Issue: #4765)

Make icon-only buttons default to mini in toolbars
- Toolbar buttons without text (data-iconpos="notext") now get the mini style by default.

Prevent small bottom margin that some browsers add because of display inline-block
- Horizontal controlgoups now getting centered vertical alignment to prevent a small margin, that some browsers add to buttons.

Prevent the controls inside controlgroups from being wrapped multiple times (Issue: #4716)

Core

Introduce $.mobile.supportsTouch as a supported API and resuscitated $.support.touch though it is still unsupported

Moving to jQuery 1.8 as the default version
- jQuery 1.8 (1.8.1) ist now the default version for jQuery Mobile 1.2.x

Reference widget factory version (Issue: #2838)
- jQuery UI’s widget file includes its actual version now.

Download Manager

CSS metadata were pointing at jquery.mobile.transitions.*
- Fix for the jQuery Mobile download manager.

Fixed CSS path had an extra dotdot
- Path fix for the jQuery Mobile download manager.

Grid

Grid CSS refactoring (Issue: #4835)
- Grids with more than two columns and multiple rows now get the correct CSS. Thanks diamondq!

Listview

Add extra listview autodivider check (Issue: #4901)
- If a listview was nested inside a normal list then the listviewcreate event for autodividers would also fire for the parent list causing an error as this list did not contain listview data. An extra check was added to ensure the parent list is actually a listview. Thanks marcins!

Added a “listviewbeforefilter” event (Issue: #4721)
- Listview filter function improvement.

Added filter input as a data attribute of the event

Always filter the full list of items (Issue: #4133)
- Custom filter methods for listviews now always filter all list items.

Listview autodividers: Fix for text links in list items
- Autodividers now work as expected if list items contain links.

Navbar

Capture and retrigger clicks on the parent list item element in navbars (Issue: #4663)
- Fix for an issue on chrome/android where buttons in navbars are functionless after scroll.

Move active state regain code out of _create() and into its own prototype-level function and use ._on() to invoke it during “pagebeforeshow”

Persistent navbar broken on scroll, Chrome for Android. (Issue: #4663)
- Persistent navbars now work as expected. Thanks mmavko!

Navigation

Avoid string concat where possible
- Code refining.

Handle URLs with parentheses properly (Issue: #4849)
- The regular expression used to parse the jqmData psuedo selector restricts the
use of parentheses which are valid in urls. This breaks data-ns-url selection.
The fix is to avoid the pseudo selector.

Make sure the username and password in the url are encoded (Issue: #4787)

Overwrite stale dialog urlHistory entry instead of reusing it as-is (Issue: Replace location.href references with a centralized method so we can address a XSS/cross-site-scripting issue (Issue: #4787)

Strip authority to avoid exploits in parse regex (Issue: #4787)
- As explained by @mala in Issue #4787, most browsers simply strip the authority from `location.href` anyway. We can simply mimick this more secure behavior for the browsers that don’t thereby avoiding the decoding XSS.

Popup

Add afteropen trigger to setTimeout with android fix
- The select menu’s (now that they depend on popups) require that the first item is focused after they are open. The focus of the popup itself was deferred until after the trigger of afteropen which the select menu uses to focus its first item. As a result the focus was stolen from the select menu by the popup to the popup container.

Bind vclick handler to the document on Android
- To implement click-on-screen-to-dismiss-popup one must bind the “vclick” handler to the document rather than the screen, in order to prevent unpleasantness on Android 4.0. WP7 nevertheless requires the code to remain as is, because handling the screen vclick after it has bubbled to the document causes text and inputs underneath the screen to handle and then swallow the event.

Disable popup history managment in old IE by default (Issue: #4784)
- Cause of a Windows Phone 7 (WP7) scroll position caching issue, the new popup history option is disbaled by default for old IE browsers.

Do not allow the event to bubble up to the document, after all
- Refactoring the popup close process to stop bubbling up to the document.

Do not fiddle with the focus when rapid-opening/closing during reposition (Issue: #4797)
- Fix for a native keyboard issue preventing data-input in forms in popups when popup-reposition occurs.

Eliminate the need for a popup IE6/7-specific workaround class, as well as additional scripting
- Popup background fix for IE6/7.

Enable close button when history is disabled
- Make the popup close button work even if the new popup history option is disabled.

First pass at disabling history with an option in popup
- Added a popup option for disabling URL history management. This new option sets whether to alter the URL when a popup is open to support the browsers back button. URL history management is enabled by default.

First pass at popup simplification
- Refactoring popup code for simplification.

Fixed the order of the tolerance parameters (Issue: #4856)
- The values for the popup tolerance option to set the distance between the popup and the window, now were interpreted as the documention says: top, right, bottom, left.

Focus parent link on close when opened by a parent link
- Popup calling links now get focus back when popup closed.

Hide fixed toolbars on Android ICS native browser when popups are opened (Issues: #4816 #4844 #4874)
- When fixed toolbars were used on a page, the use of any position:fixed elements cause havoc with rendering of stacked elements in Android. In these situations, the popup would visually appear *under* the overlay but was still clickable so this was a display bug. This issues were addressed by adding conditional logic that will toggle the toolbars from position:fixed to position:absolute when the popup is opened and closed. The drawback to this fix is fixed toolbars appear to hide when a popup is open, but this workaround is only applied to Android 4.0 and will only been seen if there are fixed toolbars and popups with an overlay theme.

Make sure the popup is closed on destroy (including cleanup)
- Popup code refactoring

On WP7, you get “” for an empty background, not undefined, like in IE8
- Fix for a WP7 popup issue.

Properly handle popups in dialogs, make sure dialog closes on page changes
- Refactoring popup chaining from dialogs to keep proper page navigation and URL history.

Remove default fade animation from popup overlays. (Issue: #4915)
- The CSS-based fade in/out transition on the themed overlay causes similar visual stacking bugs as fixed toolbars in Chrome. This was addressed by removing the fade behavior on the overlay. Testing revealed that not animating the opacity of the overlay made the popup display significantly faster so this change is now applied across the board. The overlay now pops into place without a transition.

Remove link focus, unwind stack before applying focus and tabindex
- To prevent popup transition issues on Android 4.0 devices, the order of applying focus and tabindex was changed when popups are opened.

Remove styles related to popup overlay fade
- Tidied up popup CSS after removing overlay-transitions.

Resolve the popup screen deferred immediately
- Popup refactoring.

The popup screen leaves a 1px gap at the bottom of the screen to avert Android 4.0 hangage
- Popups now get a 1 Pixel bottom gap due to an display issue on Android 4.0.

Unhook hash listeners from popup when aborting

Use just the hash as a selector in IE7/WP 7.0 (Issue: #4917)
- Fixed an IE7/Windows Phone 7.0 popup open issue caused by the handling of hashes and absolute hrefs in that browsers.

Use new ._on() binding method to attach handlers such that they are removed upon _destroy()

Use ui-overlay-* for overlay theme
- Popups overlay now use the ui-overlay class

Use widget factory to trigger events

Slider

Correct slider to use _on, and guard the unbinding test

Merge branch ‘memory-leaks’
- Slider widget functional and memory improvements

Move _preventDocumentDrag function into the widget prototype and attach it with ._on() to ensure removal upon destroy()

Move _sliderMouseUp function into the widget prototype and attach it with ._on() to ensure removal upon destroy()

Partly fixes an issue on Safari/Mac where the input width is decreased when the browser implements the spinner

Textinput

Move _keyup function into the widget prototype and attach it with ._on() to ensure removal upon destroy()

Unbind document handlers to prevent memory leaks on textinput

Toolbar

A negative indent of -99999em can cause native Android 4.x to freak out, since its so absurdly high. Switched to -9999px.

Prevent `0` from being appended to the document when using a persistent footer with jQuery 1.8.x (Issue: #4887)

Widget Factory

Upgrade widget factory to 1.9 beta version (Issue: #4629)

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.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.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

Announcing jQuery Mobile 1.2.0 Alpha

Posted on by

The jQuery Mobile team is excited to announce the alpha release of 1.2.0. This release brings a new popup widget, an autodivider option for listviews, and a host of enhancements and fixes throughout the library to make things smoother, faster, and more polished. Try it now!

Demos & docs | Key changes | Change log | Download & CDN | Supported Platforms

KEY CHANGES

New Widget: Popups

The biggest feature of 1.2 is the new popup widget. The idea with popups is to create a flexible element that makes it easy to place any content or widget in an overlay that floats above the current page. This makes it easy to build a simple tooltip, menu, popup form, map overlay, or lightbox with this same widget.

Popups follow the markup pattern of dialogs and consist of a container with a data-role of popup and a link with a data-rel of popup that points to the ID of that container. When the link is clicked, the popup is shown. Clicking outside the popup, hitting the back button, or pressing the Escape key all close the popup.

Here is the basic markup you need: a link and popup container.

<a href="#popupBasic" data-rel="popup">Open Popup</a>

<div data-role="popup" id="popupBasic">
	<p>This is a completely basic popup.<p>
</div>

We’ve worked hard to make the popups as flexible as possible to let you get creative. By default, popups are styled as a simple box with the same theme as the current page, rounded corners, and a drop shadow. Popups don’t have padding which makes it really easy to drop in a widget like a listview to create a menu.

Out of the box, there are options to control whether how it’s positioned (centered over the thing you tapped, the window, or any selector), add a semi-transparent overlay layer behind the popup, use an animated transition when the popup opens, adjust theming, and more. We’ve also added a few advanced demos showing how to build a lightbox by working with image scaling, use embedded iframes in popups for maps and videos, and even make a very custom looking side panel by tweaking styles and working with the API.

Check out the popup docs for more on the options, methods, and events APIs.

Collapsible Lists

Collapsible lists

We’ve had lots of requests to make collapsible listviews that would reveal a nested listview when a row is tapped. Rather than create a new extension for listviews, we realized we could adapt of existing collapsible widget to do the trick (thanks to sjdecaires for the suggestion).

Now collapsibles have a data-inset option which still defaults to true to keep the current collapsible appearance. When this is set to false, the collapsible goes to the edges of the screen, just like a non-inset listview does. By then placing a listview inside these full width collapsible, we achieve the effect of a collapsible list.

To make what looks like a collapsible list that allows multiple sections to be open at once, stack up a series of individual collapsibles with a listviews inside. To force only one section to be expanded at once, use the collapsible set (accordion) to get this behavior.

We’re really excited to bring this new capability to the library by just adding a single option to the existing plugin set and hope to find similar opportunities to add powerful features with minimal code.

Listview Autodividers

Listview autodividers

Speaking of listivews, we have a cool new feature in 1.2: autodividers. Simply add the data-autodividers attribute to any listview and the framework will automatically add alphabetical list dividers based on the contents of your list.

<ul data-role="listview" data-autodividers="true">

This is especially helpful when generating lists dynamically. Best of all, this feature is designed to work seamlessly with our listview filter extension so dividers will be added and removed to stay in sync with the current set of filtered items.

Read-only Lists: Flat Visual Style

Read-only Listview

We’ve tweaked the design of read-only listviews in 1.2 to make them look less clickable by removing the gradient from the list items and only using the flat background color. It’s a subtle change, but it does help to provide a clearer visual separation between clickable and read-only lists.

Prior to 1.2, read only lists were also given a bit less padding because we figured that these didn’t need to be as touch-friendly as normal, clickable listviews. However, we found that some folks were using listviews with a mixture of linked and non-linked list items and that shift in padding didn’t look right.

We now use the same padding for both read-only and linked list items.

Controlgroup Icon Buttons: Easier to Tap

Controlgroup Icon Buttons

When icon-only buttons were used in controlgroups, they were simply too small to be finger-friendly so in 1.2, we’ve improved the design to increase the padding around the icons to make them easier to tap.

If you still need to smaller style, you can add the data-mini="true" option to the controlgroup or individual buttons to reduce the size of the button groups to be closer to the way they were in 1.1, but they are still large enough to still be usable.

Buttons in Toolbars: Now Mini by Default

Prior to 1.2, link-based buttons were mini by default, but not buttons based on input and button elements. Now, we automatically make these mini sized for visual consistency. If you ever need to revert to larger buttons, that option is available via the data-mini attribute.

All Form Elements: Width Adjustments in Fieldcontainers

Form widths

We recommend that most folks use the fieldcontainer markup pattern when building forms to take advantage of the responsive label styling. This stacks the label above the input at narrow widths and floats it to the left of the input at wider widths to take full use of tablet and desktop devices.

In 1.2, we’ve made some refinements to the design for this pattern to make sure we’re using as much of the horizontal space as possible for the form element. Labels have always been 20% + 2% margin and now the form element widths have been increased from 60% to 78% so they go as full width as possible.

We’ve carefully tested every form element in a wide variety of situations to ensure that the spacing and sizing of each is as consistent as we can for a polished experience.

Touch and vmouse events: Now available for standalone use

We’ve decoupled all of our plugins and have a clear dependency map which allows us to offer the download builder tool (Alpha) to let you build the leanest package possible. However, we heard that some developers just wanted to grab the virtual mouse events that normalize between touch and mouse inputs (vmouse) or the touch events like swipe or touchstart but don’t want to use the rest of the jQuery Mobile library.

In this latest release, we’ve refactored a bit to eliminate the dependency on mobile core for utilities like these. Now if you want to take advantage of just our vmouse events, simply check that box in the download builder and grab the file. Other utilities like orientationchange and throttledresize are also available without the core dependency in the builder.

This additional decoupling is only available if you choose 1.2.0 alpha or latest in the version dropdown of the download builder tool.

Support for jQuery 1.7.2 (and soon 1.8)

jQuery Mobile 1.2 now supports versions 1.6.4, 1.7.1, and 1.7.2 of jQuery core. We recommend that you use 1.7.2 to take advantage of all the improvements in the latest release. We’re working on fully testing 1.8 and hope to support that soon.

Supported Platforms: Always Expanding

Form widths

Our test lab has grown to over 70 phone, e-readers and tablets over the past few years. Luckily, our dedication to web standards and feature detection has meant that most new devices “just work” when they arrive. As of 1.2, we’ve added a few notable A grade platforms into testing rotation: Android 4.1 (Jellybean), Tizen, Firefox for Android.

Please help us test!

We’re looking for help with testing this release so we can release a final build as soon as possible. Browse the docs or try out the 1.2.0 Alpha release in your projects, then report issues in the GitHub tracker. Be sure to specify the device, OS version, browser, steps to reproduce and include a simplified test case that uses the latest build (template here). If all goes well, we hope to release the final build in about 2 weeks.

Change Log

Button

1.2.0-A1
Added padding for icon-only buttons in controlgroup (Issue: #1998)

1.2.0-A1
Adjusted CSS selector for fullsize button in toolbar (Issue: #4619)
- The search input clear button now gets the correct padding when placed in a header or footer.

1.1.2
Link buttons still enhanced in data-enhance=”false” container 
- Link buttons in data-enhance="false" containers now don’t get auto-enhanced.

1.2.0-A1
Make button elements default to mini in header and footer (Issue: #3998)
- All buttons, regardless of markup, are now mini by default in toolbars. This was an implicit behavior in 1.0, but now we automatically make buttons the mini size unless explicitly set to full size when in toolbars to make this work as expected.

1.1.2
Make sure that a disabled select button gets a disabled look on IE/WP 

1.1.2
Only set margin left/right for buttons that are immediate children 
- Avoid margin override of buttons that are part of other widgets.

1.1.2
Rewrote code that adds class ui-submit (Issue: #4642)
- Submit button in header renders correctly now.

CSS

1.2.0-A1
Outline style “auto” for browsers that don’t support box-shadow so it is the same as outline on regular links 

CheckboxRadio

1.2.0-A1
Filter for first label. Fixes label conflict issue (Issue: #3879)
- Fixes the double label issue which was raised if checkboxes or radios had associated more than one label.

Collapsible

1.2.0-A1
Added inset option for Collapsible / Collapsible sets. Adjusted CSS for inset collapsible (removed -8px margin) and added CSS for non-inset collapsibles. (Issue: #3976)
- Collapsibles and Collapsible-Sets now have a new inset option to remove all margins and give them a non-inset listview look.

1.2.0-A1
Added rule that prevents double borders in a serie of individual collapsibles 
- To avoid double borders (top and bottom) in a serie of standalone collapsibles a CSS rule was added that can be easily overwritten if collapsibles with different swatches are used.

1.2.0-A1
Custom collapsible icons 
- Adds the ability to change the icon used for collapsible headers through data-* attributes and prototype options. Content of pages with fixed persistent toolbars higher than standard, now gets the right alignment. Thanks jakeboone02!

1.2.0-A1
Made non-inset listviews exactly fit inside ui-collapsible-content. 

1.2.0-A1
Make sure the collapsibles inherit a theme if nothing is set 
- Collapsibles now show the right hover/button-up/button-down styling.

CollapsibleSet

1.1.2
Changed the refresh function so it first removes data object “collapsible-last” for each item before setting it on the last one. (Issue: #4645)
- Programmatically added collapsibles to a set now get the right corner-bottom styling.

1.1.2
Fix for the corner styling of legends as heading in a collapsible set 
- Legends now can also be used for Collapsible headers

1.2.0-A1
Make sure only one collapsible in a set is expanded at the same time. 
- Improved collapsible set functionality.

Dialog

1.1.2
The rules for dialog sections should only apply to immediate children (Issue: #4699)
- Additional fix for dialog CSS for extended support the new jQuery Mobile download builder tool.

Events

1.1.2
Increased the scrollSupressionThreshold from 10 to 30 pixels (Issue: #2107)
- Change to make the swipe tolerances more forgiving so it doesn’t interfere with scrolling.

Form

1.2.0-A1
Full width forms (Issue: #3301)
- The width of fieldcontainers has been changed from 60% to 78% so the form will be full width now.

Listview

1.1.2
Add a class to set border-bottom on the last LI. Fixes missing border on filtered lists and on browsers that don’t support :last-child (Issue: #4614)

1.1.2
Added support for start attribute on numbered listviews (Issue: #4613)

1.1.2
Fix for inset lists with autodividers didn’t get corner styling 
- Autodividers in inset lists now get the correct corner styling.

1.1.2
Fix for read-only list numbering on browsers that don’t support CSS pseudo classes 

1.2.0-A1
Improved border styling of listview inside collapsible content 
- Improved CSS for listviews and listview filter items inside collapsible content.

1.2.0-A1
Merge branch ‘townxelliot-autodividers’ 
- New Listview option Autodividers. Thanks townxelliot!

1.2.0-A1
New styling for read-only lists (Issue: #4347)
- Adding theming support and new styling for read only lists.

Navbar

1.2.0-A1
Set margin to 0 to avoid the top/bottom margin of .ui-mini being applied 

Navigation

1.2.0-A1
Handle the case where the initial URL contains a non-path hash that points to a non-existing page 

1.2.0-A1
When showing a dialog, do not append dialogHashKey if the URL already contains it (Issue: #2656)

Page

1.2.0-A1
Header buttons: Added “button” to the selector (Issue: #4638)
- Manual added header buttons now placed in the same line as the title.

Select

1.2.0-A1
Add ui-btn-down- to initially focused menu item to make tab selection consistent 

1.1.2
Fix for an issue on Opera Mini where the enhanced select button was visible through the semi-transparent native select 

1.1.2
Set margin 0 for the selectmenu header (Issue: #4699)
- Custom selects now get the proper top-margin when used in a dialog.

Slider

1.1.2
Avoid regression by setting all margins of the slider handle (Issue: #4720)
- Fixes a layout problem of sliders and flip swichtes in controlgroups.

1.2.0-A1
Bind to sliders vmouseup for refresh (Issue: #4756)
- Browsers like Chrome provide an up and down arrow for range/number inputs but they don’t fire the change event until the control is blurred. We now bind to the mouseup event and check if the value has been altered. If it has, we refresh now the slider position to reflect the value change.

1.2.0-A1
Stop the call structure for slider updates earlier on disabled inputs (Issues: #3058 #4770)
- Improved behavior for disabled sliders.

1.2.0-A1
Support slidestart and slidestop events (Issue: #1589)
- Sliders now support slidestart and slidestop events

Textinput

1.1.2
added conditional call to disable() to the create function to make sure disabled elements get class ui-disabled (Issues: #4636 #4637)
- The ui-disabled class will now be added correctly to disabled textinputs.

Toolbar

1.2.0-A1
Fix for fixed persistent toolbar padding issues (Issues: #4176 #4219)
- Content of pages with fixed persistent toolbars higher than standard, now gets the right alignment. Thanks MauriceG!

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

Platform support in 1.2.0 Alpha

jQuery Mobile has broad support for the vast majority of all modern desktop, smartphone, tablet, and e-reader platforms. In addition, feature phones and older browsers are supported because of our progressive enhancement approach. We’re very proud of our commitment to universal accessibility through our broad support for all popular platforms.

A-grade – Full enhanced experience with Ajax-based animated page transitions.

  • Apple iOS 3.2-5.1 - Tested on the original iPad (4.3 / 5.0), iPad 2 (4.3), iPad 3 (5.1), original iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), 4 (4.3 / 5.0), and 4S (5.1)
  • Android 2.1-2.3 – Tested on the HTC Incredible (2.2), original Droid (2.2), HTC Aria (2.1), Google Nexus S (2.3). Functional on 1.5 & 1.6 but performance may be sluggish, tested on Google G1 (1.5)
  • Android 3.1 (Honeycomb)  – Tested on the Samsung Galaxy Tab 10.1 and Motorola XOOM
  • Android 4.0 (ICS)  – Tested on a Galaxy Nexus. Note: transition performance can be poor on upgraded devices
  • Android 4.1 (Jelly Bean)  – Tested on a Galaxy Nexus and Galaxy 7
  • Windows Phone 7-7.5 – Tested on the HTC Surround (7.0) HTC Trophy (7.5), LG-E900 (7.5), Nokia Lumia 800
  • Blackberry 6.0 – Tested on the Torch 9800 and Style 9670
  • Blackberry 7 – Tested on BlackBerry® Torch 9810
  • Blackberry Playbook (1.0-2.0) – Tested on PlayBook
  • Palm WebOS (1.4-2.0) – Tested on the Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0)
  • Palm WebOS 3.0 – Tested on HP TouchPad
  • Firefox Mobile (12 Beta) – Tested on Android 2.3 device
  • Chrome for Android – Tested on Android 4.0, 4.1 device
  • Skyfire 4.1 - Tested on Android 2.3 device
  • Opera Mobile 11.5-12: Tested on Android 2.3
  • Meego 1.2 – Tested on Nokia 950 and N9
  • Tizen (pre-release) – Tested on early hardware
  • Samsung Bada 2.0 – Tested on a Samsung Wave 3, Dolphin browser
  • UC Browser – Tested on Android 2.3 device
  • Kindle 3 and Fire - Tested on the built-in WebKit browser for each
  • Nook Color 1.4.1 – Tested on original Nook Color, not Nook Tablet
  • Chrome Desktop 11-21 - Tested on OS X 10.7 and Windows 7
  • Safari Desktop 4-5 - Tested on OS X 10.7 and Windows 7
  • Firefox Desktop 4-13 – Tested on OS X 10.7 and Windows 7
  • Internet Explorer 7-9 – Tested on Windows XP, Vista and 7
  • Opera Desktop 10-12 - Tested on OS X 10.7 and Windows 7

B-grade – Enhanced experience except without Ajax navigation features.

  • Blackberry 5.0: Tested on the Storm 2 9550, Bold 9770
  • Opera Mini (5.0-6.5) - Tested on iOS 3.2/4.3 and Android 2.3
  • Nokia Symbian^3 - Tested on Nokia N8 (Symbian^3), C7 (Symbian^3), also works on N97 (Symbian^1)

C-grade – Basic, non-enhanced HTML experience that is still functional

  • Blackberry 4.x - Tested on the Curve 8330
  • Windows Mobile - Tested on the HTC Leo (WinMo 5.2)
  • All older smartphone platforms and featurephones – Any device that doesn’t support media queries will receive the basic, C grade experience

Announcing jQuery Mobile 1.1.1

Posted on by

The jQuery Mobile team is excited to announce the release of version 1.1.1.

This is our first maintenance release for version 1.1 and it’s chock full of bug fixes and improvements based on community feedback and testing.

The most notable changes in this release are speedier page transitions and tap responsiveness on longer pages, smoother transitions in Cordova, and more polished form elements.

Alongside this release, the ThemeRoller Mobile tool has been updated to make it easy to upgrade existing themes to 1.1.1. A new downloader builder tool is now released as a public alpha and allows you to build custom versions of jQuery Mobile 1.1.1 that only include the modules you need.

 

jQuery Mobile 1.1.1 Final
Requires jQuery core 1.6.4 or 1.7.1

Demos & Documentation
Quick Start Guide
Download 1.1.1 Zip
Fork on GitHub

 

Key changes | Upgrade notes | Download & CDN | Thanks | Supported Platforms

Key Changes

Slow tap response when clicking items in large listview on mobile devices (Issue #4340) – Slow response times and crashing when clicking on a list item (or any navigation element) far down a long page was due to the browser trying to animate a really massively tall page from the scroll position to the top of the screen. The scroll position, not total screen height, is the determining factor for performance so we added another condition to say that if you’re either coming FROM or going TO a page where the scroll position is 3x the height of the device’s screen, skip the transition (set it to none). This scroll position breakpoint is configurable via the new getMaxScrollForTransition function.

White flash/flicker when transitiong between 2 web pages in Phonegap/Cordova (Issue #4024) – We now add a class while the TO page is being set up for show (block display, focus, scrolling, setting height) called ui-page-pre-in. This class sets the opacity of the TO page to 0 during this momentary process, which at least in my testing, prevents fixed toolbars and pages from flickering during transitions when fixed toolbars are used in a web app mode in iOS (not Safari, but native webview). Fade transition is particularly improved.

Fix for slide flickering within a ios app webview (i.e. Phonegap container) (Also related to issue #4024). Thanks alexksso!

Standardize widths for all buttons and form elements (Issues: #3284, #3983, #3301, #3922, #1998, #2804, #3684, #4252, #4098, #3979, #4263, #4489) – Jasper (uGoMobi) did an incredibly detailed sweep through all the elements to ensure that each widget is as close to the the same width as possible given the constraints of CSS. In addition to width normalization, we tweaked things like count bubble position, button margin consistency, padding for icon-only buttons in controlgroup, etc.

Improvements to link styling to avoid conflicts with generic link styles (Issue #3455) – If a:visited, a:hover are defined, they will break jquery mobile buttons because of the specificity of the styles. Up to now, we only set link styles within a theme swatch but since setting link styles globally is fairly common, this defensive addition will help avoid conflicts with user styles or popular tools like the HTML5 Boilerplate

Select: Custom menu with a placeholder highlights first element although it’s not selected (Issue #4061) – Fixed by filtering placeholders out of the list of selected items Button: Adjusted ui-focus to improve the focus style for grouped buttons

Button: Fixed the icon position of notext buttons in IE7

Button: Not disabled in Internet Explorer (Issue #3558) – Conditionally add a live handler to kill clicks on .ui-disabled elements when CSS pointer-events property is not supported.

Added Modernizr’s feature test for CSS pointer-events property Select: Custom select menu accessibility with keyboard (Issue #4039)

Button: Invalid opacity value (Issue #4413) – Corrected invalid value for filter alpha opacity. Thanks Alexn!

Slider: Fill feature disappears on pagehide (Issue #3887)

Fixed headers: UpdatePagePadding() and default ui-page-header causes slight jump (Issue #4412) – Adjusted default top/bottom padding for page with fixed toolbars.

Added box-sizing border-box to grid blocks so they don’t break when padding or border is set (note: not supported by IE7)

Grid: Adjustments to grid-b and -c to fix BB Storm and Curve issues. Adjustments to percentages for older browsers (wrapping still occured on IE7 on certain screen widths).

Navbar: Mini styling for navbar with adjusted padding top and bottom. Set right border on last button when not in toolbar. Navbar: Button sub-pixel problem (Issue #3341) – Filled gap caused by subpixel problem with negative margin.

Navbar: Items wrapping in IE7 BB5 (Issue #2270 and #2159) Adjusted grid blocks percentage width to prevent wrapping on older browsers and set it back for modern browsers, including minor adjustment to fix BB5 issue.

Added “button” element to tapToggleBlacklist Prevent scrollbars on pages with custom borders – take custom borders in account on the page when setting the min-height. Thanks ngharo!

Header: Visual issues in IE7 (Issue #4193) – Added zoom 1 to trigger HasLayout on toolbars for IE

Slide Transition with Fixed Header in App visual artifacts (Issue #4418) – We now include padding for the fixed toolbars in the 100% height of ui-mobile-viewport-transitioning element

Form: form hijacking not respecting allowCrossDomainPages (Issue #2234) – check external urls against the cross domain pages setting

Navigation: dialogHashKey is now stripped from url even if it is not an embedded page in convertUrlToDataUrl

Navigation: Support the case where the initial url contains a dialog hash key Performance improvement for getInheritedTheme – Thanks hpbuniat!

Button: Text is now prevented from being selected – for a cleaner interaction, this can be tweaked via CSS if needed

Navigation: When the initial page has a dialogHashKey, navigation breaks after link-click followed by “Back” (Issue #4423) – Handle corner case where first visited page has a dialog hash key

Slider: label ID gets overwritten (Issue #3981) – Now we create an ID for the label only if not present

Init: Proceed to hashchange handler when the initial hash contains a path – This covers cases where the hash is a path

Navigation: Bad URLs with hashes are not gracefully handled (Issue #4119) – Added regex test to see if hash is valid and if a page with that ID exists, if not load the first page.

Listview: data-mini=”true” attribute should be ignored (Issue #4114) – Mini listviews are both difficult to tap accurately and have too many complex styles to support at two sizes

Slider: Custom Active Button Class does work (Issue #4345) Listview: selects + buttons inherit wrong font-size in list with form (Issue #4254) - Thanks ebaranov!

Listview: When leaving from a page contains nested listview, pageremove event does not fire (Issue #4185)

Input buttons of type=image not rendering properly (Issue #3423) – Fixed by setting -webkit-appearance: none; on this type. This input type is no longer auto-enhanced unless a data-role=”button” is added in the markup.

Checkbox – Corner styling of inserted checkbox incorrect when in controlgroup (Issue #3496)

Can not disable ‘push state’ plugin when jQM loaded via require.js (Issue #4136) – We now call init when both mobileinit and domready have happened instead of just domready.

Dialog: navigation incorrect if certain flags are set (Issue #4320) – if hash manipulation is off, the dialog hash key is not added when the dialog appears, and the dialog’s close button does a window.history.back() by default. This causes the browser to go back to the page before the one that launched the dialog. Now when hashListeningEnabled is not set, use urlHistory to go back from the dialog

Listview: links embedded in list dividers shouldn’t be auto enhanced into buttons Related tweak here

Collapsible – add active state on tap for better visual feedback (Issue #4229)

Listviews: Button+data-iconpos=”notext” formatting issue (Issue #4227) – Style tweaks for better layout

Dialog: Double click on dialog close btn cause double back (Issue #3387) – Prevent the click-handler for “Close” acting twice

Keep urlHistory in sync with browser history even when moving to/from a #&ui-state=dialog link via Back/Forward buttons- Nav improvement

Forward history + dialog navigation issues (Issue #2656) – Do not change hash nor add history entry when displaying a dialog at a history entry that already has dialogHashKey

CollapsibleSet widget removes ui-corner-x classes from the whole DOM (Issue #4062) – removed add() function which queries the whole DOM. Thanks @MauriceG

Upgraded widget factory from jQuery UI 1.9m7 (issue #3544) – Brings a host of improvements, including widget subclassing fixes.

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.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

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

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

A Word of Thanks

We’d like to thank the community contributors and supporters for their incredible dedication to the project by contributing issue reports, bug fixes and support.

Our corporate sponsors have been essential to our success and donating developer time on an ongoing basis is a really useful way to help the project. We’d like to thank Adobe for donating multiple developers (John Bender, Tyler Benziger, Kin Blas), Filament Group (Todd Parker, Scott Jehl, Mat Marquis), Jive Software (Ghislain Seguin), Microsoft (Sergey Grebnov), and RIM (Jason Scott), uGoMobi (Jasper DeGroot), Intel (Gabriel Schulhof) as well as individual contributions from Anne-Gaelle Colom and Maurice Gottlieb who generously donate long-term development support to the project.

We’d like to thank all our corporate sponsors for contributing generously to the project to support this release. We’d also like to thank the various companies and individuals who have donated test devices to the project. Please donate devices to our test lab to help us better support all platforms.

If you are interested in giving back to the project, please contact Todd Parker.

Platform support in 1.1.1

jQuery Mobile has broad support for the vast majority of all modern desktop, smartphone, tablet, and e-reader platforms. In addition, feature phones and older browsers are supported because of our progressive enhancement approach. We’re very proud of our commitment to universal accessibility through our broad support for all popular platforms.

We use a 3-level graded platform support system: A (full), B (full minus Ajax), C (basic HTML). The visual fidelity of the experience and smoothness of page transitions are highly dependent on the CSS rendering capabilities of the device and platform so not all A grade experience will be pixel-perfect but that’s the nature of the web.

A-grade – Full enhanced experience with Ajax-based animated page transitions.

  • Apple iOS 3.2-5.1 – Tested on the original iPad (4.3 / 5.0), iPad 2 (4.3), iPad 3 (5.1), original iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), 4 (4.3 / 5.0), and 4S (5.0)
  • Android 2.1-2.3 – Tested on the HTC Incredible (2.2), original Droid (2.2), HTC Aria (2.1), Google Nexus S (2.3). Functional on 1.5 & 1.6 but performance may be sluggish, tested on Google G1 (1.5)
  • Android 3.1 (Honeycomb) – Tested on the Samsung Galaxy Tab 10.1 and Motorola XOOM
  • Android 4.0 (ICS) – Tested on a Galaxy Nexus. Note: transition performance can be poor on upgraded devices
  • Windows Phone 7-7.5 – Tested on the HTC Surround (7.0) HTC Trophy (7.5), LG-E900 (7.5), Nokia Lumia 800
  • Blackberry 6.0 – Tested on the Torch 9800 and Style 9670
  • Blackberry 7 – Tested on BlackBerry® Torch 9810
  • Blackberry Playbook (1.0-2.0) – Tested on PlayBook
  • Palm WebOS (1.4-2.0) – Tested on the Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0)
  • Palm WebOS 3.0 – Tested on HP TouchPad
  • Firefox Mobile (10 Beta) – Tested on Android 2.3 device
  • Chrome for Android (Beta) – Tested on Android 4.0 device
  • Skyfire 4.1 – Tested on Android 2.3 device
  • Opera Mobile 11.5-12: Tested on Android 2.3
  • Meego 1.2 – Tested on Nokia 950 and N9
  • Samsung bada 2.0 – Tested on a Samsung Wave 3, Dolphin browser
  • UC Browser – Tested on Android 2.3 device
  • Kindle 3 and Fire – Tested on the built-in WebKit browser for each
  • Nook Color 1.4.1 – Tested on original Nook Color, not Nook Tablet
  • Chrome Desktop 11-19 – Tested on OS X 10.7 and Windows 7
  • Safari Desktop 4-5 – Tested on OS X 10.7 and Windows 7
  • Firefox Desktop 4-13 – Tested on OS X 10.7 and Windows 7
  • Internet Explorer 7-9 – Tested on Windows XP, Vista and 7
  • Opera Desktop 10-12 – Tested on OS X 10.7 and Windows 7

B-grade – Enhanced experience except without Ajax navigation features.

  • Blackberry 5.0: Tested on the Storm 2 9550, Bold 9770
  • Opera Mini (5.0-6.5) – Tested on iOS 3.2/4.3 and Android 2.3
  • Nokia Symbian^3 - Tested on Nokia N8 (Symbian^3), C7 (Symbian^3), also works on N97 (Symbian^1)

C-grade – Basic, non-enhanced HTML experience that is still functional

  • Blackberry 4.x – Tested on the Curve 8330
  • Windows Mobile – Tested on the HTC Leo (WinMo 5.2)
  • All older smartphone platforms and featurephones – Any device that doesn’t support media queries will receive the basic, C grade experience

jQuery Mobile Download Builder – Alpha Release

Posted on by

Reducing file size and overhead is really important on mobile devices so we’ve always wanted to offer a download builder tool to let developers create a bundle of only the jQuery Mobile code they need for a particular project.

That’s why we’re happy to announce an alpha version of our download builder tool. It allows you to choose the specific widgets, features, and transitions you want to include in your project. The tool then produces a  zip file containing customized CSS and JavaScript files for the components you select.

Try the download builder

This is an alpha release so please help us improve the tool by reporting issues in the GitHub tracker.

 

 

 

Announcing jQuery Mobile 1.1.1 RC1

Posted on by

The jQuery Mobile team is excited to announce the first maintenance release candidate for version 1.1.1. Since we launched 1.1.0 in April, we’ve been hard at work fixing bugs, listening to feedback and polishing the documentation. We encourage the community to help us test and shake out any final bugs before we release the final version in the upcoming weeks. Try it now!

Demos & docs | Key changes | Download & CDN | Supported Platforms

Please help us test!

We’re looking for help with testing this release so we can release a final build as soon as possible. Browse the docs or try out the 1.1.1 RC1 release in your projects, then report issues in the GitHub tracker. Be sure to specify the device, OS version, browser, steps to reproduce and include a simplified test case that uses the latest build (template here) – more info.

Key Changes

Slow tap response when clicking items in large listview on mobile devices (Issue #4340) – Slow response times and crashing when clicking on a list item (or any navigation element) far down a long page was due to the browser trying to animate a really massively tall page from the scroll position to the top of the screen. The scroll position, not total screen height, is the determining factor for performance so we added another condition to say that if you’re either coming FROM or going TO a page where the scroll position is 3x the height of the device’s screen, skip the transition (set it to none). This scroll position breakpoint is configurable via the new getMaxScrollForTransition function.

White flash/flicker when transitiong between 2 web pages in Phonegap (Issue #4024) – We now add a class while the TO page is being set up for show (block display, focus, scrolling, setting height) called ui-page-pre-in. This class sets the opacity of the TO page to 0 during this momentary process, which at least in my testing, prevents fixed toolbars and pages from flickering during transitions when fixed toolbars are used in a web app mode in iOS (not Safari, but native webview). Fade transition is particularly improved.

Fix for slide flickering within a ios app webview (i.e. phonegap container) (Also related to issue #4024). Thanks alexksso!

Standardize widths or all buttons and form elements (Issues: #3284, #3983, #3301, #3922, #1998, #2804, #3684, #4252, #4098, #3979, #4263, #4489) – Jasper (uGoMobi) did an incredibly detailed sweep through all the elements to ensure that each widget is as close to the the same width as possible given the constraints of CSS. In addition to width normalization, we tweaked things like count bubble position, button margin consistency, padding for icon-only buttons in controlgroup, etc.

All buttons, regardless of markup, are now mini by default in toolbars – This was an implicit behavior in 1.0, but now we automatically make buttons the mini size unless explicitly set to full size when in toolbars to make this work as expected.

Improvements to link styling to avoid conflicts with generic link styles (Issue #3455) – If a:visited, a:hover are defined, they will break jquery mobile buttons because of the specificity of the styles. Up to now, we only set link styles within a theme swatch but since setting link styles globally is fairly common, this defensive addition will help avoid conflicts with user styles or popular tools like the HTML5 Boilerplate

Select: Custom menu with a placeholder highlights first element although it’s not selected (Issue #4061) – Fixed by filtering placeholders out of the list of selected items Button: Adjusted ui-focus to improve the focus style for grouped buttons

Button: Fixed the icon position of notext buttons in IE7

Button: Not disabled in Internet Explorer (Issue #3558) – Conditionally add a live handler to kill clicks on .ui-disabled elements when CSS pointer-events property is not supported.

Added Modernizr’s feature test for CSS pointer-events property Select: Custom select menu accessibility with keyboard (Issue #4039)

Button: Invalid opacity value (Issue #4413) – Corrected invalid value for filter alpha opacity. Thanks Alexn!

Slider: Fill feature disappears on pagehide (Issue #3887)

Fixed headers: UpdatePagePadding() and default ui-page-header causes slight jump (Issue #4412) – Adjusted default top/bottom padding for page with fixed toolbars.

Added box-sizing border-box to grid blocks so they don’t break when padding or border is set (note: not supported by IE7)

Grid: Adjustments to grid-b and -c to fix BB Storm and Curve issues. Adjustments to percentages for older browsers (wrapping still occured on IE7 on certain screen widths).

Navbar: Mini styling for navbar with adjusted padding top and bottom. Set right border on last button when not in toolbar. Navbar: Button sub-pixel problem (Issue #3341) – Filled gap caused by subpixel problem with negative margin.

Navbar: Items wrapping in IE7 BB5 (Issue #2270 and #2159) Adjusted grid blocks percentage width to prevent wrapping on older browsers and set it back for modern browsers, including minor adjustment to fix BB5 issue.

Added “button” element to tapToggleBlacklist Prevent scrollbars on pages with custom borders – take custom borders in account on the page when setting the min-height. Thanks ngharo!

Header: Visual issues in IE7 (Issue #4193) – Added zoom 1 to trigger HasLayout on toolbars for IE

Slide Transition with Fixed Header in App visual artifacts (Issue #4418) – We now include padding for the fixed toolbars in the 100% height of ui-mobile-viewport-transitioning element

Form: form hijacking not respecting allowCrossDomainPages (Issue #2234) – check external urls against the cross domain pages setting

Navigation: dialogHashKey is now stripped from url even if it is not an embedded page in convertUrlToDataUrl

Navigation: Support the case where the initial url contains a dialog hash key Performance improvement for getInheritedTheme – Thanks hpbuniat!

Button: Text is now prevented from being selected – for a cleaner interaction, this can be tweaked via CSS if needed

Navigation: When the initial page has a dialogHashKey, navigation breaks after link-click followed by “Back” (Issue #4423) – Handle corner case where first visited page has a dialog hash key

Slider: label ID gets overwritten (Issue #3981) – Now we create an ID for the label only if not present

Init: Proceed to hashchange handler when the initial hash contains a path – This covers cases where the hash is a path

Navigation: Bad URLs with hashes are not gracefully handled (Issue #4119) – Added regex test to see if hash is valid and if a page with that ID exists, if not load the first page.

Listview: data-mini=”true” attribute should be ignored (Issue #4114) – Mini listviews are both difficult to tap accurately and have too many complex styles to support at two sizes

Slider: Custom Active Button Class does work (Issue #4345) Listview: selects + buttons inherit wrong font-size in list with form (Issue #4254) - Thanks ebaranov!

Listview: When leaving from a page contains nested listview, pageremove event does not fire (Issue #4185)

Input buttons of type=image not rendering properly (Issue #3423) – Fixed by setting -webkit-appearance: none; on this type. This input type is no longer auto-enhanced unless a data-role=”button” is added in the markup.

Checkbox – Corner styling of inserted checkbox incorrect when in controlgroup (Issue #3496)

Can not disable ‘push state’ plugin when jQM loaded via require.js (Issue #4136) – We now call init when both mobileinit and domready have happened instead of just domready.

Dialog: navigation incorrect if certain flags are set (Issue #4320) – if hash manipulation is off, the dialog hash key is not added when the dialog appears, and the dialog’s close button does a window.history.back() by default. This causes the browser to go back to the page before the one that launched the dialog. Now when hashListeningEnabled is not set, use urlHistory to go back from the dialog

Listview: links embedded in list dividers shouldn’t be auto enhanced into buttons Related tweak here

Collapsible – add active state on tap for better visual feedback (Issue #4229)

Listviews: Button+data-iconpos=”notext” formatting issue (Issue #4227) – Style tweaks for better layout

Dialog: Double click on dialog close btn cause double back (Issue #3387) – Prevent the click-handler for “Close” acting twice

Keep urlHistory in sync with browser history even when moving to/from a #&ui-state=dialog link via Back/Forward buttons- Nav improvement

Forward history + dialog navigation issues (Issue #2656) – Do not change hash nor add history entry when displaying a dialog at a history entry that already has dialogHashKey

CollapsibleSet widget removes ui-corner-x classes from the whole DOM (Issue #4062) – removed add() function which queries the whole DOM. Thanks @MauriceG

Upgraded widget factory from jQuery UI 1.9m7 (issue #3544) – Brings a host of improvements, including widget subclassing fixes.

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.1.1-rc.1/jquery.mobile-1.1.1-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1-rc.1/jquery.mobile-1.1.1-rc.1.min.js"></script>

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

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

Platform support in 1.1.1 RC1

jQuery Mobile has broad support for the vast majority of all modern desktop, smartphone, tablet, and e-reader platforms. In addition, feature phones and older browsers are supported because of our progressive enhancement approach. We’re very proud of our commitment to universal accessibility through our broad support for all popular platforms.

We use a 3-level graded platform support system: A (full), B (full minus Ajax), C (basic HTML). The visual fidelity of the experience and smoothness of page transitions are highly dependent on the CSS rendering capabilities of the device and platform so not all A grade experience will be pixel-perfect but that’s the nature of the web.

A-grade – Full enhanced experience with Ajax-based animated page transitions.

  • Apple iOS 3.2-5.1 – Tested on the original iPad (4.3 / 5.0), iPad 2 (4.3), iPad 3 (5.1), original iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), 4 (4.3 / 5.0), and 4S (5.0)
  • Android 2.1-2.3 – Tested on the HTC Incredible (2.2), original Droid (2.2), HTC Aria (2.1), Google Nexus S (2.3). Functional on 1.5 & 1.6 but performance may be sluggish, tested on Google G1 (1.5)
  • Android 3.1 (Honeycomb) – Tested on the Samsung Galaxy Tab 10.1 and Motorola XOOM
  • Android 4.0 (ICS) – Tested on a Galaxy Nexus. Note: transition performance can be poor on upgraded devices
  • Windows Phone 7-7.5 – Tested on the HTC Surround (7.0) HTC Trophy (7.5), LG-E900 (7.5), Nokia Lumia 800
  • Blackberry 6.0 – Tested on the Torch 9800 and Style 9670
  • Blackberry 7 – Tested on BlackBerry® Torch 9810
  • Blackberry Playbook (1.0-2.0) – Tested on PlayBook
  • Palm WebOS (1.4-2.0) – Tested on the Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0)
  • Palm WebOS 3.0 – Tested on HP TouchPad
  • Firefox Mobile (10 Beta) – Tested on Android 2.3 device
  • Chrome for Android (Beta) – Tested on Android 4.0 device
  • Skyfire 4.1 – Tested on Android 2.3 device
  • Opera Mobile 11.5-12: Tested on Android 2.3
  • Meego 1.2 – Tested on Nokia 950 and N9
  • Samsung bada 2.0 – Tested on a Samsung Wave 3, Dolphin browser
  • UC Browser – Tested on Android 2.3 device
  • Kindle 3 and Fire – Tested on the built-in WebKit browser for each
  • Nook Color 1.4.1 – Tested on original Nook Color, not Nook Tablet
  • Chrome Desktop 11-19 – Tested on OS X 10.7 and Windows 7
  • Safari Desktop 4-5 – Tested on OS X 10.7 and Windows 7
  • Firefox Desktop 4-13 – Tested on OS X 10.7 and Windows 7
  • Internet Explorer 7-9 – Tested on Windows XP, Vista and 7
  • Opera Desktop 10-12 – Tested on OS X 10.7 and Windows 7

B-grade – Enhanced experience except without Ajax navigation features.

  • Blackberry 5.0: Tested on the Storm 2 9550, Bold 9770
  • Opera Mini (5.0-6.5) – Tested on iOS 3.2/4.3 and Android 2.3
  • Nokia Symbian^3 - Tested on Nokia N8 (Symbian^3), C7 (Symbian^3), also works on N97 (Symbian^1)

C-grade – Basic, non-enhanced HTML experience that is still functional

  • Blackberry 4.x – Tested on the Curve 8330
  • Windows Mobile – Tested on the HTC Leo (WinMo 5.2)
  • All older smartphone platforms and featurephones – Any device that doesn’t support media queries will receive the basic, C grade experience

Announcing jQuery Mobile 1.1.0

Posted on by

The jQuery Mobile team is excited to announce the release of version 1.1.0.

This release has been a real labor of love, with hundreds of improvements, big and small, to make jQuery Mobile feel faster, smoother and more polished across the board.

The most notable improvements in 1.1.0 are true fixed toolbars, completely re-vamped animated page transitions and AJAX loader, refined form element design and feature set, and improved documentation.

To make the upgrade process from 1.0 to 1.1 smooth for our existing developers, we’re also launching a new ThemeRoller Mobile tool that supports both versions and makes it easy to import a 1.0 theme and migrate it to 1.1. A new downloader builder tool is almost ready and will be in limited alpha next week.

 

jQuery Mobile 1.1.0 Final
Requires jQuery core 1.6.4 or 1.7.1

Demos & Documentation
Quick Start Guide
Download 1.1.0 Zip
Fork on GitHub

 

Key changes | Upgrade notes | Thanks | Download & CDN | Supported Platforms | Change log

KEY CHANGES

True fixed toolbars: Lightweight, CSS-based & broadly compatible

Browser support for fixed toolbars

  • iOS5 – iPhone and iPad
  • Android 2.2 and 2.3
  • Android 3.x tablets (Honeycomb)
  • Android 4.x (ICS)
  • Chrome for Android (beta)
  • BB Playbook 1-2
  • BB7
  • Nook Color/Tablet
  • Kindle Fire
  • Kindle 3
  • All modern desktop browsers (IE, Firefox, Safari, Chrome, etc.)

When we first started developing the library, CSS support for position:fixed in mobile platforms was pretty much non-existent so our “fixed” toolbar solution dynamically re-positioned the toolbars each time you scrolled the page. Although it was a decent stopgap, the way mobile browsers would freeze the DOM during scroll would result in the toolbars briefly scrolling with the document which was impossible to completely fix. Alternate approaches use JavaScript-based momentum scrollers to achieve true fixed toolbars, but these only work on a small subset of platforms, have non-native scrolling physics, and can introduce performance and usability issues in less capable devices. None of this was an acceptable option for this project.

Luckily, around the time we released 1.0, Brad Frost posted his results of extensive tests of position:fixed on mobile browsers. Surprisingly,  support is now quite good  so we set about prototyping and testing a CSS-based replacement for our fixed toolbars.

We now have a solid re-write that provides true fixed toolbars on the a lot of popular platforms and safely falls back to static toolbar positioning in other browsers.

The coolest part about this approach is that, unlike JS-based solutions that impose the unnatural scrolling physics across all platforms, our scrolling feels 100% native because it *is*. This means that scrolling feels right everywhere and works with touch, mousewheel and keyboard user input. As a bonus, our CSS-based solution is super lightweight and doesn’t impact compatibility or accessibility.

The new fixed toolbars also have a robust set of options and methods you can tap into to customize the behavior such as whether toolbars are visible on page load, whether the tap to toggle toolbar feature is enabled, toggle transition (defaults to slide up/down)

Optional backwards-compatible polyfill fixed toolbars

Since we’re removing the 1.0-era fixed toolbar re-positioning script, some platforms like iOS 4 will now fall back to static positioning where the toolbars simply scroll with the page. We believe that the crisp divide in 1.1 where fixed toolbars either work perfectly or fall back to simply scrolling with the page is a smart approach. However, we heard from some people that that even though the older, dynamic re-positioning behavior wasn’t perfect, it was still something they wanted the option to use.

We re-worked the 1.0 re-positioning script to work as an extension to the new 1.1 fixed toolbars for RC2. When this extension is added, it adds the 1.0-style fixed toolbars for browsers that don’t support position:fixed but can handle dynamic re-positioning. To add the 1.0-style toolbar polyfill, just include the CSS and JS files after your references to jQuery Mobile and fixed toolbars will work similar to jQuery Mobile 1.0 in iOS 4.x and other, older platforms.

Since this polyfill adds a code weight and maintenance complexity for a fairly small slice of users, we’ve decided to release this polyfill as an optional extension that is outside the core jQuery Mobile library. This means that the codebase won’t be included as part of the jQuery Mobile package and won’t be maintained on the same schedule as the library. We’ll continue to refine this plugin in the Filament Group repo so help us test this and log issues in the tracker.

Improved transitions: Smoother, faster

Our AJAX navigation system is one of the best things about jQuery Mobile because it makes page navigation faster and adds animated page transitions. We did a ton of work leading up to 1.0 to make our transitions as smooth as possible, but there were two significant things that turned out to very difficult: the need to scroll the page between transitions and Android’s poor animation performance.

First, we have a hard constraint that both the page you’re on and the page you’re animating to are both sitting on the same viewport — we animate and scroll the viewport to achieve the transition effect. This means that if you are scrolled down on a page and click a link, we need to first scroll to the top of the page, then begin the transition (yeah, we tried every CSS trick to avoid scrolling, none work well on longer pages or Android). Since we also restore your scroll position if you go back, we may need to scroll up, transition, then scroll down to restore your scroll position. On mobile devices, scrolling is pretty slow so you’d see the page scroll by then stop at the top which can make things feel jumpy.

Because we don’t have widespread CSS support for overflow:auto on mobile browsers and aren’t satisfied with the limitation of JS-based scrollers, we had to think creatively. For 1.1, we embraced the scroll jump constraint and shuffled the sequence of the page transition JS handler to first fade out the current page, then scroll the page into position before transitioning in the new page. Since we’re scrolling a blank page, it scrolls faster and the scroll jump is invisible so things feel much more controlled and smooth. As a bonus, the fade out/in animation is impressively smooth and blink-free on every platform. This does mean that every transition has a place where we need to fade out a screen to accomodate the scroll jump, but we think this still looks pretty sharp.

On the second topic, I won’t mince words here: Android as a whole has abysmal performance rendering CSS keyframe animations. Regardless of version or device, Android devices stutter, drop frames and blink when performing any page page animation other than a simple fade.

Post-1.0, we went back to the drawing board to investigate exactly what combination of CSS properties caused the most issues so we could re-vamp our transitions to be as easy on Android as possible. We found that most common things we wanted to do like animating size or position along with opacity would cause blinks, missing animations and odd opacity rendering on box-shadows. With this in mind, we spent weeks testing on a wide range of Android-based devices to arrive at a set of minimal transitions that would be as non-taxing as possible.

Unfortunately, after a ton of work, we’ve determined that it’s not possible to dumb down page transitions enough to get acceptable performance in Android 2.x, even on a newer device like a Nexus S running 2.3. After a lot of deliberation, we’ve decided to use a feature test for 3D transforms to target transitions: if a browser passes, it will see the full range of transitions. By default, if a browser fails this 3D test, they will fall back to a fade transition, regardless of the transition specified. All Android 1.x-2.x devices fail this test but Android 3.x and 4.x pass. The fallback behavior for each transition is completely configurable if you want to change this behavior.

TL;DR: The default page transition is now be a super fast and smooth fade out/in animation. All the 1.1 page transitions have been tweaked to have a place it the animation where we fade out to accomodate the scroll jump, but we think this looks pretty sharp and always in control. On some platforms like Android 2.x that don’t support 3D effects, the simpler fade transition will be the only game in town, regardless of the transition specified. View the new 1.1 page transitions.

Two new transitions in 1.1: Turn and Flow.

In addition to re-vamping all the 1.0 transitions, we’ve added a turn transition that is similar to the WP Metro style page effect and a flow transition that is bit like the iOS tab switching transition where pages zoom in and out. Both look great on platforms such as iOS and Blackberry PlayBook that support 3D.

Multiple transition sequences now supported: Fade and slidefade

The “slide” transition lost some of it’s mojo in 1.1 RC1 because the fade out we do before sliding in the new page definitely changes the effect. We heard that some folks wanted the option to still use the 1.0 style slide, despite the scroll jump, and were chatting in the forums about to how hack this back in. Because the underlying sequence of events is completely different in 1.1, bringing back the 1.0 slide transition is not simply a matter of dropping in the 1.0 keyframe animation CSS. This was situation where we listened carefully to feedback and decided to re-think our plans in order to make 1.1 work well for everyone, even if it delayed our release a bit.

We’re happy to announce that there is now a way to define a transition handler sequence: sync (1.0-style) and async (1.1-style) when authoring a new transition. In RC2, the slide transition now uses the 1.0-style sync handler, and a new slidefade transition uses the 1.1-style async handler. This paves the way for users to port other 1.0 transitions into 1.1, or create their own custom transitions that can leverage either of the these handler types.

Firefox support for transitions

Yep, we’ve added -moz prefixed rules for all the page transitions to bring support to newer versions of Firefox desktop and (hopefully) a future build of Firefox mobile. We will continue to add vendor-prefixed rules for Opera, IE, etc. as these browsers gain support prove they have support with acceptable performance. Vendor prefixes add a lot of code when working with CSS keyframe animations so we want to add these only when supported to keep the file sizes down.

Default theme cleanup

We’ve made lots of small tweaks to the default theme to make it tighter and brighter overall. No detail was overlooked: the focus style is now stronger for keyboard navigation, and contrast has been adjusted for platforms like WP7 that don’t support gradients.

New AJAX loader design and options

As we revisited page transitions, we found that a more subtle loader design actually  made the navigation feel faster so we re-designed the loader to be as minimal as possible and ended up with a light spinner image with no text to keep things simple. Hoever, we understand that there will be times when you do need to display text along with the loader so we’ve beefed up the loader to be much more flexible. There are now a few new global options that let you set whether you want to see the text, loader or both and set the theme or text at runtime. For example, this will show the loader with theme A and a custom message: $.mobile.showPageLoadingMsg("a", "Loading theme a...");. View a demo of these new loader options in the docs.

Related: TouchOverflow feature to be deprecated in 1.1

We introduced the experimental touchOverflow feature in 1.0 because it made our transitions smoother and brought true fixed toolbars in iOS5. This came at the cost of code complexity and a lot of CSS rendering bugs due to Apple’s buggy implementation. Now with our new fixed header and transitions approach, we don’t see any viable use case for this feature so we’re deprecating it at 1.1.0.  Deprecation here simply means no errors are going to be thrown by its removal: we will keep our $.support and $.mobile.touchOverflowEnabled properties defined to avoid throwing issues in custom code that leveraged this feature.

Support for jQuery 1.7.1

jQuery Mobile 1.1.0 now supports both 1.6.4 and 1.7.1 versions of jQuery core. We recommend that you use 1.7.1 to take advantage of all the great improvements in the latest release. If you stick with 1.0.1 for a while, remember that only supports 1.6.4. We’re still testign 1.7.2 and will officially support that in a future release.

Mini form elements

As we worked on fixed toolbars, we started to test the rendering of form controls in headers and footers and in 1.0, things were a bit broken. In 1.1, we’ve spent a lot of time tweaking the form elements so they will render nicely in toolbars but the standard versions seemed a bit big in toolbars.

We had a smaller button style already hard-coded in headers so we used the vertical height of that button as a basis for a new “mini” version of all our form elements (buttons, selects, inputs, sliders, switches, etc.).

By adding the data-mini="true" attribute to these elements, the more compact version will be displayed which is perfect for toolbars. The image on the right compares the standard vs. mini versions of each element.

Flip switch: Improved design


As we started to look at our form elements, the flip switch seemed like it could use a bit of visual cleanup. We looked across popular mobile platforms and they all seemed to use a pretty consistent design that used a smaller handle to maximize horizontal space for the text. In 1.1, we’ve tweaked the design to use a round handle (or square, depending on your theme) for the flip switch and re-vamped the underlying code to make it more robust.

Slider: Highlight feature

We also added a feature to add a track highlight from the left of the track to the slider position. Just activate the highlight feature, add data-highlight="true" attribute to the range input.

Slider: Step attribute support

The step attribute is part of the HTML5 range input spec and allows you to specify the increment the slider handle must move. This defaults to 1, but now you can specify the step to slide by increments (step="25") and the handle will snap to these points. If a value in entered into the numeric input next to the slider that is outside the steps, it will round to the closest one. We borrowed this code from the jQuery UI project so thanks guys.

Zoom fixes: orientation change iOS bug and select/input zoom

If you wanted to avoid the page zooming in oddly when you rotated an iOS device into landscape mode, you needed to disable user zooming via the viewport meta tag. However, we think that it’s nice to keep user zooming enabled if at all possible so after a lot of tinkering, Scott Jehl came up with a clever hack that uses accelerometer data to determine if a device is in the process of being rotated. If it is, we temporary disable zooming to avoid the orientation bug, then quickly restore it. We’ve created a new utility (zoom.iosorientationfix.js) in jQuery Mobile that uses this technique to fix the iOS orientationchange zoom bug.

There is another utility zoom.iosfocusfix.js, which disables zoom as a select or input element is focused, preventing iOS from zooming into that element and cropping the viewport. Zoom is restored just after the focus event fires (a half second timeout).

We added a general utility: $.mobile.zoom, which as 3 members: enabled [bool], disable [function], and enable [function]. This simple utility is used to disable user scaling in devices like iOS. The disable() method disables user-scaling. The enable() method enables user-scaling. The enabled property keeps track of state. This utility is used by the two features above and can be used in custom scripting events as well.

data-enhance=false data attribute

As of jQuery Mobile 1.0, all the markup within a page is scanned for elements to be enhanced. This is problematic for 3rd party widgets/libraries that don’t want anybody enhancing their markup or attaching behavior. We heard requests for a data-* attribute that can be place on an element container to tells the framework not to enhance anything inside it for these situations. In 1.1, we’ve added a new data-enhance=false attribute that can be added to a container to prevent both auto-initialization and link/form hijacking. This is also available via $.fn.jqmEnhanceable. It’s important to note that because of the performance impact incurred by finding a parent element with the data-enhance=false attribute this feature must be turned on explicitly with $.mobile.ignoreContentEnabled=true.

data-ajax=false now works on containers

On a related topic, we’ve always offered the ability to disable the AJAX navigation system from hijacking a link or form submit via the data-ajax="false" attribute, but people have asked for a way to apply this exclusion more efficiently to a grouping of links. In 1.1, this is now possible by simply adding, and setting $.mobile.ignoreContentEnabled=true, the data-ajax attribute to a parent container and it will exclude all the parent link or forms from the AJAX navigation system behavior.

New docs navigation and search

We spend quite a bit of time refining our docs and we think they are pretty solid. However, there are now a lot of pages and it can be hard to find what you need simply by browsing around.

For 1.1 we’ve added a button in the upper right corner of every page that opens a searchable sitemap that contains an alphabetized list of pages in a filterable listview. Although this isn’t a true site search, we’ve used the hidden filtertext feature to load up each list item with a rich set of keywords you might be looking for. We plan on making some larger docs changes in future releases, but this seemed like a nice addition to the docs.

AMD module support

In jQuery Mobile, we’re using AMD to express dependencies between the different modules for the build scripts and to support our in-progress download builder tool. However we strip out all the AMD overhead in the final source files. It will export an anonymous AMD module if an AMD loader is present, the same way jQuery Core does it. Special thanks to James Burke (@jrburke) for jumping in and helping us polish our AMD implementation.

New ThemeRoller: Upgrade your 1.0 theme to 1.1

We’ve improved our ThemeRoller tool to let you seamlessly switch your theme between versions of jQuery Mobile. If you have a 1.0 theme you’d like to upgrade to 1.1.0, click the Import button, paste in your uncompressed 1.0 theme, then tweak and download the 1.1 version. It’s that easy.


Custom Download Builder: Coming soon

We’ve been hard at work designing and building a tool to let you build custom jQuery Mobile builds that only include the features you need. The download builder creates a zip file with custom builds of the jQuery Mobile JavaScript and CSS files based on what widgets, transitions, and features you select.

We’re happy to announce that we’re launching a early build of this for a small group of alpha testers. If you’d like to help us test, please let us know.

Upgrade notes

If upgrading from 1.0, here are a few things to keep in mind.

  • The default transition for pages in 1.1 is “fade” to ensure smooth transitions across platforms. In 1.0, the default was “slide”.
  • All transitions in 1.0 fallback to fade if the browser doesn’t support 3D transforms. This is used to shield complex animations from poorly performing platforms like Android 2.x. This fallback option is configurable.
  • The experimental touchOverflow feature is now deprecated. No errors are going to be thrown by its removal: we will keep our $.support and $.mobile.touchOverflowEnabled properties defined to avoid throwing issues in custom code that leveraged this feature.
  • The tap to toggle visibility behavior of fixed toolbars no longer supports the $.mobile.fixedToolbars.setTouchToggleEnabled(false); syntax; this has been replaced by this option: tapToggle. In 1.1.0, fixed toolbars now have a rich set of options and methods compared to 1.0.
  • The data-fullscreen="true" option for fixed toolbars used to be added to the page container in 1.0. In 1.1, this attribute is now added directly to the individual header or footer toolbars.

A Word of Thanks

We’d like to thank the 146 contributors and supporters for their incredible dedication and for being a great bunch people to work with: John Resig, Todd Parker, Scott Jehl, Kin Blas, John Bender, Tyler Benziger, Ghislain Seguin, Mat Marquis, Jason Scott, Maggie Wachs, Patty Toland, Anne-Gaelle Colom, Garann Means, Eddie Monge, Dan Heberden, Paul Irish, Rick Waldron, Ben Alman, Scott González, Jörn Zaefferer, Richard Worth, Dave Methvin, Douglas Neiner, Ralph Whitbeck, Alexandre Capt, uGoMobi, Maurice Gottlieb, Matthew Leon, Eric Hynds, Sven Franck, Jake Boone, trott, Ryan Neufeld, forresst, Gabe Hollombe, Matt Lins, jrowny, ray58750034, Frederik Lassen, Nabil Saleh, Ivan Rubanov, Brandon Johnson, Dave Hulbert, SamuelKC, Andy Matthews, eugenb1, Louy Alakkad, Hans-Peter Buniat, Dan Tao, Mike Woods, Jason Crane, Konstantin Pozin, Wu Yuntao, Chetan Jain, Asyraf Abdul Rahman, Tobias Bosch, medovob, frietsch, Bernhard Gschwantner, Deric Crago, Casey Justus, Jeffrey Way, ovargas27, depeele, Adam Messinger, James Burke, MaZderMind, Bradley Kuhn, Jorge Taylor, Mike Taylor, Divya Manian, Dion Almer, Ben Galbraith, Laurent Hasson, Conrad Seaman, Eli Fidler, Abu Obeida Bakhach, Claudio Cataldo, Jean-Christophe Cimetiere, Wai Seto, Michael Daitzman, Mano Balasubramaniam, Andrea Trasatti, David Ballmer, and countless others who contributed issue reports, code and support.

Our corporate sponsors have been essential to our success and donating developer time on an ongoing basis is a really useful way to help the project. First and foremost, we’d like to thank our premier sponsor Adobe for their incredible support of the project, donating three full-time developers (Kin Blas, John Bender and Tyler Benziger). We’d also like to thank sponsors Filament Group for kickstarting the project and donating the design and development time from the whole crew (Todd Parker, Scott Jehl, Mat Marquis, Maggie Wachs, Patty Toland). All three Jive Software (Ghislain Seguin), Microsoft (Sergey Grebnov), and RIM (Jason Scott) generously donate part-time development support.

Financial support is another critical way corporations support the project. We’d like to thank Research In Motion, Nokia, Microsoft, Rhomobile for contributing generously to the project to support this release. We’d also like to thank the various companies and individuals who have donated test devices to the project.

If you are interested in giving back to the project, please contact Todd Parker.

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.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.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

Platform support in 1.1.0

jQuery Mobile has broad support for the vast majority of all modern desktop, smartphone, tablet, and e-reader platforms. In addition, feature phones and older browsers are supported because of our progressive enhancement approach. We’re very proud of our commitment to universal accessibility through our broad support for all popular platforms.

We use a 3-level graded platform support system: A (full), B (full minus Ajax), C (basic). The visual fidelity of the experience is highly dependent on the CSS rendering capabilities of the device and platform so not all A grade experience will be pixel-perfect but that’s the nature of the web.

A-grade – Full enhanced experience with Ajax-based animated page transitions.

  • Apple iOS 3.2-5.0 - Tested on the original iPad (4.3 / 5.0), iPad 2 (4.3), original iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), 4 (4.3 / 5.0), and 4S (5.0)
  • Android 2.1-2.3 – Tested on the HTC Incredible (2.2), original Droid (2.2), HTC Aria (2.1), Google Nexus S (2.3). Functional on 1.5 & 1.6 but performance may be sluggish, tested on Google G1 (1.5)
  • Android 3.1 (Honeycomb)  – Tested on the Samsung Galaxy Tab 10.1 and Motorola XOOM
  • Android 4.0 (ICS)  – Tested on a Galaxy Nexus S. Note: transition performance can be poor on upgraded devices
  • Windows Phone 7-7.5 – Tested on the HTC Surround (7.0) HTC Trophy (7.5), LG-E900 (7.5), Nokia Lumia 800
  • Blackberry 6.0 – Tested on the Torch 9800 and Style 9670
  • Blackberry 7 – Tested on BlackBerry® Torch 9810
  • Blackberry Playbook (1.0-2.0) – Tested on PlayBook
  • Palm WebOS (1.4-2.0) – Tested on the Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0)
  • Palm WebOS 3.0 – Tested on HP TouchPad
  • Firebox Mobile (10 Beta) – Tested on Android 2.3 device
  • Chrome for Android (Beta) – Tested on Android 4.0 device
  • Skyfire 4.1 - Tested on Android 2.3 device
  • Opera Mobile 11.5: Tested on Android 2.3
  • Meego 1.2 – Tested on Nokia 950 and N9
  • Samsung bada 2.0 – Tested on a Samsung Wave 3, Dolphin browser
  • UC Browser – Tested on Android 2.3 device
  • Kindle 3 and Fire - Tested on the built-in WebKit browser for each
  • Nook Color 1.4.1 – Tested on original Nook Color, not Nook Tablet
  • Chrome Desktop 11-17 - Tested on OS X 10.7 and Windows 7
  • Safari Desktop 4-5 - Tested on OS X 10.7 and Windows 7
  • Firefox Desktop 4-9 – Tested on OS X 10.7 and Windows 7
  • Internet Explorer 7-9 – Tested on Windows XP, Vista and 7
  • Opera Desktop 10-11 - Tested on OS X 10.7 and Windows 7

B-grade – Enhanced experience except without Ajax navigation features.

  • Blackberry 5.0: Tested on the Storm 2 9550, Bold 9770
  • Opera Mini (5.0-6.5) - Tested on iOS 3.2/4.3 and Android 2.3
  • Nokia Symbian^3 - Tested on Nokia N8 (Symbian^3), C7 (Symbian^3), also works on N97 (Symbian^1)

C-grade – Basic, non-enhanced HTML experience that is still functional

  • Blackberry 4.x - Tested on the Curve 8330
  • Windows Mobile - Tested on the HTC Leo (WinMo 5.2)
  • All older smartphone platforms and featurephones – Any device that doesn’t support media queries will receive the basic, C grade experience

Change log

Here are the highlights since 1.0:

iOS4 reports landscape when it’s in portrait (Issue 3707) – Removed the use of the landscape media query, and switched to using window.innerWidth/innerHeight w ith a threshold to determine if the device is currently in landscape mode. A threshold is necessary because on small form factors like the iPhone, the user can enable the developer console which takes up more vertical space, making the useable width of the browser window larger than the height.

Page transitions using “slide” don’t work after the first transition (Issue 3970) – Incorrect -webkit prefix in -moz “slide” transition keyframes. Thanks for the timely fix deAtog!

Collapsible sets now respect data-corners attribute (Issue 3814) – collapsible-set AND nav were inheriting rounded corners

Added button markup hoverDelay global config option$.mobile.buttonMarkup.hoverDelay

Horizontal grouped buttons with icons spacing too tight (Issue 3966)- Thanks uGoMobi!

Multi Page Head and Footer (fixed) with tapToggle: false (Issue 3875) – check the data role to see if it’s a header or footer, not the class from the page sections plugin. This allows for a looser order of calling the page sections and fixedtoolbar plugins on an element, which is a small improvement

Remove .ui-btn class from list dividers – Previously, it was getting both button and bar, now just bar

Height of fixed footer in docs now matches that of the fixed header.

Fixed issue with iOS5 and possibly others not properly returning to the desired scroll location after a transition that uses 3D transforms.

Header/footer mini button styles in toolbars – Header/footer mini button styles cleaned up. Footer buttons are no longer subject to the same left/right button logic as headers. Default mini/inline styles can now be overridden by setting either attribute to “false”.

Fix checkbox radio to cope with input nested inside the label – We now support the implicit association via nesting in addition to using the for/ID pattern. Thanks jokeyrhyme!

Non-native disabled selects become native when enabled (Issue 3894) – disabled custom selects will now enhance

Blackberry – Fixed Position Toolbars Not Working (Issue 3829) – Native position:fixed support in BB5 and 6 is pretty slow/buggy so we had excluded these from seeing this CSS rule but we’ve reversed this decision and let BB do what it does even if it’s not ideal.

Added option for clear search button text – The text for the button used to clear the search input of text can be configured for all search inputs by binding to the mobileinit event and setting the $.mobile.textinput.prototype.options.clearSearchButtonText property to a string of your choosing. Thanks bjohn465!

Changing orientation on ios5 re-enables zoom (Issue 3859) – user scaling/zoom would become re-enabled after an orientationchange, even if it was locked, such as on a fixed toolbars page. Also, this change addresses @toddparker’s point that the zoom plugin does not respect meta viewport tags that have user scaling disabled at the start – in those cases, the zoom api will still be defined, but the methods won’t do anything.. and $.mobile.zoom.enabled will begin and remain false.

Intermittent 1px gap above fixed headers on Android 2.2/2.3 (Issue 3528) – By the looks of it this may have been a vestigial style used as a clearfix

Radio buttons in a control group not visible/rendering correctly in IE7 when pageloads (Issue 3837) – Ensures that absolute positioned checkboxes and radios within controlgroups are visible in IE7

showPageLoadingMsg demo does not work for android 2.3.3 (Issue 3786) – switched to mobile screenheight helper

Improvements to getScreenHeight calculation – used during transitions, but it’s exposed on $.mobile as well. For a while, it’s been returning incorrect values in iOS, as it wasn’t taking into account the browser chrome’s footer height. window.innerHeight tends to return the value we need more consistently, but it’s not supported in older browsers so I’ve included the jQuery height call as a fallback too.

vclick events don’t have pageX/pageY defined on them (Issue 3815) – Modified createVirtualEvent() so that it uses the mouseHook properties if the original event type starts with “mouse” or “click”. The original regex was only looking for “mouse”.

Checkbox & radio regression on Playbook 2.x (Issue 3792)

Support data-mini=”true” on listviews, as well as individual items within a listview.

Support data-mini=”true” applied to individual radios/checkboxes, as well as containing controlgroups.

Issue with overriding data-icon in split listview (Issue 3775) – split list icons should prefer second link, list item, and then the whole list config

data-overlay-theme bug in 1.1 rc1 (Issue 3779) – use parent, given that getInheritedTheme mimics the closest() method.

Performance improvements for checkboxradio widget – thanks dmethvin!

Listview does not allow per-listitem data-icon for split lists (Issue 3747) – split list icons now respect data-icon on LIs

$(“a”).live(“click”) returns different values on desktop browsers and on iOS safari (Issue 3686) – Replaced vclick and click .bind by the equivalent document.addEventListener. This is to ensure that these handlers will be the first to run on vclick and click. As of jQuery 1.7 delegated event handlers are run before bound handlers. This change ensure that these handlers are run before the ones handled by jQuery.

Auto-add back btn issue on pages beyond first view (Issue 3553)

Dialog Header Border Artifact in Chrome 9 (Issue 3626) – Fixed by explicitly setting border: 0 for ui-dialog header to fix chrome rendering bug. Thanks jgable!

$.mobile.listview.prototype.options.inset = true; does not work for data-filter=true (Issue 3761) – listview filter inset now respects prototype options

activeBtn is not defined (Issue 3723)

ui-btn-right/left broken in footer (Issue 3749) – Added support for these classes in footers

Document size with fixed toolbars too tall (Issue 3694) – bottom: -1px; padding-bottom: 1px on fixed footer, previously used to hide 1px “jitter” seen in many browsers during scroll, was triggering scrollbars in some browsers.

Error when there is a fixed header and no footer (Issue 3675) – prevent adding to a non jquery object in fixedToolBar

Select element text overflow issue inside of listview on iOS (Issue 2647) – overflow: hidden on text inside select menus was being ignored on iPad Safari specifically.

White flash during transitions in 1.1 RC1 (Issue 3735) – check for “overlay” theme classes, as well as bar and body to cross fade through bg color instead of white

Search Input – Focus problem (Issue 1459) – Clicking on a search input’s “clear” button now returns focus to the search input.

Collapsible incorrectly adds top, bottom corner classes to all .ui-btn-inner elements – Thanks jasonicrane!

Fix for $.mobile.fallbackTransition.slideout = “none” not working – Thanks pavliy!

Label wrapping checkbox triggers DOM_HIERARCHY_ERR (Issue 3688) – revert to wrapAll for checkbox and radio

Grouped link button in a dialog shows wrong border (Issue 3697) – `.ui-corner-top`/`.ui-corner-bottom` are no longer incorectly applied to the first and last elements in a controlgroup within a dialog page.

Theme inherited correctly on collapsible headings/sets (Issue 3699)

Radio button does not function properly in RC1 (Issue 3670) – reverted prop to attr to resolve this issue

Button highlight breaks out of icon-only buttons (Issue 3613) — Inner highlight in buttons now corectly follow the border radius of the button.

Improve select with custom menu keyboard navigation (Issue 3568) – ensure $.mobile.focusClass is used on buttons on focus/blur, focusin and focusout.

Set focus on page, not H1 on pageshow (Issue 3659) – we no longer add a tabindex attribute to the H1, since we add one to the page itself, and that’s where we send focus on pageshow

Fix keyboard controls on custom selects, previously breaking in any custom select with a header/dividers.

Added support for data-role=”dialog” (Issue 3276) – When a dialog is the first “page”-type element in the DOM, jQM will enhance it, triggering dialog enhancements as usual for non-ajax environments. Updated the /docs/pages/dialog.html page’s role to date-role=”dialog” to demonstrate the change.

Multi Page Head and Footer (fixed) with tapToggle: false (Issue 3875) – check the data role to see if it’s a header or footer, not the class from the page sections plugin. This allows for a looser order of calling the page sections and fixedtoolbar plugins on an element, which is a small improvement

Remove .ui-btn class from list dividers – Previously, it was getting both button and bar, now just bar

Height of fixed footer in docs now matches that of the fixed header.

Fixed issue with iOS5 and possibly others not properly returning to the desired scroll location after a transition that uses 3D transforms.

Header/footer mini button styles in toolbars – Header/footer mini button styles cleaned up. Footer buttons are no longer subject to the same left/right button logic as headers. Default mini/inline styles can now be overridden by setting either attribute to “false”.

Added refresh method to collapsibleset widget (Issue 3529) – Fixes corner class bug in collapsible set when populated dynamically and then refreshed

Buttons not disabled in Internet Explorer (Issue 3558) – Partial fix that appropriately styles buttonMarkup elements using `.ui-disabled` in IE. This does not prevent interaction with disabled elements, that needs to be added via scripting.

Select option misalignment (Issue 3566) – Tweak default margin from enhanced selects

Checkboxes in dialogs must be wrapped in a controlgroup fieldset for correct styling (Issue 3580)

Slider in a fieldcontainer in a footer is too narrow (Issue 3586) – Scopes set fieldcontain width (25%) in header/footer toolbars to fieldcontains with ui-fieldcontain-left/right classes

Text input too wide in a toolbar (Issue 3589) – added percentage-based padding to text inputs within header/footer toolbars.

Ensure link buttons, form buttons, and selects obey ui-btn-left/right classes in headers

Make buttonMarkup reusable on the same element so it will reflect changes to options – Do not simply skip buttons that are already marked up. Instead, we recover those structural elements making up the button which were created during the first buttonMarkup call and update them to conform to the current state of the options. Thanks gabrielschulhof!

Calling focus on hidden elements breaks page on ie8 (Issue 3505) – Thanks sgrebnov!

Report the jQuery Mobile version via version so it’s accessible via JS (Issue 3479)

IE7 support improvement: replaced setAttribute(‘class’) with className property
– Thanks sgrebnov

Added moz-prefixed transition for slider handle – This makes the flip switch slider animation work in Firefox

Taphold event fired while scrolling on Blackberry Playbook (Issue 1524) – Cause: The vmousecancel event was not being fired for ‘this’. Instead Bound vmousecancel event to document instead of ‘this’.

Switched from line-height to text-indent to accessibly hide buttons (issue 1927) – Was causing an vertical scroll bar to appear in FF9 if a button at the end of the content div is disabled / enabled. Changed ”’line-height: 999px”’ to ”’text-indent: -9999px”’. Thanks n0v1!

Close icon of dialog doesn’t work with $.mobile.defaultDialogTransition set to “none” (issue 3351). Thanks Josh Dean!

Fix issue where underlying checkboxes/radio buttons were not being updated when enhanced buttons were clicked (issue 2553) – For horizontal grouped elements

Prevent data-role=”button” from double enhancing buttons or inputs (issue 3141) – redirect from button() and buttonMarkup() to correct function for element. Thanks garann!

Fix for get_orientation() and hence getScreenHeight() not working on some devices (issue 2933) – It seems that some device/browser vendors use window.orientation values 0 and 180 to denote the “default” orientation. For iOS devices, and most other smart-phones tested, the default orientation is always “portrait”, but in some Android and RIM based tablets, the default orientation is “landscape”. Modified the orientationchange plugin so that it injects a landscape orientation media query into the document to figure out what the initial orientation is, it then makes adjustments to a portrait_map if necessary, so that we can properly decode the window.orientation value whenever get_orientation() is called.

Prevent down state class on list items when touch scrolling – Added slight delay before application of hover/down classes on touch devices, to prevent unintentional hover/down state state application when the user is scrolling the page.

More consistent focus classes on form elements, using ui-focus. Switching from outline to shdows makes the glow follow roudned corners on elements and looks better across the board. Links still use outline property. Thanks zachleat!

Toolbar buttons now truncate text to avoid overlap with title (Issue 3262) – Thanks garann!

Expose jquery.mobile as an AMD module if running in an AMD environment

Tightened up vertical spacing for form field containers at smartphone widths -
There was more spacing between elements than needed when the label and elements were stacked.

Fieldsets now work with the field contains data-role (issue #2448)

Checkbox/radio, slider, select, custom select menu performance improvements, especially for IE/WP7 speedups. Thanks sgrebnov!

Add slider step support from jQuery UI – The step attribute now works with the slider, thanks jrowny!

jQuery Mobile 1.1.0 RC2 Released

Posted on by

jQuery Mobile 1.1.0 RC2 has finally arrived. Our philosophy in 1.1 was to really focus on making the current feature set we had as close to perfect as we could, without sacrificing compatibility. When we released RC1, we heard overwhelmingly positive feedback and really appreciate the support and testing from the community.

There were, however, a few things that cropped in in the RC that we decided as a team to address fully before releasing RC2, even if it took a bit of extra time. We appreciate your patience and hope that it was worth the wait. Try it now!

Demos & docs | Key changes | Download & CDN | Supported Platforms

KEY CHANGES

Fixed toolbars: Now with optional backwards-compatible polyfill

In 1.1, we’ve switched over to using position:fixed for our new fixed toolbars because there is now solid support in mobile browsers and this new approach bring true fixed toolbars with native scrolling. These new CSS position:fixed toolbars in 1.1 are supported by a majority of popular platforms: iOS5 (~75% of iOS devices), Android 2.2-4.x (~93% of all Android devices including the Nook and Kindle Fire), RIM Playbook and BB6-7, and all modern desktop browsers.

This new technical approach does mean that platforms that don’t support position:fixed, most notably iOS 4, now fall back to static positioning so they scroll with the page. For these devices, the new 1.1 approach is a bit of a setback compared to 1.0 where we dynamically re-positioned the toolbars into place each time the page scrolled.

We believe that the crisp divide in 1.1 where fixed toolbars either work perfectly or fall back to simply scrolling with the page is a smart approach. However, we heard from some people that that even though the older, dynamic re-positioning behavior wasn’t perfect, it was still something they wanted the option to use.

After a lot of consideration, we decided to hold off on moving forward with RC2 for a bit to give us time to figure out a way to accomodate people who wanted to slot in the 1.0-style fixed toolbars in when position:fixed isn’t supported. It took quite a bit of work (thanks Scott!), but we managed to re-work the 1.0 re-positioning script to work as an extension to the new 1.1 fixed toolbars for RC2. When this extension is added, it adds the 1.0-style fixed toolbars for browsers that don’t support position:fixed but can handle dynamic re-positioning.

To restore the 1.0-style toolbar polyfill, just include the CSS and JS files after your references to jQuery Mobile and Fixed toolbars will work similar to jQuery Mobile 1.0 in iOS 4.3 and other, older platforms.

 
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css"> 
<link rel="stylesheet" href="jquery.mobile.fixedToolbar.polyfill.css">  
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script> 
<script src="jquery.mobile.fixedToolbar.polyfill.js"></script>  

Since this polyfill adds a code weight and maintenance complexity for a fairly small slice of users, we’ve decided to release this polyfill as an optional extension that is outside the core jQuery Mobile library. This means that the codebase won’t be included as part of the jQuery Mobile package and won’t be maintained on the same schedule as the library. We’ll continue to refine this plugin in the Filament Group repo so help us test this and log issues in the tracker.

Transitions: Bringing back 1.0-style transitions for slide

Since we support such a wide range of devices, we need to manage scroll position because both the page you’re on and the page you’re animating to are sitting in the same viewport. This means that if you are scrolled down on a page and click a link, we need to scroll to the top of the window at some point in the transition sequence. The only way to avoid this scroll constraint is to use an overflow scrolling region for each page. This technical approach would mean dropping a significant portion of our supported platforms from the A- and B- grade experiences — a compromise we’re not willing to make. So we have to be a bit creative with how we design our transitions to work with the browser’s capabilities.

In 1.0, we had a synchronous transition sequence where we scrolled the page at the same time we were running the page transition animation. This looks great on short pages, but if you are scrolled pretty far down on a page and click a link, you’d see the current page fly by as the browser scrolled to the top of the window. This scroll jump made the experience feel a bit jumpy and we heard a lot of feedback that this needed a re-think.

In 1.1, we introduced an asynchronous transition sequence that was designed to visually hide this scroll jump. By first fading out the current page, then scrolling into position before starting the “in” transition, the jump was now invisible because we were essentially scrolling a blank page.  This fade effect is a clever way to embrace constraints to make the transitions feel smooth and in control regardless of page length.

In most transitions, the fade effect makes our transitions look a bit different, but we think it looks slick and in control. The reaction from the community on the new transitions has very positive overall and it’s clear that the new apporach is significantly better than the 1.0 experience.

However, the “slide” transition lost some of it’s mojo in 1.1 RC1 because the fade out we do before sliding in the new page definitely changes the effect. We heard that some folks wanted the option to still use the 1.0 style slide, despite the scroll jump, and were chatting in the forums about to how hack this back in.

Because the underlying sequence of events is completely different in 1.1, bringing back the 1.0 slide transition is not simply a matter of dropping in the 1.0 keyframe animation CSS. This was situation where we listened carefully to feedback and decided to re-think our plans in order to make 1.1 work well for everyone, even if it delayed our release a bit.

We’re happy to announce that there is now a way to define a transition handler sequence: sync (1.0-style) and async (1.1-style) when authoring a new transition. In RC2, the slide transition now uses the 1.0-style sync handler, and a new slidefade transition uses the 1.1-style async handler. This paves the way for users to port other 1.0 transitions into 1.1, or create their own custom transitions that can leverage either of the these handler types.

In 1.1, the default transition is now fade which works well across all platforms and is designed to be as fast and unobtrusive as possible. Slide and other, more intensive 3D transitions like flip, turn or flow can cause Android 3+ and slower devices to slow down and blink.

Android bugginess: Position fixed + selects = trouble

One of the things we’ve struggled with in jQuery mobile is the built-in Android browser. Not only is CSS support and animation performance less than ideal, there are a boatload of bizarre bugs that can even vary between manufacturers on the same Android version. Our job as a library is to smooth out and workaround browser issues, but it’s far from easy.

For example, after RC1 was released, we started hearing reports that our new fixed toolbars were completely breaking select menus on Android. Having an issue of this severity crop up at the RC stage was not good. We hadn’t seen this problem in earlier rounds of testing, but was now a very serious blocker issue.

After days of work by Mat, it became clear that Android 2.x’s built-in browser was very fragile, especially with select menus. It turns out that selects can stop working when various, seemingly unrelated, CSS properties are in play which is why we didn’t catch it earlier. Here’s are the Android CSS bugs we discovered and documented in this process:

Android 2.2/2.3’s implementation of position: fixed; can, in conjunction with seemingly unrelated styles and markup patterns, cause a number of strange issues—particularly in the case of position: absolute elements inside ofposition: fixed elements. These bizarre issues include—but are not limited to—the following:

  • Form elements elsewhere on the page—select menus in particular—can fail to respond to user interaction when an empty absolute positioned element is placed within a fixed position element. In rare cases—and specific to Android 2.2—this can cause entire pages to fail to respond to user interaction. This can seemingly be solved by adding any character to the absolute positioned element, including a non-breaking space, and in some cases even whitespace.
  • The above-described issue can also be triggered by an absolute positioned image inside of a fixed position element, but only when that image is using something other than its inherent dimensions. If a height or width is specified on the image using CSS, or the image src is invalid (thus having no inherent height and width), this issue can occur. If an image that is inherently, say, 50×50 pixels is placed in a fixed element and left at its inherent dimensions, this issue does not seem to occur.
  • When a position: fixed element appears anywhere on a page, most 2D CSS transforms will fail. Oddly, only translate transforms seem unaffected by this. Even more oddly, this issue is solved by setting a CSSopacity of .9 or below on the parent of the fixed element.
  • Combinations position: fixed and overflow properties are best avoided, as both have been known to cause unpredictable issues in older versions of Android OS.
  • Any element that triggers the on-screen keyboard, when placed inside a position: fixed element, will fail to respond to user input when using anything other than the default keyboard. This includes Swype, XT9 or, it seems, any input method apart from the standard non-predictive keyboard.

In our specific case, the first bullet point was the blocker we originally ran into in RC1. If we had a fixed header that contained a button and icon inside (both are absolutely positioned) anywhere on the page, it would cause all selects in the page to break. You could tap on the select, but the menu would fail to open. This is sort of like your TV going on the blink when your neighbor turns on their shower.

Unbelievably, the “fix” for broken selects was to add a space inside the icon span. That’s right. A space.

Needless to say, position:fixed is quirky in mobile browsers so although we did resolve this issue and the new fixed toolbars are now working great in Android, we’ll be keeping an eye on this for further shenanigans. Because of the quirkiness, we don’t recommend pushing your luck by using form elements (other than buttons and links) inside a fixed toolbar without doing a ton of testing.

Lastly, we’ve been collecting mobile browser bugs in a GitHub tracker to help developers at share their knowledge of browser bugs and potentially offer workarounds and support. We encourage you to add your own.

We now support 1.6.4 and 1.7.1 (but not 1.7.2 yet)

Since jQuery core 1.7.2 landed fairly recently, we need more time to fully test this with jQuery Mobile 1.1.0. We will add official support for 1.7.2 in a future maintenance release. Until then, 1.7.1 is your safest bet if you want to use a newer version of jQuery core. If you’re running 1.6.4, we still support that as well.

Tons of fixes and improvements: Help us test

While we were working through some of the very thorny issues above, we had the time to land a metric ton of fixes for RC2. These are obviously a lot of changes for an RC so we need a lot of help testing the latest release.

Here are the highlights since RC1:

iOS4 reports landscape when it’s in portrait (Issue 3707) – Removed the use of the landscape media query, and switched to using window.innerWidth/innerHeight w ith a threshold to determine if the device is currently in landscape mode. A threshold is necessary because on small form factors like the iPhone, the user can enable the developer console which takes up more vertical space, making the useable width of the browser window larger than the height.

Page transitions using “slide” don’t work after the first transition (Issue 3970) – Incorrect -webkit prefix in -moz “slide” transition keyframes. Thanks for the timely fix deAtog!

Collapsible sets now respect data-corners attribute (Issue 3814) – collapsible-set AND nav were inheriting rounded corners

Added button markup hoverDelay global config option$.mobile.buttonMarkup.hoverDelay

Horizontal grouped buttons with icons spacing too tight (Issue 3966)- Thanks uGoMobi!

Multi Page Head and Footer (fixed) with tapToggle: false (Issue 3875) – check the data role to see if it’s a header or footer, not the class from the page sections plugin. This allows for a looser order of calling the page sections and fixedtoolbar plugins on an element, which is a small improvement

Remove .ui-btn class from list dividers – Previously, it was getting both button and bar, now just bar

Height of fixed footer in docs now matches that of the fixed header.

Fixed issue with iOS5 and possibly others not properly returning to the desired scroll location after a transition that uses 3D transforms.

Header/footer mini button styles in toolbars – Header/footer mini button styles cleaned up. Footer buttons are no longer subject to the same left/right button logic as headers. Default mini/inline styles can now be overridden by setting either attribute to “false”.

Fix checkbox radio to cope with input nested inside the label – We now support the implicit association via nesting in addition to using the for/ID pattern. Thanks jokeyrhyme!

Non-native disabled selects become native when enabled (Issue 3894) – disabled custom selects will now enhance

Blackberry – Fixed Position Toolbars Not Working (Issue 3829) – Native position:fixed support in BB5 and 6 is pretty slow/buggy so we had excluded these from seeing this CSS rule but we’ve reversed this decision and let BB do what it does even if it’s not ideal.

Added option for clear search button text – The text for the button used to clear the search input of text can be configured for all search inputs by binding to the mobileinit event and setting the $.mobile.textinput.prototype.options.clearSearchButtonText property to a string of your choosing. Thanks bjohn465!

Changing oritentation on ios5 re-enables zoom (Issue 3859) – user scaling/zoom would become re-enabled after an orientationchange, even if it was locked, such as on a fixed toolbars page. Also, this change addresses @toddparker’s point that the zoom plugin does not respect meta viewport tags that have user scaling disabled at the start – in those cases, the zoom api will still be defined, but the methods won’t do anything.. and $.mobile.zoom.enabled will begin and remain false.

Intermittent 1px gap above fixed headers on Android 2.2/2.3 (Issue 3528) – By the looks of it this may have been a vestigial style used as a clearfix

Radio buttons in a control group not visible/rendering correctly in IE7 when pageloads (Issue 3837) – Ensures that absolute positioned checkboxes and radios within controlgroups are visible in IE7

showPageLoadingMsg demo does not work for android 2.3.3 (Issue 3786) – switched to mobile screenheight helper

Improvements to getScreenHeight calculation – used during transitions, but it’s exposed on $.mobile as well. For a while, it’s been returning incorrect values in iOS, as it wasn’t taking into account the browser chrome’s footer height. window.innerHeight tends to return the value we need more consistently, but it’s not supported in older browsers so I’ve included the jQuery height call as a fallback too.

vclick events don’t have pageX/pageY defined on them (Issue 3815) – Modified createVirtualEvent() so that it uses the mouseHook properties if the original event type starts with “mouse” or “click”. The original regex was only looking for “mouse”.

Checkbox & radio regression on Playbook 2.x (Issue 3792)

Support data-mini=”true” on listviews, as well as individual items within a listview.

Support data-mini=”true” applied to individual radios/checkboxes, as well as containing controlgroups.

Issue with overriding data-icon in split listview (Issue 3775) – split list icons should prefer second link, list item, and then the whole list config

data-overlay-theme bug in 1.1 rc1 (Issue 3779) – use parent, given that getInheritedTheme mimics the closest() method.

Performance improvements for checkboxradio widget – thanks dmethvin!

Listview does not allow per-listitem data-icon for split lists (Issue 3747) – split list icons now respect data-icon on LIs

$(“a”).live(“click”) returns different values on desktop browsers and on iOS safari (Issue 3686) – Replaced vclick and click .bind by the equivalent document.addEventListener. This is to ensure that these handlers will be the first to run on vclick and click. As of jQuery 1.7 delegated event handlers are run before bound handlers. This change ensure that these handlers are run before the ones handled by jQuery.

Auto-add back btn issue on pages beyond first view (Issue 3553)

Dialog Header Border Artifact in Chrome 9 (Issue 3626) – Fixed by explicitly setting border: 0 for ui-dialog header to fix chrome rendering bug. Thanks jgable!

$.mobile.listview.prototype.options.inset = true; does not work for data-filter=true (Issue 3761) – listview filter inset now respects prototype options

activeBtn is not defined (Issue 3723)

ui-btn-right/left broken in footer (Issue 3749) – Added support for these classes in footers

Document size with fixed toolbars too tall (Issue 3694) – bottom: -1px; padding-bottom: 1px on fixed footer, pr…
…eviously used to hide 1px “jitter” seen in many browsers during scroll, was triggering scrollbars in some browsers.

Error when there is a fixed header and no footer (Issue 3675) – prevent adding to a non jquery object in fixedToolBar

Select element text overflow issue inside of listview on iOS (Issue 2647) – overflow: hidden on text inside select menus was being ignored on iPad Safari specifically.

White flash during transitions in 1.1 RC1 (Issue 3735) – check for “overlay” theme classes, as well as bar and body to cross fade through bg color instead of white

Search Input – Focus problem (Issue 1459) – Clicking on a search input’s “clear” button now returns focus to the search input.

Collapsible incorrectly adds top, bottom corner classes to all .ui-btn-inner elements – Thanks jasonicrane!

Fix for $.mobile.fallbackTransition.slideout = “none” not working – Thanks pavliy!

Label wrapping checkbox triggers DOM_HIERARCHY_ERR (Issue 3688) – revert to wrapAll for checkbox and radio

Grouped link button in a dialog shows wrong border (Issue 3697) – `.ui-corner-top`/`.ui-corner-bottom` are no longer incorectly applied to the first and last elements in a controlgroup within a dialog page.

Theme inherited correctly on collapsible headings/sets (Issue 3699)

Radio button does not function properly in RC1 (Issue 3670) – reverted prop to attr to resolve this issue

Button highlight breaks out of icon-only buttons (Issue 3613) — Inner highlight in buttons now corectly follow the border radius of the button.

Improve select with custom menu keyboard navigation (Issue 3568) – ensure $.mobile.focusClass is used on buttons on focus/blur, focusin and focusout.

Set focus on page, not H1 on pageshow (Issue 3659) – we no longer add a tabindex attribute to the H1, since we add one to the page itself, and that’s where we send focus on pageshow

Fix keyboard controls on custom selects, previously breaking in any custom select with a header/dividers.

Added support for data-role=”dialog” (Issue 3276) – When a dialog is the first “page”-type element in the DOM, jQM will enhance it, triggering dialog enhancements as usual for non-ajax environments. Updated the /docs/pages/dialog.html page’s role to date-role=”dialog” to demonstrate the change.

Please help us test!

We’re looking for help with testing this release so we can release a final build as soon as possible. Browse the docs or try out the 1.1.0RC2 in your projects, then report issues in the GitHub tracker. Be sure to specify the device, OS version, browser, steps to reproduce and include a simplified test case that uses the latest build (template here).

For RC2, we’re planning on not making any additional code changes unless a major issue crops up during testing. This should be the exact code we will ship in about a week as 1.1.0 final.

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.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.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

Platform support in 1.1.0 RC2

jQuery Mobile has broad support for the vast majority of all modern desktop, smartphone, tablet, and e-reader platforms. In addition, feature phones and older browsers are supported because of our progressive enhancement approach. We’re very proud of our commitment to universal accessibility through our broad support for all popular platforms.

We use a 3-level graded platform support system: A (full), B (full minus Ajax), C (basic). The visual fidelity of the experience and smoothness of page transitions are highly dependent on the CSS rendering capabilities of the device and platform so not all A grade experience will be pixel-perfect but that’s the nature of the web.

A-grade – Full enhanced experience with Ajax-based animated page transitions.

  • Apple iOS 3.2-5.0 - Tested on the original iPad (4.3 / 5.0), iPad 2 (4.3), original iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), 4 (4.3 / 5.0), and 4S (5.0)
  • Android 2.1-2.3 – Tested on the HTC Incredible (2.2), original Droid (2.2), HTC Aria (2.1), Google Nexus S (2.3). Functional on 1.5 & 1.6 but performance may be sluggish, tested on Google G1 (1.5)
  • Android 3.1 (Honeycomb)  – Tested on the Samsung Galaxy Tab 10.1 and Motorola XOOM
  • Android 4.0 (ICS)  – Tested on a Galaxy Nexus. Note: transition performance can be poor on upgraded devices
  • Windows Phone 7-7.5 – Tested on the HTC Surround (7.0) HTC Trophy (7.5), LG-E900 (7.5), Nokia Lumia 800
  • Blackberry 6.0 – Tested on the Torch 9800 and Style 9670
  • Blackberry 7 – Tested on BlackBerry® Torch 9810
  • Blackberry Playbook (1.0-2.0) – Tested on PlayBook
  • Palm WebOS (1.4-2.0) – Tested on the Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0)
  • Palm WebOS 3.0 – Tested on HP TouchPad
  • Firebox Mobile (10 Beta) – Tested on Android 2.3 device
  • Chrome for Android (Beta) – Tested on Android 4.0 device
  • Skyfire 4.1 - Tested on Android 2.3 device
  • Opera Mobile 11.5: Tested on Android 2.3
  • Meego 1.2 – Tested on Nokia 950 and N9
  • Samsung bada 2.0 – Tested on a Samsung Wave 3, Dolphin browser
  • UC Browser – Tested on Android 2.3 device
  • Kindle 3 and Fire - Tested on the built-in WebKit browser for each
  • Nook Color 1.4.1 – Tested on original Nook Color, not Nook Tablet
  • Chrome Desktop 11-17 - Tested on OS X 10.7 and Windows 7
  • Safari Desktop 4-5 - Tested on OS X 10.7 and Windows 7
  • Firefox Desktop 4-9 – Tested on OS X 10.7 and Windows 7
  • Internet Explorer 7-9 – Tested on Windows XP, Vista and 7
  • Opera Desktop 10-11 - Tested on OS X 10.7 and Windows 7

B-grade – Enhanced experience except without Ajax navigation features.

  • Blackberry 5.0: Tested on the Storm 2 9550, Bold 9770
  • Opera Mini (5.0-6.5) - Tested on iOS 3.2/4.3 and Android 2.3
  • Nokia Symbian^3 - Tested on Nokia N8 (Symbian^3), C7 (Symbian^3), also works on N97 (Symbian^1)

C-grade – Basic, non-enhanced HTML experience that is still functional

  • Blackberry 4.x - Tested on the Curve 8330
  • Windows Mobile - Tested on the HTC Leo (WinMo 5.2)
  • All older smartphone platforms and featurephones – Any device that doesn’t support media queries will receive the basic, C grade experience

Announcing jQuery Mobile 1.1.0 RC1

Posted on by

The jQuery Mobile team is excited to announce the first release candidate of 1.1.0. This release has been a real labor of love, with hundreds of commits and tons of improvements, big and small, to make jQuery Mobile feel faster, smoother and more polished across the board. We encourage the community to help us test and shake out any final bugs before we release the final version in the upcoming weeks. Try it now!

Demos & docs | Key changes | Download & CDN | Supported Platforms

KEY CHANGES

True fixed toolbars: Lightweight, CSS-based & broadly compatible

Browser support for fixed toolbars

  • iOS5 – iPhone and iPad
  • Android 2.2 and 2.3
  • Android 3.x tablets (Honeycomb)
  • Android 4.x (ICS)
  • Chrome for Android (beta)
  • BB Playbook 1-2
  • BB7
  • Nook Color/Tablet
  • Kindle Fire
  • Kindle 3
  • All modern desktop browsers (IE, Firefox, Safari, Chrome, etc.)

When we first started developing the library, CSS support for position:fixed in mobile platforms was pretty much non-existent so our “fixed” toolbar solution dynamically re-positioned the toolbars each time you scrolled the page. Although it was a decent stopgap, the way mobile browsers would freeze the DOM during scroll would result in the toolbars briefly scrolling with the document which was impossible to completely fix. Alternate approaches use JavaScript-based momentum scrollers to achieve true fixed toolbars, but these only work on a small subset of platforms, have non-native scrolling physics, and can introduce performance and usability issues in less capable devices. None of this was an acceptable option for this project.

Luckily, around the time we released 1.0, Brad Frost posted his results of extensive tests of position:fixed on mobile browsers. Surprisingly,  support is now quite good  so we set about prototyping and testing a CSS-based replacement for our fixed toolbars.

We now have a solid re-write that provides true fixed toolbars on the a lot of popular platforms and safely falls back to static toolbar positioning in other browsers.

The coolest part about this approach is that, unlike JS-based solutions that impose the unnatural scrolling physics across all platforms, our scrolling feels 100% native because it *is*. This means that scrolling feels right everywhere and works with touch, mousewheel and keyboard user input. As a bonus, our CSS-based solution is super lightweight and doesn’t impact compatibility or accessibility.

Since we’re removing the 1.0-era fixed toolbar re-positioning script, some platforms like iOS 4 will now fall back to static positioning where the toolbars simply scroll with the page but we feel it’s better to have a crisp divide: it either works perfectly or falls back to a safe and usable solution.

The new fixed toolbars also have a robust set of options and methods you can tap into to customize the behavior such as whether toolbars are visible on page load, whether the tap to toggle toolbar feature is enabled, toggle transition (defaults to slide up/down)

Improved transitions: Smoother, faster

Our AJAX navigation system is one of the best things about jQuery Mobile because it makes page navigation faster and adds animated page transitions. We did a ton of work leading up to 1.0 to make our transitions as smooth as possible, but there were two significant things that turned out to very difficult: the need to scroll the page between transitions and Android’s poor animation performance.

First, we have a hard constraint that both the page you’re on and the page you’re animating to are both sitting on the same viewport — we animate and scroll the viewport to achieve the transition effect. This means that if you are scrolled down on a page and click a link, we need to first scroll to the top of the page, then begin the transition (yeah, we tried every CSS trick to avoid scrolling, none work well on longer pages or Android). Since we also restore your scroll position if you go back, we may need to scroll up, transition, then scroll down to restore your scroll position. On mobile devices, scrolling is pretty slow so you’d see the page scroll by then stop at the top which can make things feel jumpy.

Because we don’t have widespread CSS support for overflow:auto on mobile browsers and aren’t satisfied with the limitation of JS-based scrollers, we had to think creatively. For 1.1, we embraced the scroll jump constraint and shuffled the sequence of the page transition JS handler to first fade out the current page, then scroll the page into position before transitioning in the new page. Since we’re scrolling a blank page, it scrolls faster and the scroll jump is invisible so things feel much more controlled and smooth. As a bonus, the fade out/in animation is impressively smooth and blink-free on every platform. This does mean that every transition has a place where we need to fade out a screen to accomodate the scroll jump, but we think this still looks pretty sharp.

On the second topic, I won’t mince words here: Android as a whole has abysmal performance rendering CSS keyframe animations. Regardless of version or device, Android devices stutter, drop frames and blink when performing any page page animation other than a simple fade.

Post-1.0, we went back to the drawing board to investigate exactly what combination of CSS properties caused the most issues so we could re-vamp our transitions to be as easy on Android as possible. We found that most common things we wanted to do like animating size or position along with opacity would cause blinks, missing animations and odd opacity rendering on box-shadows. With this in mind, we spent weeks testing on a wide range of Android-based devices to arrive at a set of minimal transitions that would be as non-taxing as possible.

Unfortunately, after a ton of work, we’ve determined that it’s not possible to dumb down page transitions enough to get acceptable performance in Android 2.x, even on a newer device like a Nexus S running 2.3. After a lot of deliberation, we’ve decided to use a feature test for 3D transforms to target transitions: if a browser passes, it will see the full range of transitions. By default, if a browser fails this 3D test, they will fall back to a fade transition, regardless of the transition specified. All Android 1.x-2.x devices fail this test but Android 3.x and 4.x pass. The fallback behavior for each transition is completely configurable if you want to change this behavior.

TL;DR: The default page transition is now be a super fast and smooth fade out/in animation. All the 1.1 page transitions (slide, flip, etc.)  have been tweaked to have a place it the animation where we fade out to accomodate the scroll jump, but we think this looks pretty sharp and always in control. On some platforms like Android 2.x that don’t support 3D effects, the simpler fade transition will be the only game in town, regardless of the transition specified. View the new 1.1 page transitions.

Two new transitions in 1.1: Turn and Flow.

In addition to re-vamping all the 1.0 transitions, we’ve added a turn transition that is similar to the WP Metro style page effect and a flow transition that is bit like the iOS tab switching transition where pages zoom in and out. Both look great on platforms such as iOS and Blackberry PlayBook that support 3D.

Firefox support for transitions

Yep, we’ve added -moz prefixed rules for all the page transitions to bring support to newer versions of Firefox desktop and (hopefully) a future build of Firefox mobile. We will continue to add vendor-prefixed rules for Opera, IE, etc. as these browsers gain support prove they have support with acceptable performance. Vendor prefixes add a lot of code when working with CSS keyframe animations so we want to add these only when supported to keep the file sizes down.

New AJAX loader design and options

As we revisited page transitions, we found that a more subtle loader design actually  made the navigation feel faster so we re-designed the loader to be as minimal as possible and ended up with a light spinner image with no text to keep things simple. Hoever, we understand that there will be times when you do need to display text along with the loader so we’ve beefed up the loader to be much more flexible. There are now a few new global options that let you set whether you want to see the text, loader or both and set the theme or text at runtime. For example, this will show the loader with theme A and a custom message: $.mobile.showPageLoadingMsg("a", "Loading theme a...");. View a demo of these new loader options in the docs.

Related: TouchOverflow feature to be deprecated in 1.1

We introduced the experimental touchOverflow feature in 1.0 because it made our transitions smoother and brought true fixed toolbars in iOS5. This came at the cost of code complexity and a lot of CSS rendering bugs due to Apple’s buggy implementation. Now with our new fixed header and transitions approach, we don’t see any viable use case for this feature so we’re deprecating it at 1.1.0.  Deprecation here simply means no errors are going to be thrown by its removal: we will keep our $.support and $.mobile.touchOverflowEnabled properties defined to avoid throwing issues in custom code that leveraged this feature.

Support for jQuery 1.7.1

jQuery Mobile 1.1.0 now supports both 1.6.4 and 1.7.1 versions of jQuery core. We recommend that you use 1.7.1 to take advantage of all the great improvements in the latest release. If you stick with 1.0.1 for a while, remember that only supports 1.6.4.

Mini form elements

As we worked on fixed toolbars, we started to test the rendering of form controls in headers and footers and in 1.0, things were a bit broken. In 1.1, we’ve spent a lot of time tweaking the form elements so they will render nicely in toolbars but the standard versions seemed a bit big in toolbars.

We had a smaller button style already hard-coded in headers so we used the vertical height of that button as a basis for a new “mini” version of all our form elements (buttons, selects, inputs, sliders, switches, etc.).

By adding the data-mini="true" attribute to these elements, the more compact version will be displayed which is perfect for toolbars. The image on the right compares the standard vs. mini versions of each element.

Flip switch: Improved design


As we started to look at our form elements, the flip switch seemed like it could use a bit of visual cleanup. We looked across popular mobile platforms and they all seemed to use a pretty consistent design that used a smaller handle to maximize horizontal space for the text. In 1.1, we’ve tweaked the design to use a round handle (or square, depending on your theme) for the flip switch and re-vamped the underlying code to make it more robust.

Slider: Highlight feature

We also added a feature to add a track highlight from the left of the track to the slider position. Just activate the highlight feature, add data-highlight="true" attribute to the range input.

Slider: Step attribute support

The step attribute is part of the HTML5 range input spec and allows you to specify the increment the slider handle must move. This defaults to 1, but now you can specify the step to slide by increments (step="25") and the handle will snap to these points. If a value in entered into the numeric input next to the slider that is outside the steps, it will round to the closest one. We borrowed this code from the jQuery UI project so thanks guys.

Zoom fixes: orientation change iOS bug and select/input zoom

If you wanted to avoid the page zooming in oddly when you rotated an iOS device into landscape mode, you needed to disable user zooming via the viewport meta tag. However, we think that it’s nice to keep user zooming enabled if at all possible so after a lot of tinkering, Scott Jehl came up with a clever hack that uses accelerometer data to determine if a device is in the process of being rotated. If it is, we temporary disable zooming to avoid the orientation bug, then quickly restore it. We’ve created a new utility (zoom.iosorientationfix.js) in jQuery Mobile that uses this technique to fix the iOS orientationchange zoom bug.

There is another utility zoom.iosfocusfix.js, which disables zoom as a select or input element is focused, preventing iOS from zooming into that element and cropping the viewport. Zoom is restored just after the focus event fires (a half second timeout).

We added a general utility: $.mobile.zoom, which as 3 members: enabled [bool], disable [function], and enable [function]. This simple utility is used to disable user scaling in devices like iOS. The disable() method disables user-scaling. The enable() method enables user-scaling. The enabled property keeps track of state. This utility is used by the two features above and can be used in custom scripting events as well.

AMD module support

In jQuery Mobile, we’re using AMD to express dependencies between the different modules for the build scripts and to support our in-progress download builder tool. However we strip out all the AMD overhead in the final source files. It will export an anonymous AMD module if an AMD loader is present, the same way jQuery Core does it. Special thanks to James Burke (@jrburke) for jumping in and helping us polish our AMD implementation.

data-enhance=false data attribute

As of jQuery Mobile 1.0, all the markup within a page is scanned for elements to be enhanced. This is problematic for 3rd party widgets/libraries that don’t want anybody enhancing their markup or attaching behavior. We heard requests for a data-* attribute that can be place on an element container to tells the framework not to enhance anything inside it for these situations. In 1.1, we’ve added a new data-enhance=false attribute that can be added to a container to prevent both auto-initialization and link/form hijacking. This is also available via $.fn.jqmEnhanceable. It’s important to note that because of the performance impact incurred by finding a parent element with the data-enhance=false attribute this feature must be turned on explicitly with $.mobile.ignoreContentEnabled=true.

data-ajax=false now works on containers

On a related topic, we’ve always offered the ability to disable the AJAX navigation system from hijacking a link or form submit via the data-ajax="false" attribute, but people have asked for a way to apply this exclusion more efficiently to a grouping of links. In 1.1, this is now possible by simply adding, and setting $.mobile.ignoreContentEnabled=true, the data-ajax attribute to a parent container and it will exclude all the parent link or forms from the AJAX navigation system behavior.

New docs navigation and search

We spend quite a bit of time refining our docs and we think they are pretty solid. However, there are now a lot of pages and it can be hard to find what you need simply by browsing around. For 1.1 we’ve added a button in the upper right corner of every page that opens a searchable sitemap that contains an alphabetized list of pages in a filterable listview. Although this isn’t a true site search, we’ve used the hidden filtertext feature to load up each list item with a rich set of keywords you might be looking for. We plan on making some larger docs changes in future releases, but this seemed like a nice addition to the docs.

Please help us test!

We’re looking for help with testing this release so we can release a final build as soon as possible. Browse the docs or try out the 1.1.0 release in your projects, then report issues in the GitHub tracker. Be sure to specify the device, OS version, browser, steps to reproduce and include a simplified test case that uses the latest build (template here). If all goes well, we hope to release the final build in about 2 weeks.

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.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.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

Platform support in 1.1.0 RC1

jQuery Mobile has broad support for the vast majority of all modern desktop, smartphone, tablet, and e-reader platforms. In addition, feature phones and older browsers are supported because of our progressive enhancement approach. We’re very proud of our commitment to universal accessibility through our broad support for all popular platforms.

We use a 3-level graded platform support system: A (full), B (full minus Ajax), C (basic). The visual fidelity of the experience and smoothness of page transitions are highly dependent on the CSS rendering capabilities of the device and platform so not all A grade experience will be pixel-perfect but that’s the nature of the web.

A-grade – Full enhanced experience with Ajax-based animated page transitions.

  • Apple iOS 3.2-5.0 - Tested on the original iPad (4.3 / 5.0), iPad 2 (4.3), original iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), 4 (4.3 / 5.0), and 4S (5.0)
  • Android 2.1-2.3 – Tested on the HTC Incredible (2.2), original Droid (2.2), HTC Aria (2.1), Google Nexus S (2.3). Functional on 1.5 & 1.6 but performance may be sluggish, tested on Google G1 (1.5)
  • Android 3.1 (Honeycomb)  – Tested on the Samsung Galaxy Tab 10.1 and Motorola XOOM
  • Android 4.0 (ICS)  – Tested on a Galaxy Nexus. Note: transition performance can be poor on upgraded devices
  • Windows Phone 7-7.5 – Tested on the HTC Surround (7.0) HTC Trophy (7.5), LG-E900 (7.5), Nokia Lumia 800
  • Blackberry 6.0 – Tested on the Torch 9800 and Style 9670
  • Blackberry 7 – Tested on BlackBerry® Torch 9810
  • Blackberry Playbook (1.0-2.0) – Tested on PlayBook
  • Palm WebOS (1.4-2.0) – Tested on the Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0)
  • Palm WebOS 3.0 – Tested on HP TouchPad
  • Firebox Mobile (10 Beta) – Tested on Android 2.3 device
  • Chrome for Android (Beta) – Tested on Android 4.0 device
  • Skyfire 4.1 - Tested on Android 2.3 device
  • Opera Mobile 11.5: Tested on Android 2.3
  • Meego 1.2 – Tested on Nokia 950 and N9
  • Samsung bada 2.0 – Tested on a Samsung Wave 3, Dolphin browser
  • UC Browser – Tested on Android 2.3 device
  • Kindle 3 and Fire - Tested on the built-in WebKit browser for each
  • Nook Color 1.4.1 – Tested on original Nook Color, not Nook Tablet
  • Chrome Desktop 11-17 - Tested on OS X 10.7 and Windows 7
  • Safari Desktop 4-5 - Tested on OS X 10.7 and Windows 7
  • Firefox Desktop 4-9 – Tested on OS X 10.7 and Windows 7
  • Internet Explorer 7-9 – Tested on Windows XP, Vista and 7
  • Opera Desktop 10-11 - Tested on OS X 10.7 and Windows 7

B-grade – Enhanced experience except without Ajax navigation features.

  • Blackberry 5.0: Tested on the Storm 2 9550, Bold 9770
  • Opera Mini (5.0-6.5) - Tested on iOS 3.2/4.3 and Android 2.3
  • Nokia Symbian^3 - Tested on Nokia N8 (Symbian^3), C7 (Symbian^3), also works on N97 (Symbian^1)

C-grade – Basic, non-enhanced HTML experience that is still functional

  • Blackberry 4.x - Tested on the Curve 8330
  • Windows Mobile - Tested on the HTC Leo (WinMo 5.2)
  • All older smartphone platforms and featurephones – Any device that doesn’t support media queries will receive the basic, C grade experience

jQuery Mobile 1.0.1 Released

Posted on by

The jQuery Mobile team is happy to announce 1.0.1, the first maintenance release for 1.0.0. This release brings a long list of fixes, performance tweaks and small improvements. We will now be focusing on finishing up version 1.1.0 for later next month.

Demos & docs | Key changes | Change log | Download & CDN | Supported Platforms

KEY CHANGES

Now Officially Supported: bada and UC Web

We’re happy to announce that the Samsung bada platform and its built-in Dolphin browser is now officially supported. We’d like to thank Samsung for donating a Wave 3 test phone running bada 2.0 to our lab. When our new bada device arrived jQuery Mobile worked without a hitch and we were pleasantly surprised by the quality of rendering and speed of this platform.

We’ve also started testing on UC Browser on Android and are happy to report that jQuery Mobile works great. UCweb is the most popular mobile web browser in China with a whopping 65% market share so it makes a lot of sense for us to keep this on our testing radar. This is a surprisingly good browser with clean rendering.

Both of these platforms are examples of how our commitment to web standards and feature detection allows the framework to “just work” on an ever-increasing set of platforms and browsers without adding extra code or maintenance. We normally just need to add new devices to our standard testing rotation to ensure that we continue to support them as we move forward.

Test lab & donations

Since 1.0 was released, we’ve continued to grow our test lab. Through generous donations from Nokia (Lumia 800, 701), RIM (new Curve and Torch versions, Playbooks running 2.0), and the bada phone by Samsung mentioned above we’ve been able to keep apace with all the newest devices. Filament Group also picked up a Kindle Fire to round out the bunch. At this point, we have roughly 50 unique phone, tablet and e-readers in our test tab in addition to a full suite of desktop computers running all modern OSs and browsers.

We are currently looking for donations of devices running Android 4.0 (ICS) in both phone and tablet form factors. We don’t have any 4.0 devices in our lab and have been relying on emulators and community testing so please let us know if you can donate to the lab. Note that we need devices that shipped with 4.0, not upgraded devices.

Change log

Close icon of dialog doesn’t work with $.mobile.defaultDialogTransition set to “none” (Issue 3351) – Thanks Josh Dean!

Prevent data-role=”button” from double enhancing buttons or inputs (Issue 3141) – redirect from button() and buttonMarkup() to correct function for element. Thanks Garann and Josh Dean!

Use the first dialog in a document as a page when no pages exist (Issue 3275) – Provides a failsafe if people use data-role=”dialog”

Added moz-prefixed transition for slider handle – Makes slider snap animation work in FF.

get_orientation() and hence getScreenHeight doesn’t work on some devices (issue #2933) – Android and RIM based tablets default orientation differences causes the page height to not be set correctly. Modified the orientationchange plugin to make adjustments to a portrait_map if necessary, so that we can properly decode the window.orientation value whenever get_orientation() is called.

Fix for custom multi select bubble counts – Thanks MauriceG

Toolbar buttons should truncate text to avoid overlap (Issue #3262) – Thanks Garann!

Use $(window).width() and not window.innerWidth for custom selects – also did the same for height

Fieldset with a data-role=”fieldcontain” does not work (Issue #2448) – Tweaked fieldset border rules so field contains work with this element and avoid scope mismatch.

Fix position of searchbar in touchOverflow mode – Thanks MaZderMind!

ARIA/Voiceover support in listviews (Issue #3228) – the markup structure had changed after all. aria-hidden=”true” was wrapping around both the heading and the additional “click to [expand/collapse]” text.

Fixed non reacting generated back buttons with touchOverflowEnabled – z-index tweak did the trick. Thanks Nicolas Bartoli!

allowCrossDomainPages with forms (Issue 2234) – check for external url’s that doesn’t check against the cross domain pages setting

Slider isn’t refreshed properly when value is set to empty string (Issue #3029) – default empty string val to 0 on refresh

Improve list item pruning while filtering – The current pruning mechanism did not work as intended because the variable “change” replaces every instance. Thanks Marcus Lunzenauer!

Fix difference in spacing for inset lists in touchOverflow mode – Thanks MaZderMind!

Fix not-inset-list top position, while keeping inset-lists as they are in touchOverflow mode – Thanks MaZderMind!

Fix for CSS in touch-overflow in lists (Issue #3165) – Thanks MaZderMind!

Change .live() to .delegate() – As live() is being deprecated, this change is necessary. Delegate should also be faster than live, if only marginally. Also, if the move is made to 1.7+ for core, it makes it easy to do a sed /.delegate(/.on(/g to make it compliant with the new event handling.

Radio Buttons & Checkboxes don’t render on WP7.0 (issue #3086) – Windows Phone 7 unable to use find() for an attribute-based selector

Numeric input next to slider not appearing without a page role (Issue 3081) – The degradeInputs plugin not working for pages that do not have data-role=”page”. This behavior prevented range inputs (for slider widgets)
from degrading properly when used in dialogs.

Dynamic Page load sample: In-Memory broken in IE7 (Issue 3185) – Comma fix

Documentation and demo for hidden listview filter content – Thanks jakeboone002

Added step support to sliders (Issue) – Ported logic from jQuery UI’ slider. Thanks jrowny!

Adjusted textarea autogrow logic timing to ensure it’s height is set more reliably

Decoupled collapsible and collapsible set plugins – Now these are separate plugins for more flexibility and the future download builder

Changed $.inArray to indexOf in closestEnabledButton – Speed performance tweak for buttons

Switch to hasClass check to avoid psuedo selector slowdown – Speed performance tweak for nav bars

Optmised png images for both Default and Valencia themes (issue #2560) – thanks @tichou

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.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.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

Platform support in 1.0.1

jQuery Mobile has broad support for the vast majority of all modern desktop, smartphone, tablet, and e-reader platforms. In addition, feature phones and older browsers are supported because of our progressive enhancement approach. We’re very proud of our commitment to universal accessibility through our broad support for all popular platforms.

We use a 3-level graded platform support system: A (full), B (full minus Ajax), C (basic). The visual fidelity of the experience is highly dependent on the CSS rendering capabilities of the device and platform so not all A grade experience will be pixel-perfect but that’s the nature of the web.

A-grade – Full enhanced experience with Ajax-based animated page transitions.

  • Apple iOS 3.2-5.0 - Tested on the original iPad (4.3 / 5.0), iPad 2 (4.3), original iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), 4 (4.3 / 5.0), and 4S (5.0)
  • Android 2.1-2.3 – Tested on the HTC Incredible (2.2), original Droid (2.2), HTC Aria (2.1), Google Nexus S (2.3). Functional on 1.5 & 1.6 but performance may be sluggish, tested on Google G1 (1.5)
  • Android 3.1 (Honeycomb)  – Tested on the Samsung Galaxy Tab 10.1 and Motorola XOOM
  • Android 4.0 (ICS)  – Since it’s very new, we don’t have a test phone in our lab but early reports are positive. Note: transitions can be poor on upgraded devices
  • Windows Phone 7-7.5 – Tested on the HTC Surround (7.0) HTC Trophy (7.5), LG-E900 (7.5), Nokia Lumia 800
  • Blackberry 6.0 – Tested on the Torch 9800 and Style 9670
  • Blackberry 7 – Tested on BlackBerry® Torch 9810
  • Blackberry Playbook (1.0-2.0) – Tested on PlayBook
  • Palm WebOS (1.4-2.0) – Tested on the Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0)
  • Palm WebOS 3.0 – Tested on HP TouchPad
  • Firebox Mobile (10 Beta) – Tested on Android 2.3 device
  • Skyfire 4.1 - Tested on Android 2.3 device
  • Opera Mobile 11.5: Tested on Android 2.3
  • Meego 1.2 – Tested on Nokia 950 and N9
  • Samsung bada 2.0 – Tested on a Samsung Wave 3, Dolphin browser
  • UC Browser – Tested on Android 2.3 device
  • Kindle 3 and Fire - Tested on the built-in WebKit browser for each
  • Nook Color 1.4.1 – Tested on original Nook Color, not Nook Tablet
  • Chrome Desktop 11-17 - Tested on OS X 10.6.7 and Windows 7
  • Firefox Desktop 4-9 – Tested on OS X 10.6.7 and Windows 7
  • Internet Explorer 7-9 – Tested on Windows XP, Vista and 7
  • Opera Desktop 10-11 - Tested on OS X 10.6.7 and Windows 7

B-grade – Enhanced experience except without Ajax navigation features.

  • Blackberry 5.0: Tested on the Storm 2 9550, Bold 9770
  • Opera Mini (5.0-6.5) - Tested on iOS 3.2/4.3 and Android 2.3
  • Nokia Symbian^3 - Tested on Nokia N8 (Symbian^3), C7 (Symbian^3), also works on N97 (Symbian^1)

C-grade – Basic, non-enhanced HTML experience that is still functional

  • Blackberry 4.x - Tested on the Curve 8330
  • Windows Mobile - Tested on the HTC Leo (WinMo 5.2)
  • All older smartphone platforms and featurephones – Any device that doesn’t support media queries will receive the basic, C grade experience