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