Announcing jQuery Mobile 1.1.0 RC1

Posted on February 28, 2012 by Todd Parker

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:

Uncompressed: jquery.mobile-1.1.0-rc.1.js (useful for debugging)
Minified and Gzipped: jquery.mobile-1.1.0-rc.1.min.js (24KB, ready to deploy)

CDN-Hosted CSS:

Uncompressed with Default theme: jquery.mobile-1.1.0-rc.1.css (useful for debugging)
Minified and Gzipped with Default theme: jquery.mobile-1.1.0-rc.1.min.css (7KB, ready to deploy)
Uncompressed structure without a theme: jquery.mobile-1.1.0-rc.1.css (useful for theme development)
Minified and Gzipped structure without a theme: jquery.mobile-1.1.0-rc.1.min.css (6KB, ready to deploy)

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:

Zip File: jquery.mobile-1.1.0-rc.1.zip (JavaScript, CSS, and images)

Microsoft CDN hosted jQuery Mobile files:

http://www.asp.net/ajaxLibrary/CDNjQueryMobile110rc1.ashx

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 January 26, 2012 by Todd Parker

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:

Uncompressed: jquery.mobile-1.0.1.js (useful for debugging)
Minified and Gzipped: jquery.mobile-1.0.1.min.js (24KB, ready to deploy)

CDN-Hosted CSS:

Uncompressed with Default theme: jquery.mobile-1.0.1.css (useful for debugging)
Minified and Gzipped with Default theme: jquery.mobile-1.0.1.min.css (7KB, ready to deploy)
Uncompressed structure without a theme: jquery.mobile-1.0.1.css (useful for theme development)
Minified and Gzipped structure without a theme: jquery.mobile-1.0.1.min.css (6KB, ready to deploy)

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:

Zip File: jquery.mobile-1.0.1.zip (JavaScript, CSS, and images)

Microsoft CDN hosted jQuery Mobile files:

http://www.asp.net/ajaxLibrary/CDNjQueryMobile101.ashx

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

Platform support in 1.0.1

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

Announcing jQuery Mobile 1.0

Posted on November 16, 2011 by Todd Parker

That’s right, version 1.0 is out! After more than a year of refinements, we now have a rock solid release.

When we first launched this site back in the summer of 2010, we had a few concept sketches and some very ambitions goals: to create an elegant HTML5-based user interface library for the jQuery community designed to work on all popular mobile platforms. We are built on the strengths of jQuery core and jQuery UI and strive to make mobile development efficient, accessible and maybe even a bit fun.

To reach the broadest possible audience, we decided from the start to make the framework work on every popular mobile, tablet, e-reader and even desktop platforms by embracing HTML5 and responsive design techniques. A tall order, but we’re happy to announce that we’ve achieved this goal and now support all our target platforms as of 1.0. By using a progressive enhancement approach, even less capable devices can still access the content and functionality of a jQuery Mobile site. This broad compatibility gives you the ability to reach many billions of people.

Equally as important, we set out to make this framework easy for developers to get up and running fast, with a minimal learning curve. Less technical folks can configure the framework with just HTML markup, but we maintain the full power of jQuery and a robust event and plugin system under the hood for developers who want to deeply extend the framework. By using tools like PhoneGap, jQuery Mobile code can be transformed into apps to be distributed through all popular app stores. A rich ecosystem of developer tools and frameworks make jQuery Mobile even more powerful, offering everything from MVC frameworks to Dreamweaver integration.

Throughout the course of the year, the team has spent thousands of hours refining the framework and we are thrilled that have finally reached this important milestone. We’ve been blown away by the community support and look forward to seeing what what you build with jQuery Mobile. We’re already hard at work on the next version wich will bring improved page transitions, new widgets and more and look forward to a very productive year ahead.

jQuery Mobile 1.0 Final
Requires jQuery core 1.6.4

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

Jump to: Announcements | Upgrade notes | Thanks | Supported Platforms | Download & CDN

ANNOUNCEMENTS

Performance

In case you missed the RC3 release earlier this week, we’ve spent a lot of time recently profiling pages to find where we can reduce function calls to speed up page rendering time. The results have been impressive: we’ve managed to speed up the page enhancement time up by 30-50% across all platforms at a minimum compared to RC2. As pages become even more complex, the speedup can increase to roughly 150% which means that enhancement takes far less than half the time it did in RC2. We’re already working on improving touch event responsiveness, page transition and scrolling smoothness and other important factors in upcoming releases so stay tuned.

ThemeRoller for Mobile

We’re excited to announce the release of the new ThemeRoller for Mobile tool. ThemeRoller is a web-based tool that makes it super simple to create custom themes without writing a single line of CSS. Drag and drop colors to create your masterpiece, then share it via URL or download a ZIP file with your custom theme stylesheet, ready for production (or additional tweaking). We’d like to thank Adobe who dedicated the development time of Tyler Benziger to work exclusively on ThemeRoller for more than 6 months. Read more about ThemeRoller in the release announcement.

Resources: Sites, books, plugins, articles and more

We’ve been blown away by all the interest in jQuery Mobile and the community has been incredibly active writing plugins and extensions, building frameworks and tools that enhance the library, and writing tons of articles and tutorials. There are now 8 books on jQuery Mobile and many more in the works. To keep tabs on all the activity, we’ve created a new resources page here in the site to collect everything together. Thanks to Anne-Gaelle Colom for helping to organize and snazzify this page.

If you’re looking for inspiration, check out jqmgallery.com so see lots of really great examples of sites and apps built with jQuery Mobile. Know of a great example? Submit a site or app to jqmgallery.com.

New documentation pages

We’ve been hard at work refining our documentation and have added a few pages of note. There is now a quick start guide, the oft-requested data-attribute reference, a set of global configuration test pages that let your easily preview key settings, a PhoneGap tips page, detailed documentation on the experimental touchOverflow feature, info on how to access new features of the fixed toolbars, and much more.

Upgrade notes

Since lots of people have been jumping in and using jQuery Mobile through the alpha, beta and release candidates, we’ve collected links to all the release announcements for quick reference. These are worth a read if you’re planning on upgrading an exisitng project to 1.0, or are just curious about the chronology of the project leading up to this release.

RC3 – November 13, 2011
RC2 – October 19, 2011
RC1 – August 29, 2011
Beta 3 – September 8, 2011
Beta 2 – August 3, 2011
Beta 1 – June 20, 2011
Alpha 4.1 – April 7, 2011
Alpha 4 – March 31, 2011
Alpha 3 – February 4, 2011
Alpha 2 – November 21, 2010
Alpha 1 – October 16, 2010

Reminder: 1.0 supports jQuery core 1.6.4 only

Since 1.7 was just recently released and has some significant changes (and improvements), only 1.6.4 is officially supported at this time. We plan on adding 1.7 support when we release version 1.1.

A Word of Thanks

We’d like to thank the 125 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, 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, Maurice Gottlieb, Eric Hynds, Jesse Streb, Steven Black, Jacob Gable, Aaron McAdam, Sven Franck, Timmy Willison, Nabil Saleh, Abriele Rabbiosi, Jake Boone, Ryan Neufeld, Andy Matthews, Jonathan Sharp, Dan Croak, Louy Alakkad, Jason Crane, Asyraf Abdul Rahman, Dave Hulbert, Matthew Leon Grinshpun, Konstantin Pozin, Alexandre Capt, Gabe Hollombe, Casey Justus, frietsch, depeele, Mike Woods, Matt Lins, Adam Messinger, 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.

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). Both Jive Software (Ghislain Seguin) and Microsoft (Sergey Grebnov) generously donate part-time development support.

Financial support is another critical way corporations support the project. We’d like to thank Research In Motion, HP/Palm, Nokia, Microsoft, Rhomobile for contributing generously to the project to support our mission. 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.

Platform support in 1.0

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), and 4 (4.3 / 5.0)
Android 2.1-2.3 – Tested on the HTC Incredible (2.2), original Droid (2.2), Nook Color (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 Honeycomb– Tested on the Samsung Galaxy Tab 10.1 and Motorola XOOM
Windows Phone 7-7.5 – Tested on the HTC Surround (7.0) HTC Trophy (7.5), and LG-E900 (7.5)
Blackberry 6.0 – Tested on the Torch 9800 and Style 9670
Blackberry 7 – Tested on BlackBerry® Torch 9810
Blackberry Playbook – Tested on PlayBook version 1.0.1 / 1.0.5
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 (Beta) – Tested on Android 2.2
Opera Mobile 11.0: Tested on the Android 2.2
Meego 1.2 – Tested on Nokia 950 and N9
Kindle 3 and Fire: Tested on the built-in WebKit browser for each
Chrome Desktop 11-15 – Tested on OS X 10.6.7 and Windows 7
Firefox Desktop 4-8 – Tested on OS X 10.6.7 and Windows 7
Internet Explorer 7-9 – Tested on Windows XP, Vista and 7 (minor CSS issues)
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.0) – Tested on iOS 3.2/4.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

Not Officially Supported – May work, but haven’t been thoroughly tested or debugged

Samsung Bada – The project doesn’t currently have test devices or emulators, but current support is known to be fairly good.

Download

CDN-Hosted JavaScript:

Uncompressed: jquery.mobile-1.0.js (useful for debugging)
Minified and Gzipped: jquery.mobile-1.0.min.js (24KB, ready to deploy)

CDN-Hosted CSS:

Uncompressed with Default theme: jquery.mobile-1.0.css (useful for debugging)
Minified and Gzipped with Default theme: jquery.mobile-1.0.min.css (7KB, ready to deploy)
Uncompressed structure without a theme: jquery.mobile.structure-1.0.css (useful for theme development)
Minified and Gzipped structure without a theme: jquery.mobile.structure-1.0.min.css (6KB, ready to deploy)

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

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-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.0/jquery.mobile-1.0.min.js"></script>

Microsoft CDN hosted jQuery Mobile files:
http://www.asp.net/ajaxLibrary/CDNjQueryMobile10.ashx

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

Zip File: jquery.mobile-1.0.zip (JavaScript, CSS, and images)

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

jQuery Mobile RC3 Released!

Posted on November 13, 2011 by Todd Parker

The jQuery Mobile team is thrilled to announce the third and final release candidate for version 1.0.

Sure, we know we said we were going straight to 1.0 when RC2 came out, but we’ve been making a ton of performance enhancements and we just want to make sure 1.0 goes off without a hitch. Unless a regression crops up, this is the exact code that will be released as 1.0 final later this week so consider this an early preview.

We’re thrilled at the performance improvements that we’ve made in this latest release. Page enhancement times are now dramatically faster than RC2 which makes the whole experience feel snappier and more responsive. In addition, we added two useful new options and fixed a boatload of bugs and we’re feeling ready to release.

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

KEY CHANGES

Performance, performance, performance

One common request is to improve the performance of the library, especially on platforms with slower JavaScript engines. Performance is a pretty broad term that covers everything from touch event responsiveness, page transition smoothness, and page rendering speed. Things like touch events and transitons require deep re-factoring to tackle at this stage, but will be a focus for 1.1.

The one key area we decided to focus on for 1.0 is page rendering speed which covers a bunch of areas from AJAX page loading and processing, page enhancement time, and transition time. Since we follow a progressive enhancement approach to provide the broadest possible support, we start with very minimal, semantic markup that needs to be “enhanced” via scripting to add classes, transform markup, add ARIA attributes, apply event listeners and such.

Each of these actions individually may be fast, but when you have a complex page with tens or hundreds of widgets, things can get pokey on less powerful devices. We’ve spent the last few weeks profiling pages to find where we can reduce function calls to speed things up.

The results have been impressive: we’ve managed to speed up the page enhancement time up by 30-50% across all platforms at a minimum compared to RC2. As pages become more complex, the speedup can increase to roughly 150% which means that enhancement takes far less than half the time it did in RC2.

Our form gallery page is a good test case because it has a large number of form elements that each need to be enhanced. In RC2, this page took about 1 second to enhance on iOS and newer versions of Android, a bit more than a half-second more for Blackberry 6 and older Android, and a full 5 seconds on WP7.5 (Mango). We were able to reduce the time by 226% on WP7 and by 30-50% on the other platforms — a significant improvement.

To benchmark really complex pages, we like to use the 400 item listview which is designed to push the limits of even fast platforms. There are a lot of list items that need to be parsed and enhanced, resulting in a 4-6 second enhancement time on most platforms in RC2. However, we found that WP7.5 (Mango) running on brand new hardware would time out and never complete rendering. After some tinkering, we were able to get the page to render, but it took a stunning 60 seconds to chug through the same scripts that older iOS and Android devices completed in 4-6 seconds. Clearly, not good enough.

The result of our optimization work has brought that 60 second enhancement on WP7 down to 3 seconds, a 20x speedup. iOS and newer Android devices complete the task in about 1.5 seconds (from 4 seconds) and we’ve been able to increase speed by roughly 150% across the other platforms. We’ve thrilled at the progess we’ve made and would like to thank our team member Kin Blas for his tireless focus on profiling and performance because the payback has been massive.

Reminder: 1.0 will ship with jQuery core 1.6.4

Since 1.7 was just recently released and has some significant changes (and improvements), we are going to be supporting only 1.6.4 when jQuery Mobile 1.0 is released. We plan on adding 1.7 support when we release version 1.1 so please remember that 1.7 is not supported at this time.

New linkBindingEnabled option

jQuery Mobile will automatically bind the clicks on anchor tags in your document, even if the AJAX navigation feature is disabled in order for us to handle interaction states and other features. For people looking for a simple way to say “hands off” on all links, setting the new linkBindingEnabled global configuration option to false will prevent all anchor click handling including the addition of active button state and alternate link bluring. This should only be used when attempting to delegate the click management to another library or custom code.

New overlay theme swatch option

We’ve exposed an overlayTheme option in both the dialog and select menu plugins to allow people to set the swatch letter to be used for the background overlay field the dialog and select menu appears to float above. This option can be set via the data-overlay-theme attribute applied on the page wrapper for a dialog or on the select element.

Listview inheritance: Fixed

One loose end on theming was that listviews didn’t properly inherit the theme of their parent container like all other widgets did so we’ve fixed this in RC3. There are a few new theming docs pages that show how setting the theme swatch on the page container will ripple through forms, buttons, lists, and collapsibles.

New documentation pages

We’ve been hard at work refining our documentation and have added a few pages of note. There is now the oft-requested data-attribute reference, a set of global configuration test pages that let your easily preview key settings, a PhoneGap tips page, detailed documentation on the experimental touchOverflow feature, info on how to access new features of the fixed toolbars, and much more.

Change log

Speedup by 700 msecs on WP7.5 (Mango) and 200 msecs on iPad. Don’t set the item class on the list item or it’s btn-inner children until after the main processing loop. We now use a dictionary of item-classes to track what items get what set of classes and then set them all afterwards. This cuts down the per-item addClass() and children() function overhead significantly and gets us big wins on platforms like WP 7.5

Listviews aren’t inheriting theme properly (issue 3028) – Now inherits the theme set at the page level. Individual list items remain themeable.

Updated back icon sprites to exactly match the quality and positioning of the white icons – This also removes some anti-aliasing artifacts on the black icons.

Reclaiming another 200-300 msecs on the 400 listview item page for iPad and WP7.5. Use $.data() instead of $.fn.data() in buttonMarkup(). Avoid excess function overhead with a filtered children() call by walking the DOM ourselves in listview code.

Content background color stops at the end of the content instead of going all the way to the footer (issue 3020) -Theme-dependent backgrounds should be applied only to ‘data-role=content’ within a dialog.

If a named submit button was clicked multiple times, the name wasn’t sent in 2nd … nth time. Thanks frietsch!

Reclaim 250 msecs on iPad and WP7.5 (Mango) by simply combining find().filter() calls and getting rid of fake pseudo selectors :eq(0) and :last.

Flip switch improvements to fix snapping – Thanks redaemn!

Reclaiming another 700-800 msecs on the 400 listview item test for WP7.5 (Mango) with a few minor tweaks: Added _findFirstElementByTagName() which does basic DOM traversal to find the first of an element with the given nodeName. Use this in place of $.fn.closest() and $.fn.children() calls that filter with “:eq(0)”. Avoid calling $.fn.add() if you can. The creation of the new collection is costing about 400 msecs. Avoid calling $() with markup for a single node, just use document.createElement() and pass it to $().

Got rid of pseudo selectors :header and :eq(0) since they take a long time on WP7.5 (Mango). This shaves off 300 msecs when loading the form gallery page.

Speed up listview enhancement for WP 7.5 (Mango). This change allows the 400 listview item page to load in 3-4 seconds instead of 30 seconds.- Modified refresh() so that it manually checks for the first image in the list item or .ui-link-inherit element. This allows us to avoid executing a selector with a direct descendant and :eq(0) pseudo which is quite slow on WP 7.5 IE.

Minor performance tweaks: Cache the nsNormalize() results so we don’t have to call $.camelcase() every time jqmData() is called. Move the regexp used in our monkey patched $.find outside of the function to save some regex compilation cycles.

Small custom selectmenu missing header styling / body is transparent (issue 2954)

Eeking out another 200+ msecs (on iPad) by simply switching to children(“img:eq0”) instead of find(“>img:eq0”).

Shave another 200-300ms off the 400 listview item page by simply reducing the number of function calls we make during enhancement. Got rid of _itemApply() and moved it’s functionality to the bottom of refresh(), doing finds from $list where we can, and li where we can’t. Boom, at least 1200+ less function calls.

Store title of initial page so it will appear correctly if reloaded via link instead of back button

Expose an overlay theme option for dialogs and selects (issue 2871) – expose an overlayTheme option in both these plugins to allow people to set this by passing in a swatch letter. This will also be exposed as a data-overlay-theme attribute that can be applied on dialog page containers and select inputs.

Reworked getInheritedTheme() to avoid closest() and attr(). This new version shaves off 200ms of page enhancement time on the forms gallery page on a Droid X (Android 2.1).

No longer able to remove / expire pages reliably (issue 2520) – Modified loadPage() so that if we are attempting to load the first page of the application document, that we first check to make sure it is in the DOM before returning our cached copy. If it is not in the DOM, we let it fall through to the ajax loading code so that it gets recreated. This is necessary since some developers are agressively pruning pages, including embedded ones, for various reasons.

Browser title update for Ajax links improperly escapes HTML entities (issue 1447) – Thanks garann!

IE8 + iframe: window goes to background (issue 2821) – thanks pbosakov!

Select menus won’t open when pages are within FORM element (issue 2066) – typical .net configuration. This change only applies overflow-x: hidden to body/div elements that receive the .ui-mobile-viewport class, as we can safely predict that style won’t interfere with native select funcitonality when attached to those elements. This will address the vast majority of use cases, and prevent this style from causing unpredictable Android issues in the event that the page is wrapped in an unusual element (a form, table cell, marquee tag, etc.).

Some minor listview tweaking to eliminate 1200 $.fn.find calls in our 400 item listview test case – Moved some of the finds we used to do for every item, out of the processing loop so we do just 3 big finds. This shaves off 200-300ms on iPad iOS 4.3.5.

More enhancement optimizations – Modified buttonMarkup so that it checks options against undefined before calling jqmData(). This is necessary because false is a valid option.- Modified listview so that it doesn’t check for a data-counttheme unless it actually has a count item.

Javascript error when clicking on a checkbox with a mouse (issue 2897 ) – thanks jpfiset!

Remove the ui-btn-down-x class when button loses focus – thanks MauriceG

Some code optimizations to speed up page enhancement – Avoid using $.each() when you can directly iterate on the collection. This avoids extra function calling overhead. Avoid calling jqmData() for options that are specified. Avoid calling $.fn.wrapInner(), creating the DOM nodes manually is much faster.

Tweak to reference the buttonMarkup text wrapper element through data

Switched to prop from attr on form buttons – thanks eddiemonge!

Update form button text on refresh. Allows submit button values to change dynamically, and update accordingly in the UI. Such as in the event a button should read “Update” instead of “Save”. Thanks mralex!

Inconsistent background on themeless dialogs (issue 2881) – Add the ui-overlay-shadow class to both, content and, if there, to the footer. Then add the ui-corner-bottom-class to the last one. Thanks MauriceG!

Remove “top” from gradient syntax for byte savings and spec compliance (issue 2795) – Thanks myakura!

Page title overridden on first load (issue 2865)

Fix theme inheritance for text inputs – Thanks eddiemonge!

Update clear button on search inputs if you paste or cut in iOS5 – Thanks eddiemonge!

Flip toggle switch – Doesn’t refresh with new value when disabled (issue 2756) – Thanks redaemn!

Search filter bar throws error when searching for ‘*’ (issue 2416) – Thanks hpbuniat!

Account for dialog or other sub element enhancements

.trigger(“create”) enhances form elements with data-role=”none” (issue 2803) – we find the closest page to pull the keep native selector

getScreenHeight() not compatible with jQuery.noConflict() (issue 2225) –

Native select Menu not opening on Adroid 2.2 or above (issue 1077)

Added linkBindingEnabled to mobile object for complex apps that want to handle all navigation

Select background for full page select menus (issue 2776) – Thanks MauriceG!

Styling ui-li-icon only when list is enhanced (issue 2771) – List icons are absolutely positioned on un-enhanced pages. Thanks bjohn465!

Fixed glowing top glow on listviews breaking out of rounded corners (issue 2528) – Thanks MauriceG!

Download

CDN-Hosted JavaScript:

Uncompressed: jquery.mobile-1.0rc3.js (useful for debugging)
Minified and Gzipped: jquery.mobile-1.0rc3.min.js (24KB, ready to deploy)

CDN-Hosted CSS:

Uncompressed with Default theme: jquery.mobile-1.0rc3.css (useful for debugging)
Minified and Gzipped with Default theme: jquery.mobile-1.0rc3.min.css (7KB, ready to deploy)
Uncompressed structure without a theme: jquery.mobile-1.0rc3.css (useful for theme development)
Minified and Gzipped structure without a theme: jquery.mobile-1.0rc3.min.css (6KB, ready to deploy)

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

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

Microsoft CDN hosted jQuery Mobile files:
http://www.asp.net/ajaxLibrary/CDNjQueryMobile10rc3.ashx

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

Zip File: jquery.mobile-1.0rc3.zip (JavaScript, CSS, and images)

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

Platform support in 1.0 RC3

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), and 4 (4.3 / 5.0)
Android 2.1-2.3 – Tested on the HTC Incredible (2.2), original Droid (2.2), Nook Color (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 Honeycomb– Tested on the Samsung Galaxy Tab 10.1
Windows Phone 7-7.5 – Tested on the HTC Surround (7) HTC Trophy (7.5), and LG-E900 (7.5)
Blackberry 6.0 – Tested on the Torch 9800 and Style 9670
Blackberry 7 – Tested on BlackBerry® Torch 9810
Blackberry Playbook – Tested on PlayBook version 1.0.1 / 1.0.5
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 (Beta) – Tested on Android 2.2
Opera Mobile 11.0: Tested on the iPhone 3GS and 4 (5.0/6.0), Android 2.2 (5.0/6.0)
Meego 1.2 – Tested on Nokia 950 and N9
Kindle 3: Tested on the built-in WebKit browser included in the Kindle 3 device
Chrome Desktop 11-13 – Tested on OS X 10.6.7 and Windows 7
Firefox Desktop 3.6-4.0 – Tested on OS X 10.6.7 and Windows 7
Internet Explorer 7-9 – Tested on Windows XP, Vista and 7 (minor CSS issues)
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.0) – Tested on iOS 3.2/4.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

Not Officially Supported – May work, but haven’t been thoroughly tested or debugged

Samsung Bada – The project doesn’t currently have test devices or emulators, but current support is known to be fairly good. Support level undecided for 1.0

Announcing ThemeRoller for Mobile (beta)

Posted on October 28, 2011 by Todd Parker

If you’re familiar with the jQuery UI ThemeRoller, the basics of the tool are pretty similar: there’s a inspector panel on the left of the screen that has all the theme settings, and a preview pane on the right that shows you in real-time each change you make. But there are some big improvements in the new mobile version which we’ll cover below.

Once you create your masterpiece, you can share it via URL or download a ZIP file with your custom theme stylesheet, ready for production (or additional tweaking).

This is so beta, we’re not even going to add the flag. Have fun playing and please flag issues in the tracker so we can improve the tool.

Themes & swatches

The Mobile theme framework and ThemeRoller Mobile allow you to create up to 26 unique color “swatches” within a single theme (the UI version essentially has a single swatch). Each swatch defines the look and feel for a bar, content block and a button with normal, hover and pressed interaction states.

Within your site or app, you assign swatch letters to individual elements on a page to mix and match swatch colors for really rich designs. Swatches are assigned a single letter from a-z which allows people to share themes easily (unlike unique class names) and flexibly combine swatches on a page. For example, you can assign swatch A to one button and swatch K to another button to make a visual distinction between them.

Global settings

In addition to creating sets of swatches, there are powerful global configuration options to quickly set the font family, active (on) state color, corner radii for groupings and buttons, icon and shadow styles in one centralized place.

Gradient tools

In the left hand inspector panel, there is a slick tool to create the CSS-based gradients we use throughout the themes. In simple mode you can pick a single color, then drag a slider to choose how deep of a convex or concave gradient you want, or leave the slider in the middle position for a flat appearance.

Click the “+” icon to expand into advanced mode and customize the gradient colors individually for both points.

Preview inspector and QuickSwatch bar

Above the preview panel, there are two cool tools that make it even easier to build a theme: the preview inspector tool and the QuickSwatch Bar.

First, when the preview inspector toggle is on, it allows you to simply click on an element in the preview panel and have the relevant section of the lefthand inspector panel open for editing so there’s no need to hunt around for the right settings.

An even more exciting feature is the QuickSwatch bar. This has a preset spectrum of colors that can be dragged and dropped directly onto an element in the preview pane to re-color it. The lightness and saturation sliders make it easy to shift the color spectrum around to find the right colors. To the right of the spectrum, we display the last few colors you’ve used for quick re-use. These colors can also be dragged and dropped into the color picker wells in the lefthand inspector panel for even more power.

A lot of magic is at work here: by dropping a single color onto an element, the tool with automatically calculate the two related gradient colors, border color, and text colors for good contrast (you can fine-tune these in the left panel). By dropping a color on a button/listview, the tool calculates all these colors for the default, hover and pressed states of a button automatically which is a huge timesaver. You can spend your time trying color combinations, not tweaking a million settings.

Adobe Kuler Integration

Picking a color palette that works well together is tricky business but we’ve made it easy by adding pre-made themes created on Adobe’s fantastic Kuler app right into ThemeRoller. Kuler is a great site focused on letting people create, share and rate color palettes.

If you’re looking for inspiration, simply click on the Kuler link in the QuickSwatch palette and you can browse the latest, most popular or highest rated color combinations from Kuler, or search by tag, title or color. From there, just drag and drop the colors onto widgets in the preview pane to quickly create a great-looking theme in a snap.

Sharing URLs

The jQuery UI ThemeRoller tool used URLs to track every step in your creation history and also make it easy to share and load themes by sending those URLs around. We think sharing themes is important to get feedback and allows others to play with your creations but the sheer complexity of the Mobile themes couldn’t be represented in a URL. Our solution is to store the theme on our server and create a unique URL that allows you to post a theme link and allows other to edit or download a copy of the theme (yours won’t be touched). For example, check out this theme I created.

Note: To keep our server from getting stuffed with themes, we’re only going to store theme links for 30 days so you’ll need to download a copy for the long term.

Downloading and importing

Once you have created your final theme, simply click the Download Theme link at the top of the inspector panel to generate a zip file that contains both the compressed (production-ready) and uncompressed (editable) theme files and a simple test page (index.html) to show that everything worked (whew) and instructions on how to add the theme to your site. It’s pretty simple: link your custom theme in the head of the page followed by the jQuery Mobile structure theme and you’re ready to go.

To import a theme, just click the Import link and paste the entire contents of the uncompressed theme file into the text input in the dialog, and the system will parse the theme into an editable format for sharing and downloading.

A word of thanks

This tool came to be through the continued generosity of our sponsor Adobe who dedicated the development time of Tyler Benziger to work exclusively on ThemeRoller for the last 6+ months. Tyler did a fantastic job taking a handful of designs and creating a rock solid tool with lots of creative ideas that exceeded all our expectations.

Give it a try!

Enough talking, jump in and start building your first theme at:
www.jquerymobile.com/themeroller

ThemeRoller Source: Open Source

One more thing: the complete source code for the new jQuery Mobile ThemeRoller tool is open source under the standard jQuery project licenses for you to improve, remix and build into your apps. The core tool is designed to work completely client-side to make it easy to drop into your code — only the download and sharing features require a bit of PHP. Go forth and fork it on GitHub.

jQuery Mobile 1.0RC2 Released!

Posted on October 19, 2011 by Todd Parker

The jQuery Mobile team is thrilled to announce the second release candidate for version 1.0. This new release brings dozens of bug fixes, plus a range of design refinements and optimizations.

We plan on this being the last RC before moving to the final 1.0 release within the next few weeks. This plan may change if we run into any major issues that will require broader testing and another RC.

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

KEY CHANGES

Expanded support for HTML5 date, time and color input types

A number of newer HTML5 input types weren’t included in the form element auto-enhancement logic so they were appearing unstyled. For RC2, we included the full set of HTML5 input types so you can have consistent styling input types of time, date, month, week, datetime, datetime-local, and color. Note that support for these inputs are browser-dependent but they should fall back to a standard text input if not supported. In newer versions of Chrome and Safari on the desktop, the date/time inputs will appear as spinner controls that ease input. On iOS5, each of the date/time inputs open slick picker controls (pictured) so we encourage you to use the most semantically rich input you can to leverage these new capabilities. View input examples

New helper class for hiding elements in an accessible way

To make it easy for developers to add markup that should only be seen by assistive technologoes like screen readers, the new .ui-hidden-accessible class can be added to any element to hide it on-screen, but still available for screen readers (and search engines).

We added this because we see developers omitting the label on form elements because they may not want a text label visible on-screen. Not only will the framework have issues when a label isn’t properly associated for a form element, but makes the form much harder (or impossible) to use with a screen reader. So always add a label and correctly associate it to an form element by referencing it’s ID, then tack on the .ui-hidden-accessible class if you need to. If you’re using a field container and choose to hide the label, we’ve created a second class ui-hide-label that can be added to the container which will both hide the label and let the form element take up the full width so there isn’t a blank spot where the label should be. More info in the form documentation.

Custom selects: now work in controlgroups

We’ve had a few people try to group a few selects into a controlgroup so they look visually integrated into a single widget and it sort of worked, but was ugly. We’ve cleaned up the styles so now both native and custom menu selects now behave as expected within vertical/horizontal controlgroups

Dialogs: now have a max-width

By setting a maximim width, dialogs now look better on tablet and larger screen sizes. Previously, dialogs were 100% width which is perfect for smartphone, but looked odd on larger screens and resulted in very long line lengths for text which is harder to read. Now dialogs and full-screen custom selects have a max-width set at around 600 pixels so the dialog will now center itself over the background and a percentage top margin moves the dialog down a bit to make it look like a traditional modal window on larger screens. At narrower, smartphone-sized devices, dialogs use the full screen width so this only affects large screens. We’ve documented how to override the width as needed if you want to tweak this to your needs.

Fixed toolbar improvements

We’re still making fixes, but we’ve addressed a few key bugs with the fixed toolbars in RC2. Widgets that caused the page height to shift like collapsibles and listview filters were causing fixed footers to become incorrectly positioned. To remedy this, we’ve introduced a new updatelayout event that any widget (like collapsibles) can use to tell other widgets (like fixed footers) that they have changed in layout so they can react accordingly. The advantage of this event is that developers can use this same, consistent mechanism when they update the page with dynamic markup or build 3rd party widgets. We’ve also added better documentation on working with fixed toolbars.

Form elements: 100% width by default

This is a more of a bug fix, but is worth noting if you ran into this in earlier releases. We previously had a CSS issue that caused a standard form element to inherit some of the field container rules so they were only 60% which was hard to work with. Now, every form element will simply behave as a block-level, 100% width element so you can reliably control the width. We’ve updated all the form docs pages to show an example of each form element by itself so you can see how this will look.

Native touch overflow enhancements: Off by default.

Since iOS5 has just reached general release, we wanted to get more testing and feedback on the performance of the new touch overflow enhancements for improved transitions and true fixed toolbars before turning this on by default. To activate this feature, set the touchOverflowEnabled global configuration option to true. One important thing to note is that we’ve had to apply a 2D transform to force iOS5 into rendering all the content on a page reliably, but this style rule also sets every element to position:relative which can cause layout issues if you don’t test thoroughly. Demo here and feel free to report bugs in the GitHub issue tracker. Once we feel like this feature (and iOS5) is really solid, we may consider turning this on by default.

New: Theme vs. structure stylesheets

Up until now, we’ve had a single stylesheet that contained both the theme and structural rules for the framework. Since we’re close to launching the new Mobile ThemeRoller tool, it doesn’t make sense for people to include a single stylesheet that has the default theme, then add their custom theme stylesheet to override everything — it’s a waste of bandwidth. We’ve just changed our stylesheet organization to create a top-level /css/ folder that has /structure/ and /theme/ folders inside. Now that this is organized this way, we will be offering a new jquery.mobile.structure.css stylesheet on the CDN that contains everything you need except for the theme (colors, fonts, etc.). By referencing the structure file along with your custom theme file, you can be more efficient. The previous theme + structure file will continue to be available for testing with the default theme. Here is the CDN version of the structure-only stylesheet you can use now if you already have a custom theme stylesheet:

http://code.jquery.com/mobile/1.0rc2/jquery.mobile.structure-1.0rc2.css
http://code.jquery.com/mobile/1.0rc2/jquery.mobile.structure-1.0rc2.min.css

Change log

Refreshing a page with #&ui-state=dialog causes syntax error (issue 2570)- Fixed regression from an earlier fix to loadPage() for detecting un-enhanced pages by @id as a fallback. In this particular case dataUrl was being used to create an id selector, and of course if the dataUrl is an empty string we end up using “#” as the selector. The fix is to simply check for a non-empty dataUrl.

Refreshing a page with #&ui-state=dialog causes page duplication (issue 2582) – Modified loadPage() to call isFirstPage() with fileUrl instead of absUrl. Since fileUrl is the same as absUrl, but with the dialogHashKey stripped off, it will allow us to match against the url for the first-page.

Namespace pollution on ‘search’ variable (issue 2574) – every change page was overwriting the ‘search’ global variable into an empty string (“”). Fixed typo in the var declaration in makeUrlAbsolute()

Restored orientation-based rules – These are useful in certain scenarios, such as when js is setting heights in iOS5.

Hidden status text for collapsible headers doesn’t update on expand (issue 2595) – Accessibility improvements to provide correct auditory feedback of the collapsible state. Thanks rogerjohansson and Wilto

Button text gets repeated in VoiceOver (issue 2594) – Button text is no longer read aloud twice (and treated astwo separate navigable items) in iOS VoiceOver. Thanks rogerjohansson and Wilto

Buttons not keyboard accessible without hover outline (issue 2639) – Restored focus outline on buttons and active state to help with keyboard navigation. Thanks SteveALee

Navigating to root “/” does not generate clean URL if root page has id=”*” (issue #2644) – A few key changes to note:

Fixed a bug in the hashchange handler for the pushstate/replacestate plugin that was incorrectly resolving hashchanges for ids against the current location.href, which could be a different document. We now resolve id hashes against the document URL.
Modified changePage() so that it sets the settings.dataUrl option to the documentUrl, when navigating to the first-page of the application document. This prevents any id on the first-page from being added to the location hash. This means that URLs that used to be produced like this: http://site.com/apps/#first-page-id will now display as: http://site.com/apps/
Developers that wish to get the old behavior back can register a pagebeforechange handler and do something like this:$( document ).bind( "pagebeforechange", function( e, data ) {var toPage = data.toPage;if ( typeof toPage === "object" && !data.options.dataUrl && toPage[ 0 ] === $.mobile.firstPage[ 0 ] && toPage[ 0 ].id ) {data.options.dataUrl = “#” + toPage[ 0 ].id;}}); The handler above will make sure that any page changes to the first-page will always display as: http://site.com/apps/#first-page-id

First and last icons in inset icon list are rounded (issue 2593) – Prevent application of ui-corner-bl and ui-corner-tl classes to ui-li-thumb elements that have a class of ‘ui-li-icon.’

Button alignment issues with list dividers, search clear button, submit buttons in listviews (issues 2571, 2590, 2576) – All three issues were caused by improperly-scoped position: relative; on .ui-btn-text, within listviews. Thanks Wilto

Added another check for orientation change event for Android 2.1 – This wasn’t firing reliably in previous builds

Add the ability to disable native orientation change support (issue 793) – the frequency of the triggered event in certain android releases ( 2.1, 2.2) appears to be dependent on a host of things other than an actual orientation change, eg alerts, zoom, and scrolling. This provides a way for the user to disable it in favor for using throttled resize while still making use of the window.orientation where its available for reliability

Firefox 7.0.1 – Collapsible heading gets truncated at the beginning of string (issue #2653) – Fixed by tweaking positioning. Thanks MauriceG!

Textarea doesn’t AutoGrow height with pre-filled values (issue 509) – If textarea had a pro-populated value, it wasn’t expanding when initialized. Thanks roark31337

Arrow on formatted listviews no longer clickable (issue 1392) – Accounts for z-index issues with input type=subm.it/button elements, icons, and text within .ui-btn, both inside and outside listviews (including split views). Thanks Wilto

Select element text overflow issue inside of listview on iOS (issue 2647) – Ensure overflow: hidden is applied to .ui-btn-text inside selects inside of listviews. Thanks Wilto

Prefetched dialog not rendered (issue 2335) – We now render prefetched pages according to their data-rel attr fixes to catch these scenarios

Re-vamped the navbar docs to fix incorrect info about icon positioning and theming. (issue 1858, 1797, 2667, 1180, 2373) – The docs incorrectly stated that the icon position could be set perlink, but this is intended as a global setting for the navbar parent.This is working as designed and helps with visual consistency. If icon positioning needs to be be adjusted per link, you will need to manually apply the right classes through JS and may need to tweak CSS because top/bottom and left/right positions have different heights.

Adjust -moz-background-clip value for older Firefox versions (issue 2677) – An issue only with the Valencia theme, -moz-background-clip syntax needed adjustment

“degradeInputs” plugin doesn’t trigger on “create” events (issue 2654) – Previously was bound to enhance, changed to create

Allow users to define keepnative on page elements – Change allows for more flexibility

List search with dividers breaks fixed footer (issue 2348) – Fixed header/footer code now listens for a custom event contentmodified on the document to figure out if it should be repositioned or not. Modified collapsible and listview to fire off contentmodified whenever they modify content. Developers can also fire off this event to trigger position updates for fixed headers/footers, so this could be used to address issue #2042 and the mention of collapsible in #2596.

Refined styles so titles in footer aren’t truncated as aggressively (issue 2706) – Titles in headers and footers had the same padding value in the CSS,but we don’t support the same markup conventions for left/right buttonslot in the footer so this was truncating too early.

Fixed dialog reverse transition logic (issue 2699) – Moved the settings.transition calculation code before the code that pushes a new history item on the stack. This ensures that the proper transition is stored with the history item.

Added a new .ui-hidden-accessible class for hiding elements in an accessible way; also added ui-hide-label class to similarly hide labels/adjust layout within field containers.

Properly apply “disabled” styling and logic to flip switches, sliders, and custom selects (issue 2541) – based on disabled attribute in underlying input markup.

Disable cursor events on all disabled custom form inputs by adding the pointer-events: none; rule which works in many modern browsers.

Buttons don’t inherit page-theme (issue 2659) – Insert the fake button container before calling buttonMarkup(). This allows the buttonMarkup() code to accurately calculate theme inheritance.

Added support for new HTML5 date and time input types (issue 2144) – Types added: input type time, date, month, week, date time, datetime-local to auto for enhancements. Also added support for type=color.

Buttons now properly support the data-shadow, data-corners and data-iconshadow attributes. Thanks matthewleon!

CSS Restructure for separation of structure and theme (issue 2700) – Created a /css/ folder and a /structure/ and /theme/ folder inside for better organization. Thanks eddiemonge!

Theme inheritance optimizations – Removed all of the redundant code used to crawl the DOM upward looking for a theme to inherit from, and replaced it with a call to the new $.mobile.getInheritedTheme() function.Also, fixed a bug in textinput.js that was placing a ui-body-null class on the input element when a data-theme was not specified directly on the input.

Custom selects now behave as expected within vertical/horizontal controlgroups (issue 518) – Docs have been updated accordingly. Thanks Wilto!

Title is custom select menus now updates correctly – Thanks MauriceG

Dialogs now have a max-width of ~600px (issue 2729) – This makes dialogs look better on tablet and larger sizes previously these were 100% width which looked odd on large screens and made text hard to read. Also applies to full-screen selects.

Switched to stop propagation on checkbox/radio with vmouse events

Added new custom event called updatelayout that is used by widgets like collapsible and listview filters to tell other widgets like fixed toolbars that they need to re-calculate their position because the layout has changes. Added a new Layout Events section in the events documentation.

1.0 RC2 upgrade notes

Note these are the same notes from RC1, just repeating for those that skipped that release. In preparation for jQuery Mobile 1.0 final, we’re removed a number of items that we deprecated earlier in beta. Please note that if you are running on an alpha or early beta codebase, many of these could be breaking changes.

Deprecated Media Helper classes have been removed from the build and the docs. The page is still in the docs for Google’s sake and the code can be found in the repo if you want to make a custom build that includes these features.

Deprecated re-named page events – the deprecated beforechangepage (now pagebeforechange), changepage (now pagechange), and changepagefailed (now pagechangefailed) events references have been dropped in preparation for the 1.0 release. See the events API documentation and commit log for more info.

Removed support for the alpha signature of $.mobile.changePage() in preparation for 1.0. Folks now how to use the signature that requires the toPage (url or element) as the first arg, and options object as the 2nd. See the events API documentation and commit log for more info.

Removed deprecated navigation related properties: $.mobile.updateHash$.mobile.urlstack. See commit log for details.

Removed the deprecated $.fixedToolbars property in preparation for 1.0. See commit log for details.

Removed $.mobile.pageLoading() call which was replaced by $.mobile.showPageLoadingMsg()and $.mobile.hidePageLoadingMsg(). See commit log for details.

Download

CDN-Hosted JavaScript:

Uncompressed: jquery.mobile-1.0rc2.js (useful for debugging)
Minified and Gzipped: jquery.mobile-1.0rc2.min.js (24KB, ready to deploy)

CDN-Hosted CSS:

Uncompressed with Default theme: jquery.mobile-1.0rc2.css (useful for debugging)
Minified and Gzipped with Default theme: jquery.mobile-1.0rc2.min.css (7KB, ready to deploy)
Uncompressed structure without a theme: jquery.mobile-1.0rc2.css (useful for theme development)
Minified and Gzipped structure without a theme: jquery.mobile-1.0rc2.min.css (6KB, ready to deploy)

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

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

Microsoft CDN hosted jQuery Mobile files:
http://www.asp.net/ajaxLibrary/CDNjQueryMobile10rc2.ashx

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

Zip File: jquery.mobile-1.0rc2.zip (JavaScript, CSS, and images)

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

Platform support in 1.0 RC2

We’re excited to announce that as of 1.0 RC2, we’ve covered all our target platforms for the project. At this stage, we have 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.

Our graded support matrix was created over a year ago based on our goals as a project and since that time, we’ve been refining our grading system based on real-world device testing and the quickly evolving mobile landscape. To provide a quick summary of our browser support in Beta 1, we’ve created a simple A (full), B (full minus Ajax), C (basic) grade system with notes of the actual devices and versions we’ve been testing on in our lab.

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

Apple iOS 3.2-5.0 beta – Tested on the original iPad (3.2 / 4.3), iPad 2 (4.3), original iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), and 4 (4.3 / 5.0 beta)
Android 2.1-2.3 – Tested on the HTC Incredible (2.2), original Droid (2.2), Nook Color (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 Honeycomb– Tested on the Samsung Galaxy Tab 10.1
Windows Phone 7 – Tested on the HTC 7 Surround
Blackberry 6.0 – Tested on the Torch 9800 and Style 9670
Blackberry 7 – Tested on BlackBerry® Torch 9810
Blackberry Playbook – Tested on PlayBook version 1.0.1 / 1.0.5
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 (Beta) – Tested on Android 2.2
Opera Mobile 11.0: Tested on the iPhone 3GS and 4 (5.0/6.0), Android 2.2 (5.0/6.0), Windows Mobile 6.5 (5.0)
Meego 1.2 – Tested on Nokia 950
Kindle 3: Tested on the built-in WebKit browser included in the Kindle 3 device
Chrome Desktop 11-13 – Tested on OS X 10.6.7 and Windows 7
Firefox Desktop 3.6-4.0 – Tested on OS X 10.6.7 and Windows 7
Internet Explorer 7-9 – Tested on Windows XP, Vista and 7 (minor CSS issues)
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.0) – Tested on iOS 3.2/4.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

Not Officially Supported – May work, but haven’t been thoroughly tested or debugged

Samsung Bada – The project doesn’t currently have test devices or emulators, but current support is known to be fairly good. Support level undecided for 1.0

jQuery Mobile 1.0 RC1 Released!

Posted on September 29, 2011 by Todd Parker

The jQuery Mobile team is thrilled to announce the first release candidate for version 1.0. This new release brings a long list of bug fixes, refinements and optimizations, as well as support for the Meego platform.

Our plan is release additional RCs at a quick pace as we close critical bugs and move towards the 1.0 release. We’re targeting a 1.0 release within the next few weeks.

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

KEY CHANGES

Collapsibles: Design improvements

We just made a few final tweaks to the collapsible and accordion widget that really improves the visual design. First off, we’ve removed the extra button style around the +/1 icons which made this look too much like a separate interactive element (it’s not, the whole bar is clickable) and cleans up the visual appearance.

We also added the option to add theme swatch to the expanded collapsible content by adding a data-content-theme attribute to the collapsible container. When this is added, the rounded corners on the header square off and the bottom of the content container is rounded instead to give this a cohesive appearance. You can apply any of your theme’s body swatch letters and the flat background color (not the gradient) and border will be applied. This feature works in both individual collapsibles and collapsible sets (accordions). If this attribute isn’t added, the collapsible look the way they did previously so there is no impact to existing sites.

iOS5 transitions & fixed toolbars: Refined, but off by default (for now)

The new iOS5 page transitions and true fixed headers have been improved significantly since Beta 3 but after much debate, we’ve decided to have this feature off by default for now because we want to wait for the final version of iOS5 to arrive so we can test this thoroughly. Note that we’re now using a 3D transform CSS rule reduce page rendering artifacts which could cause memory use issues on very complex pages so you may need to override this selectively. To mitigate some usability issues with overflow containers and fixed headers, we’re also disabling zoom by injecting a meta viewport tag only for iOS5 if this feature is enabled. We’re hoping this won’t be necessary long-term but this is the short-term fix.

Search input: Icon themeable and retina-ready

The small search icon in the search input was the last standalone icon that hadn’t yet been integrated into the standard icon sprite. We just made the switch so now the icon is fully themable and includes the HD retina icon version too. To do this, we had to place the icon inside the standard icon disc so the appearance is a bit different, but it now matches the rest of the UI system. Note that we’re adding this though a CSS technique that isn’t supported by IE 6-7 so in those browsers, the icon won’t appear (please don’t file a bug!).

ThemeRoller Mobile: Coming soon!

We’ve been working on a completely new ThemeRoller tool, built from the ground-up for jQuery Mobile. Tyler Benzinger from Adobe has been spearheading the development effort (thanks Tyler!) and we’re very close for having a beta version ready for release. We’re really excited to show it off because there are a lot of super cool features that make it drop-dead-simple to build a stunning theme in minutes.

If you’re going to be at the jQuery Conference in Boston, you’ll get a sneak peek during the mobile keynote with Scott and Todd. Look for a beta version to be launch within the next week or two.

Download builder: In the works

Now that we’ve decoupled most of the UI widgets, we’ve set the stage for there to be a download builder. This will let you build a custom version of jQuery Mobile to only include the parts you need. For example, you could just use the core files to add Ajax-based navigation with pushState and leverage some of the touch events and other utilities with a very lightweight build (roughly 10k). Or, you could add in specific UI widgets like form elements, listviews, etc. to create an optimized build. We’re aiming to have a download builder tool launch as part of 1.0 final in some form. We’re working on a dependency map now for all the plugins to support this tool.

API Documentation: Expanded for all form widgets

We’ve been working on adding more traditional API-style documentation for many of our widgets and, with the help of volunteers and Maggie Wachs, we’ve now covered all the form elements: buttons, text inputs, slider, flip switch, radio buttons, checkboxes, and selects in addition to bulking up docs on the touch, virtual mouse and page events. We’ll continue to refine and extend our docs as we head toward 1.0 final.

Platform support in 1.0 RC1

We recently received a slick MeeGo device from Nokia for testing and we were thrilled to find that jQuery Mobile worked beautifully the first time we fired it up. This has to be one of the easiest platform additions we’ve had and it shows how our focus on web standards and feature detection is really paying off.

We’re excited to announce that as of 1.0 RC1, we’ve covered all our target platforms for the project. At this stage, we have 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.0 beta – Tested on the original iPad (3.2 / 4.3), iPad 2 (4.3), original iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), and 4 (4.3 / 5.0 beta)
Android 2.1-2.3 – Tested on the HTC Incredible (2.2), original Droid (2.2), Nook Color (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 Honeycomb– Tested on the Samsung Galaxy Tab 10.1
Windows Phone 7 – Tested on the HTC 7 Surround
Blackberry 6.0 – Tested on the Torch 9800 and Style 9670
Blackberry 7 – Tested on BlackBerry® Torch 9810
Blackberry Playbook – Tested on PlayBook version 1.0.1 / 1.0.5
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 (Beta) – Tested on Android 2.2
Opera Mobile 11.0: Tested on the iPhone 3GS and 4 (5.0/6.0), Android 2.2 (5.0/6.0), Windows Mobile 6.5 (5.0)
Meego 1.2 NEW – Tested on Nokia 950
Kindle 3: Tested on the built-in WebKit browser included in the Kindle 3 device
Chrome Desktop 11-13 – Tested on OS X 10.6.7 and Windows 7
Firefox Desktop 3.6-4.0 – Tested on OS X 10.6.7 and Windows 7
Internet Explorer 7-9 – Tested on Windows XP, Vista and 7 (minor CSS issues)
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.0) – Tested on iOS 3.2/4.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

Not Officially Supported – May work, but haven’t been thoroughly tested or debugged

Samsung Bada – The project doesn’t currently have test devices or emulators, but current support is known to be fairly good. Support level undecided for 1.0

1.0 RC1 upgrade notes

In preparation for jQuery Mobile 1.0 final, we’re removed a number of items that we deprecated earlier in beta. Please note that if you are running on an alpha or early beta codebase, many of these could be breaking changes.

Removed deprecated navigation related properties: $.mobile.updateHash$.mobile.urlstack. See commit log for details.

Removed the deprecated $.fixedToolbars property in preparation for 1.0. See commit log for details.

Removed $.mobile.pageLoading() call which was replaced by $.mobile.showPageLoadingMsg()and $.mobile.hidePageLoadingMsg(). See commit log for details.

Change log

Updated jQuery Mobile to run on jQuery core 1.6.4 to keep up with the latest and greatest.

Add new pageremove event (issue 2537) – Modified the pagehide callback in $.mobile._bindPageRemove() so that it fires off a “pageremove” event. Callbacks can prevent the removal of the page by simply calling preventDefault() on the pagremove event object that is passed to their callback.

Windows Phone 7 : icon-only buttons aren’t showing up (issue 1230) – Fixed by removing and extranious “text-indent: -9999px” CSS rule set on the buttons themselves, which was causing IE to hide the icons (as they’re inline).

Disabled touch overflow scrolling for iOS5 by default– overridable through $.mobile.touchOverflowEnabled to opt iOS5 devices will benefit from the improved animated page transitions and true fixed headers. Once iOS5 lands in it’s final form, we’ll consider whether to enable by default.

Hardware accelerate elements within the page in touch-enabled scenarios to prevent hidden elements (not just blinking, but flat-out disappearing) in iOS5

Disable user scaling when that overflow scrolling is enabled – When touch overflow scrolling is supported and enabled, user scaling can create serious usability issues where it’s difficult to get zoomed back out. (currently only projected for ios5 support)

iOS5 scrolling rendering bugs (issue 2415) – applied a 3D transform gets rid of the element peekaboo issue for headers, and other content in the page not rendering. We’ll need to monitor this to see what the memory impact is before keeping it.

Removed the separate search icon image and used the one from the icon sprite. Because of this, we’ll save a request and now have a HD (retina) icon, but the icon is slightly different as a result (it has a disc, making it consistent with other icons in the framework).

Transition to the same page (issue 2529) – Added a new allowSamePageTransition option to the changePage() method default settings. By default, we prevent changePage() requests when the fromPage and toPage are the same element, but folks that generate content manually/dynamically and reuse pages want to be able to transition to the same page. To allow this, they will need to change the default value of allowSamePageTransition to true, *OR*, pass it in as an option when they manually call changePage().It should be noted that our default transition animations assume that the formPage and toPage are different elements, so they may behave unexpectedly. It is up to the developer that turns on the allowSamePageTransition option to either turn off transition animations, or make sure that an appropriate animation transition is used.

Targeted the workaround for auto-correct for iOS4 and below (issue 785) – jQM text input forces use of iOS auto-correction seems to be fixed on iOS 5 devices. This is still a problem on iOS 4.x and earlier so we’re just targeting the workaround a bit better now. We don’t have a specific test for iOS 5 so we use $.support.touchOverflow as an iOS 5 and later indicator.

Added new data-content-theme attribute (issue 1899) – this styles the content of the collapsible data-theme and data-content-theme inherit collapsible-set’s. Part of the larger collapsible design cleanup effort.

Links in collapsible block with data-content-theme inherit text-style (issue 2527) – Switched to using ui-body-* instead of ui-btn-up-* for collapsible content

Collapsible heading vclick issue (issue 2212) – Switch to using “click” instead of “vclick” on collapsible headers since that is the only reliable way to prevent uncaught/mismatched clicks from firing on a different element. Thanks marcing!

Adjusted the fallback heights to address iOS5 fixed footer alignment issues (issue 2415)

Adjusted positioning of selects in touch overflow scroll mode for iOS5 (issue 2415)

Fixed $.jqmData() behavior to match $.fn.jqmData()

Inputs without a type specified not styled (issue #2205) – added inputs without a type to the text input list

Navigation regex breaking Firefox >3.6 (issue 1514) – Remove greedy matches from start and end of regex – there’s no need for them, and they cause immense slowdown (on the order of 3-4 seconds on medium-size pages loaded via ajax). Thanks MaxThrax!

Add internal dependent tracking functions for jQuery Mobile objects

Force close logic of custom select to run when close is clicked, centralize the binding for pagehide.remove

Restored button inline button styling (issue #2496)- Fixed by defining inline as an option in the button markup plugin. The recent jqmData changes exposed this issue. Default for this option is false.

Listview arrow icons not clickable (issue #2516) – Tightened scope of a previous fix for clicks not registering on listview buttons’ icons. Thanks Wilto!

User can’t specify own error handling logic (issue #2503) – Added the following notifications to $.mobile.loadPage(): pagebeforeload – Triggered just before loadPage() attempts to dynamically load an external page. Developers can prevent the default loading behavior by calling preventDefault() on the event. If preventDefault() is called, it is up to the developer to call resolve()/reject() on the deferred object passed within the data object (2nd arg to the event callback). pageload– Triggered after an external page has been loaded and inserted into the document. pageloadfailed – Triggered when the load of an external page fails. Developers can prevent the default behavior (error dialog display) by calling preventDefault() on the event. If preventDefault() is called, it is up to the developer to call resolve()/reject() on the deferred object (2nd arg to the event callback).

Enable forms to submit to the same page – When a form is submitting via post to a url that already has a page represented in the DOM, replace the current page with the response page of the same url (post params are not passed via q string, so the URLs are identical).

Form buttons no longer submit forms in Internet Explorer 8 (issue 1927) – Using “filter” for opacity was causing strange issues in IE, making all but the text on submit inputs click-proof.

Data-type attribute not applied to search input in IE (issue 2490)- IE (and WP7) were not properly degrading form inputs via the degradeinputs plugin (and search inputs were not being styled as such)

Prevents “undefined is null or not an object” error in IE, when .scrollTop() was being called before the body was ready. Thanks Wilto!

Submit inputs’ values are added to the form as a hidden input — this ensures it will only happen once for jQuery’s serialize, and that this logic only applies to submit inputs with a name attribute. Thanks Wilto!

Prevent styling list count bubbles unless list is enhanced. Thanks bjohn465!

New widgetinit event for users to enhance widgets and markup post widgetcreate

Flip toggle switch with change event bound, triggers multiple times (issue 2315) – Modified refresh() so that it checks to see if the value actually changed before firing off the “change” event.

Native checkboxes and radio buttons partially visible under custom controls (issue #1336) – Fixed by tweaking styles to float native controls rather than being inline, to fix height and properly hide checkboxes/radios. Thanks Wilto!

Arrow on formatted listviews no longer clickable (issue 1392) – Positions .ui-icon on lower z-index than .ui-btn-text, ensuring the click will register on the latter. Thanks Wilto!

Fixed $.jqmData() behavior to match $.fn.jqmData()

Can’t link to dynamically created data-role=”page” (issue 1243)- Modified loadPage() so that if the data-url lookup for a given page fails, that it look for the page via id (if it is an embedded page URL). This allows us to find dynamically injected pages that are un-enhanced and missing their data-url attributes.

Fix for change page flicking in landscape orientation on iPad (issue 2474) – On iOS, giving focus to the ui-page element causes flashing during page animations/transitions. This is due to the CSS outline property which is applied when the page is given focus. Turning outlines off for all pages prevents the flashing.

Resolved label vertical alignment inconsistency of form elements (issue 2192). On wider screens or landscape orientation, for text-inputs, radios, sliders and checkboxes the vertical-align is top, for flip-switches and select-lists the vertical-align is baseline in all swatches. Thanks MauriceG!

Adjusted timing of when the orientation and resize classes are added to the body because the original mobileinit timing was limiting the ability to dynamically append jQuery Mobile. Thanks @martynsmith!

Removed the top “glow” border on icon-only buttons in split button lists (issue 1900). The border-radius was too large for the button which caused it to render as a straight line and break out of the button, removing this cleans up the appearance. Thanks MauriceG!

Fix for dialogs not working if $.mobile.ajaxEnabled = false (issue 2451 and 2202) – Modified the default click handler to check if the href is for an embedded page before bailing when ajaxEnabled = false. This allows us to navigate to internal/embedded pages/dialogs on the click versus waiting for the accidental hashchange that was the result of the browser’s default handling of hash fragments.

jqmHasData cleanup for jQuery 1.7 (issue 2455)- Changed behavior of .jqmData() only when called with no argument. It now returns undefined.

Fix for URL handling and PlayBook Webworks app (issue 2050) – Modified the url parser regexp so that we can find the double slash that precedes the authority. This is necessary so we can reconstruct resource urls used on some devices like Rim’s Playbook that use urls like:location:/dir1/dir2/file.html. Also modified makeAbsoluteUrl() so that it uses the new doubleSlash property in the object returned from parseUrl() instead of assuming that it is ok to use a double slash.

Namespace support for header and footer button icons (issue 1361) – When a namespace is used, the buttons in the header and footer icons wouldn’t appear. Fixed by mixin individual properties to options instead of calling .jqmData()

Fix for right/middle click issue in Firefox (issue 2438) – In Firefox, right-clicking on a linked-element results in the normal click event being fired instead of allowing the context menu to be displayed.

Navigation from one page back to multi-page template (issue 2406) – We now make sure that our hashchange resolves non-path hashes against the documentBase. This prevents the resulting changePath() call from incorrectly resolving against the URL for the current active (external) page. Also fixed a related issue where when push-state is turned on, the hashchange event is not fired when doing a window.history.back() from an external URL to an embedded page.

Page removal code for listviews removes embedded pages (issue 2432) – Added a new data attribute tag for pages loaded via ajax to keep track of whether to remove pages in this situation.

Fixed select element theme support (issue 2423) – Fixed a regression where directly applying a data theme to a select element no longer themes the select element. It only gets its theme from the parent, regardless of what you tell it.

Select menu refresh() improvements – fix refresh bug for new options of the same number as before

Improved qualifications so that iOS5 gets the old-style fixed headers and footers when touchOverflow is disabled (which is the default).

Download

CDN-Hosted JavaScript:

Uncompressed: jquery.mobile-1.0rc1.js (useful for debugging)
Minified and Gzipped: jquery.mobile-1.0rc1.min.js (24KB, ready to deploy)

CDN-Hosted CSS:

Uncompressed: jquery.mobile-1.0rc1.css (useful for debugging)
Minified and Gzipped: jquery.mobile-1.0rc1.min.css (7KB, ready to deploy)

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

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

Microsoft CDN hosted jQuery Mobile files:
http://www.asp.net/ajaxLibrary/CDNjQueryMobile10rc1.ashx

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

Zip File: jquery.mobile-1.0rc1.zip (JavaScript, CSS, and images)

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

jQuery Mobile Beta 3 released!

Posted on September 8, 2011 by Todd Parker

The jQuery Mobile team is happy to announce the release of Beta 3. This brings the last batch of features and API changes to the library before 1.0. Beta 3 includes some really great improvements: pushState support, beforechangepage event for building dynamic page, slick fixed headers and transitions for the forthcoming iOS5 platform, and a long list of fixes and improvements. We’ve also decided to delay our planned switch from keyframes to transitions for animated page transitions because the browser support and performance isn’t up to par yet in our testing. More info on what’s new below.

We’re now feature-complete and working on our first RC for the 1.0 release which is targeted for the end of the month.

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

KEY CHANGES

pushState: Now, clean URLs with Ajax-based navigation

We’ve been working very hard to add pushSate to jQuery Mobile. After many months and at least 6 complete attempts and the hard work of everyone on the team to get this right, we’ve finally landed this feature. Since we use Ajax-based navigation extensively throughout a jQuery Mobile experience, we need to track each page with a hash change which can make for some pretty long and unwieldy URLs, but it was a small price to pay to supporting the Back button and deep linking to pages.

Now with the addition of pushState, we’re able to update the URL to the clean, standard path in browsers that support this feature. Technically, we use history.replaceState() because this allows us to layer pushState support and an enhancement to our existing, and widely supported, hashchange-based navigation model. We essentially let the hash change happen, then replace the URL with the clean, full path of the page in browsers that support this capability.

This works in later versions of desktop Safari, Chrome, Firefox and Opera as well as Android (2.2+ and Honeycomb) and the soon-to-be-released iOS5. In browsers that don’t support this feature, the hash-based URLs will continue to work as the did before to preserve the ability to share and bookmark URLs. On the RIM PlayBook, there is a small browser bug that doesn’t update the URL correctly unless you refresh the page so copying a link from this device may not be correct, we’re working with them to track down a fix.

The pushState feature is implemented as an extension to the the navigation code so it can be easily pulled out of the build if it’s not needed on a project. It’s also possible to turn this feature off by setting the pushStateEnabledglobal option to false, like this:

$.mobile.pushStateEnabled = false;

Pro tip: How to view the source of a jQuery Mobile page

Since we use Ajax to pull multiple pages into the DOM, if you view the source you will see the code for the first page you visited unless you use a web inspector tool like Firebug to view the current DOM. Now with pushState in place, to view the source, simple refresh the page and view source. In browsers that don’t support pushState, you need to edit the URL to remove the redundant part of the hash to get full page path, then reload to view the source. Hopefully, this will make exploring the docs a bit easier for people.

New beforechangepage event: Simple hook for building dynamic pages with JavaScript

jQuery Mobile allows pages to be pulled into the DOM dynamically via its default click hijacking behavior, or through manual calls to $.mobile.changePage(). This is great for applications that generate HTML pages/fragments on the server-side, but there are sometimes cases where an application needs to dynamically generate page content on the client-side from JSON or some other format. This may be necessary for bandwidth/performance reasons, or because it is the data format of choice for the server they are interacting with.

For applications that need to generate page markup on the client-side, it’s important to know about the notifications that are triggered during a $.mobile.changePage() call because they can be used as hooks into the navigation system that will allow you to generate your content at the appropriate time.

A call to changePage() will usually trigger the following event notifications:

pagebeforechange
- Fired off before any page loading or transition.
- NOTE: This event was formally known as “beforechangepage”.
pagechange
- Fired off after all page loading and transitions.
- NOTE: this event was formally known as “changepage”.
pagechangefailed
- Fired off if an error has occurred while attempting to dynamically load a new page.

These notifications are triggered on the parent container element ($.mobile.pageContainer) of pages, and will bubble all the way up to the document element and window.

For applications wishing to inject pages, or radically modify the content of an existing page, based on some non-HTML data, such as JSON or in-memory JS object, the pagebeforechange event is very useful since it gives you a hook for analyzing the URL or page element the application is being asked to load or switch to, and short-circuit the default changePage() behavior by simply calling preventDefault() on the pagebeforechange event.

To illustrate this technique, take a look at this working sample. In this sample, the main page starts off with a list of categories that the user can navigate through. The actual items in each category are stored in a JavaScript object in memory, for illustrative purposes, but the data can really come from anywhere.

To learn more, visit the new documentation page.

iOS5: Dramatically improved page transitions and true fixed toolbars

The team has spent a ton of time working on trying to improve transitions and fixed toolbars because we know these are important features to developers. After spending hundreds of hours working on refinements, we now believe that the path to substantial, cross-platform improvements in these areas can only happen when mobile platforms start supporting overflow properties natively. JavaScript-based momentum scroller scripts are too heavy, unresponsive and narrowly compatible to be a way forward.

That’s why we’re very excited by iOS5’s upcoming support for a touch-targeted version of overflow:auto , and proper support for position:fixed which allows for internal scrolling regions with the native momentum scrolling with CSS. In Beta 3, we’ve added an enhancement layer to leverages these new CSS capabilities to will enable us to bring both truly “fixed” toolbars and super smooth transitions in iOS5, all by using web standards and very little additional code.

Think of this as an enhancement to what we have now: if the overflow: and -webkit-overflow-scrolling:touch properties are supported, we can make sure toolbars stay fixed and eliminate the scrolling jumps between transitions by placing each page in a container with internal scrolling. Coupled with iOS’s already-excellent hardware-accelerated transitions, we now can build interfaces that are very close to native performance and appearance.

The only downside we’ve seen is that the -webkit-overflow-scrolling:touch property seems to disable the events to scroll you to the top of the page when the time is tapped in the status bar, but we’re hoping Apple will fix this by the time iOS5 goes public.

In Beta 3, we’ve implemented this native scrolling behavior as a new global option called touchOverflowEnabled. For now, this feature is off by default to give us a a bit more testing and debugging (custom selects and toolbars can be a bit flaky). We plan on turning this feature on by default by 1.0 and we’re hoping iOS 5 is out by then too.

For those using the iOS5 beta now, check out this demo with touchOverflowEnabled activated on to see how smooth the experience can be. For everyone else, check out the video.

Don’t other mobile platforms already support overflow?

Yes, but there’s a catch. Both Android Honeycomb and the Blackberry PlayBook support overflow: properties, but we found in testing that their implementation of overflow wasn’t smooth enough so pages would stutter and hang during scrolling, leading to an unusable experience. If you’d like to test drive the overflow performance on these other platforms to see why we exclude them, check out this demo that skips the feature test. Note: we’re not excluding any browsers from the overflow:auto styles in this link and this can make the pages unusable on many platforms (iOS and Android) – do not use this code on your site!

More importantly, targeting overflow correctly is a major issue. If we simply placed an overflow: auto CSS rule on the pages, other popular mobile platforms like older versions of Android and iOS would essentially just clip off the content and make it effectively inaccessible (yes, you can can do a two-finger scroll gesture in iOS but nobody knows that). The smart thing about Apple’s implementation for iOS5 is that they added an additional CSS property -webkit-overflow-scrolling:touch that allows us to test for this touch scrolling property and, if supported, add in the overflow rules for just those browsers. This is the only safe way to target overflow without resorting to complex and unmaintainable user agent detection.

We will be working with device and browser makers to encourage support for both these CSS-based properties because we strongly believe that this a critical piece needed to build rich mobile web apps. The project will add any vendor-prefixed additions to touch scrolling property if, for example, Opera, Firefox or Microsoft added this support. Once people see how much better page transitions and fixed toolbars are on iOS5, we’re hoping this will be supported quickly by other browsers. JS-based scroller scripts may still have a place in this new world as a polyfill for browsers that don’t yet support these new CSS capabilities but we see this as a brief, interim tool in the evolution of the mobile web.

Switch from keyframe to transitions for animations: Post 1.0

We currently use keyframe-based animated page transitions whose support is mostly limited to Webkit browsers (with Firefox 5 as a recent exception). We’ve been spending a lot of effort in recent months working to switch over to using CSS transitions for our page animations which is a W3C web standard and paves the way much broader support for page animations over time.

In final testing, however, the switch to transitions isn’t the panacea we’d hoped. In extensive testing in our lab, we’ve found that there is little difference in the smoothness of animations between keyframe and transitions on the browsers that already supported animations — iOS, Android and BB6/PlayBook. The bigger disappointment is that the mobile counterparts of the browsers that prompted this switch either don’t support transitions at all (Firefox Mobile) or have poor performance (Opera Mobile) and we can’t flip the switch for the desktop versions without impacting their mobile counterparts since they both use the same vendor prefix.

After a lot of deliberation, we’ve decided that although this is the right direction for the project, this isn’t the right time to make the switch. The new plan is to shelf this code and plan on switching to transitions as soon as we feel that the browsers we’re targeting have the support and performance level that makes this a positive step forward. This will happen post-1.0, but probably within the next 3-6 months.

Download builder: In the works

Now that we’ve decoupled most of the UI widgets, we’ve set the stage for there to be a download builder. This will let you build a custom version of jQuery Mobile to only include the parts you need. For example, you could just use the core files to add Ajax-based navigation with pushState and leverage some of the touch events and other utilities with a very lightweight build (roughly 11k). Or, you could add in specific UI widgets like form elements, listviews, etc. to create an optimized build. We’re aiming to have a download builder tool as part of 1.0.

Platform support in Beta 3

As of Beta 3, we’ve pretty much covered our target platforms for 1.0. At this stage, jQuery Mobile works on the vast majority of all modern desktop, smartphone, tablet, and e-reader platforms. In addition, feature phones and older browsers are also 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.

The visual fidelity of the experience is highly dependent on 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. We’ll be adding additional vendor-prefixed CSS rules to bring transitions, gradients and other visual improvements to non-WebKit browsers in future releases so look for even more added visual polish as we move towards 1.0.

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

Apple iOS 3.2-5.0 beta: Tested on the original iPad (3.2 / 4.3), iPad 2 (4.3), original iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), and 4 (4.3 / 5.0 beta)
Android 2.1-2.3: Tested on the HTC Incredible (2.2), original Droid (2.2), Nook Color (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 Honeycomb– Tested on the Samsung Galaxy Tab 10.1
Windows Phone 7: Tested on the HTC 7 Surround
Blackberry 6.0: Tested on the Torch 9800 and Style 9670
Blackberry 7 NEW – Tested on BlackBerry® Torch 9810
Blackberry Playbook: Tested on PlayBook version 1.0.1 / 1.0.5
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 (Beta): Tested on Android 2.2
Opera Mobile 11.0: Tested on the iPhone 3GS and 4 (5.0/6.0), Android 2.2 (5.0/6.0), Windows Mobile 6.5 (5.0)
Kindle 3: Tested on the built-in WebKit browser included in the Kindle 3 device
Chrome Desktop 11-13 – Tested on OS X 10.6.7 and Windows 7
Firefox Desktop 3.6-4.0 – Tested on OS X 10.6.7 and Windows 7
Internet Explorer 7-9 – Tested on Windows XP, Vista and 7 (minor CSS issues)
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.0) – Tested on iOS 3.2/4.3
Windows Phone 6.5 – Tested on the HTC
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

Blackberry4.x: Tested on the Curve 8330
All older smartphone platforms and featurephones – Any device that doesn’t support media queries will receive the basic, C grade experience

Not Officially Supported – May work, but haven’t been thoroughly tested or debugged

Meego – Originally a target platform, but Nokia decision to relegate this platform to “experimental”, we are considering dropping support.
Samsung Bada – The project doesn’t currently have test devices or emulators, but current support is known to be fairly good. Support level undecided for 1.0.

Beta 3 upgrade notes

Renamed the beforechangepage and changepage events to pagebeforechange and pagechange respectively. This was done to match the page widget naming of its notifications. Left the triggers for the old events in place but with DEPRECATED comments. Renamed the properties of the data object passed to the page events.

Change log

Added “fromPage” option to changePage(). Restored from the navigation re-work. Added “dataUrl” option to changePage(). This allows a caller to specify a page element to change to, but specify an alternate URL for location display purposes. This is useful for dynamic applications that re-use and over-write existing page content to avoid overwhelming the DOM. Renamed the “beforechangepage” and “changepage” events to “pagebeforechange” and “pagechange” respectively. This was done to match the page widget naming of its notifications. Left the triggers for the old events in place but with DEPRECATED comments. Renamed the properties of the data object passed to the page events.

Modifications to changePage() – Moved the setting of isPageTransitioning after the beforechangepage notification, mModified the trigger(“beforechangepage”) call to pass the args to changePage() as an object since trigger only expects one data arg.

Restore the “lastScroll” behavior to work with the new DOM cleanup (issue #1774) – Added a property to each urlHistory item object, allowing us to remember previous scroll distances when returning to a page that has since been removed from the DOM. Before this change, this number was stored in data on the page element, so it is lost when the page is removed after pagehide. Also, this change removes a reference in memory that we were keeping to the $activeClickedLink on each page. We stored this in attempt to refocus a link after returning to a page. Unfortunately, it doesn’t seem that this data can be retained after pages are removed from the DOM, outside of somehow remembering a unique selector string to reach that element again.

No way to stop a link from being followed with some custom event (tap, taphold) (Issue 1464) – Modified triggerVirtualEvent() so that it returns the virtual event instead of the isDefaultPrevented() result of the virtual event. Updated all references to triggerVirtualEvent() that relied on the boolean return value to instead check the isDefaultPrevented() call on the event now returned. Updated mouseEventCallback() to propagate the iDefaultPrevented(), isPropagationStopped(), and stopImmediatePropagation() values from the virtual event on to the original mouse event. Modified the “taphold” trigger code to create a new $.Event() instead of passing the stale vmousedown event. Added clearTapTimer() which is called from a new vmouseup binding, to prevent the timer from firing between the tie the finger/mouse goes up and the click event is dispatched.

Changed minscroll distance to 250 pixels – We were originally using 50% of the screen height but this was a large value on tablets so we’ve switched to a fixed 25px value by default. This is a configurable option.

Fixed throttledresize (issue 2390)- Fixed typo: ‘throttledResize’ => ‘throttledresize’ that was preventing this feature from working on some platforms. Thanks hbunjes!

Flip toggle switches don’t animate when tapped (Issue 2346) – Tweaked code to match markup and enable animations

Single tap triggers two actions, especially in Android (Issue 1925) – Trigger the list item and keyboard return/space key up to the “click” event instead of “vclick”. This delays the dismissal of the custom select menu until the click event, thereby avoiding the case where the menu disappears before the browser dispatches it’s synthesized mouse events (in the touch case) with a target of whatever element was underneath the menu.

Clear active link on vclick so there can be only one active link at a time (Issue #2017) – This prevents situations where multiple items on a page could have the active state if a user clicked after an Ajax request has started

Changed look and feel of custom select options to match the new, simpler checkbox/radio styles for selects using a custom menus

Added ipv6 support to urlparse regex (issue #2362) – We can now parse ipv6 IP addresses in the Ajax nav system.

Flip toggle switch value toggle (Issue 2345) – We now track whether or not the user has modified the value of the switch control. If so, we don’t toggle it’s value on mouseup.

Added a simple filterCallback in the listview options to delegate complex search logic to end users. This allows you to drop in any search pattern matching logic needed without adding too much complexity to the core filtering code.

Fix for Split Button List dialog having no background and weird line from background image. Thanks jgable!

Brought back the page content div theme inheritance from b1 (issue 2221) Thanks to abdulqadir for the suggestion.

Fix nested waiting-for-dom for initializePage. Using dom-ready within dom-ready meant that initializePage went to the end ofthe queue. That brought problems when other dom-ready code expected jQM to beset up, capable of changing pages and so on. But because $.mobile.pageContaineris also set in initializePage, changePage and others didn’t work. Thanks moll!

Fixed an error in the array reference that was causing support tests to not test properties as they should.

Fix to check the domCache option before rebinding the page remove on select menu. When closing a fullpage select menu we need to check the domCache option before rebinding the page remove handler. If domCache is true the page remove wasn’t bound in the first place, so binding it on menu close will cause the removing of a page that mustn’t be removed. Thanks SamuelKC!

Anchor buttons active class not removed properly (Issue #1405) – Moved assignment of $activeClickedLink to the vclick handler in charge of adding the active state Fixed closing the custom select dialog – The picker wasn’t being closed correctly. Thanks MichelHartmann!

Ellipses too aggressive – truncating overflow early on lists, buttons, form elements (issue 779) – Adjusted padding on buttons

Download

We provide CDN-hosted versions of jQuery Mobile for you to include into your site. These are already minified and compressed – and host the image files as well. It’ll likely be the fastest way to include jQuery Mobile in your site.

CDN-Hosted JavaScript:

Uncompressed: jquery.mobile-1.0b3.js (useful for debugging)
Minified and Gzipped: jquery.mobile-1.0b3.min.js (20KB, ready to deploy)

CDN-Hosted CSS:

Uncompressed: jquery.mobile-1.0b3.css (useful for debugging)
Minified and Gzipped: jquery.mobile-1.0b3.min.css (7KB, ready to deploy)

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

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

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

ZIP File:

Zip File: jquery.mobile-1.0b3.zip (JavaScript, CSS, and images)

jQuery Mobile Beta 2 Released!

Posted on August 3, 2011 by Todd Parker

The jQuery Mobile team is happy to announce the release of Beta 2. This brings a bunch of big improvements to the library including: decoupled widgets so you can include only the components you need, DOM cache management for less memory use, a page pre-cache option, more flexible page structure, improved checkbox and radiobutton designs, advanced features for developers building dynamic JS-driven sites, and even broader device support. It’s been a busy 5 weeks since Beta 1 and we’re really happy with the direction and velocity of the project as we head towards 1.0.

Beta 3 coming – We have a few key improvements we want to land before we switch gears to focus on bug fixes and performance for the first RC for 1.0. Look for Beta 3 within the next month that will include pushState support, improved transitions with support for Firefox and Opera, and even more developer extensibility hooks.

Note that jQuery Mobile 1.0 will require jQuery core 1.6.2 as a baseline. Going forward, we’ll be supporting the two latest major versions of core but we’re starting with a cleaner baseline for launch. Here is a summary of what’s new and improved in Beta 2.

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

Platform support: Expanded for Beta 2

In Beta 2, we’ve added broader support of CSS gradient rules for Opera and Firefox, brought support and testing for Android 2.3 phones and Honeycomb tablets, HP Palm WebOS 3.0 tablets, and added B grade support for newer Nokia S60 devices.

We’re happy to announce that jQuery Mobile Beta 2 now supports Nokia Series 60 smartphones. We’ve had to bump this platform down to B grade support because this platform doesn’t properly support hashchange events in the history stack. This means that Nokia devices will get the enhanced experience except without the Ajax-based animated page transitions.

At this stage, jQuery Mobile works on the vast majority of all modern desktop, smartphone, tablet, and e-reader platforms. In addition, feature phones and older browsers are also 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.0 beta: Tested on the original iPad (3.2 / 4.3), iPad 2 (4.3), original iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), and 4 (4.3 / 5.0 beta)
Android 2.1-2.3: Tested on the HTC Incredible (2.2), original Droid (2.2), Nook Color (2.2), HTC Aria (2.1), Google Nexus S (2.3) NEW. Functional on 1.5 & 1.6 but performance may be sluggish, tested on Google G1 (1.5)
Android Honeycomb NEW – Tested on the Samsung Galaxy Tab 10.1
Windows Phone 7: Tested on the HTC 7 Surround
Blackberry 6.0: Tested on the Torch 9800 and Style 9670
Blackberry Playbook: Tested on PlayBook version 1.0.1 / 1.0.5
Palm WebOS (1.4-2.0): Tested on the Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0)
Palm WebOS 3.0 NEW – Tested on HP TouchPad
Firebox Mobile (Beta): Tested on Android 2.2
Opera Mobile 11.0: Tested on the iPhone 3GS and 4 (5.0/6.0), Android 2.2 (5.0/6.0), Windows Mobile 6.5 (5.0)
Kindle 3: Tested on the built-in WebKit browser included in the Kindle 3 device
Chrome Desktop 11-13 – Tested on OS X 10.6.7 and Windows 7
Firefox Desktop 3.6-4.0 – Tested on OS X 10.6.7 and Windows 7
Internet Explorer 7-9 – Tested on Windows XP, Vista and 7 (minor CSS issues)
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.0) – Tested on iOS 3.2/4.3
Windows Phone 6.5 – Tested on the HTC
Nokia Symbian^3 NEW – 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

Blackberry4.x: Tested on the Curve 8330
All older smartphone platforms and featurephones – Any device that doesn’t support media queries will receive the basic, C grade experience

Not Officially Supported – May work, but haven’t been thoroughly tested or debugged

Meego – Originally a target platform, but Nokia decision to relegate this platform to “experimental”, we are considering dropping support.
Samsung Bada – The project doesn’t currently have test devices or emulators, but current support is known to be fairly good. Support level undecided for 1.0.

KEY CHANGES

Widgets: Now decoupled for flexible builds

We’ve wanted to decouple all our widgets from the page plugin for a long time now and we’re happy to announce that we finally landed this change. So what exactly does decoupled mean anyway? Well, the individual widgets and utilities have always been broken out into separate script files. However, the page plugin was responsible for handling the auto-initialization all of the official plugins found in the markup at page creation. This situation made it impossible to remove plugins you don’t need without causing errors, and generally set a bad precedent for future widget additions.

Now, pretty much all the UI widgets in the jQuery Mobile library are completely decoupled so they can simply be deleted if not needed for a particular project. This change allows you to dramatically reduce the size of the library by only including the specific set of widgets or features you need, in addition to the handful of required, core files. While we still plan to do more decoupling and cleanup, the following files are now decoupled and can safely be removed from the make file before you do a custom build:

page header/content/footer
collapsible
controlgroup
fieldcontain
fixheaderfooter
button
checkboxradio

select
slider
textinput
links theming
listview
navbar
grid

We will work on a dependency map because a few widgets rely on others to work. For example, the button markup plugin is called by many of the widgets above, so it can only be excluded but if you’re not using any of the widgets that depend on buttons.

We’re still working out our recommendations for mapping plugin dependencies and decoupling things even further. Ultimately, this will be surfaced in a download builder tool, so stay tuned!

New “create” event: Easily enhance all widgets at once

While the page plugin no longer calls each plugin specifically, it does dispatch a “pagecreate” event, which most widgets use to auto-initialize themselves. As long as a widget plugin script is referenced, it will automatically enhance any instances of the widgets it finds on the page, just like before. For example, if the selectmenu plugin is loaded, it will enhance any selects it finds within a newly created page.

This structure now allows us to add a new create event that can be triggered on any element, saving you the task of manually initializing each plugin contained in that element. Until now, if a developer loaded in content via Ajax or dynamically generated markup, they needed to manually initialize all contained plugins (listview button, select, etc.) to enhance the widgets in the markup.

Now, our handy create event will initialize all the necessary plugins within that markup, just like how the page creation enhancement process works. If you were to use Ajax to load in a block of HTML markup (say a login form), you can trigger create to automatically transform all the widgets it contains (inputs and buttons in this case) into the enhanced versions. The code for this scenario would be:

$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );

Create vs. refresh: An important distinction

Note that there is an important difference between the create event and refresh method that some widgets have. The create event is suited for enhancing raw markup that contains one or more widgets. The refresh method that some widgets have should be used on existing (already enhanced) widgets that have been manipulated programmatically and need the UI be updated to match.

For example, if you had a page where you dynamically appended a new unordered list with data-role=listview attribute after page creation, triggering create on a parent element of that list would transform it into a listview styled widget. If more list items were then programmatically added, calling the listview’s refresh method would update just those new list items to the enhanced state and leave the existing list items untouched.

New DOM cache management feature: On by default

Since animated page transitions require that the page you’re on and the one you’re transitioning to are both in the DOM, we add pages to the DOM as you navigate around. Until now, those pages would continue to stay in the DOM until you did a full page refresh so there was always a concern that we could hit a memory ceiling on some devices and cause the browser to slow down or even crash.

For Beta 2, we added a simple mechanism to keep the DOM tidy. It works like this: whenever a page is loaded in via Ajax, it is flagged for removal from the DOM once you navigate away to another page (technically, on pagehide). If you return to a deleted page, the browser may be able to retrieve the file from it’s cache, or it will re-request it fro the sever if needed. In the case of nested lists, we remove all the pages that make up the nested list once you navigate to a page that’s not part of the list. Pages that are included in a multi-page setup won’t be affected by this feature at all – only pages brought in by Ajax are managed this way by jQuery Mobile.

A new page option called domCache controls whether to leave pages in the DOM as a way to cache them (the way things used to work) or keep the DOM clean and remove hidden pages (the new way). By default, domCache is set to false to keep the DOM size actively managed. If you set this to true, you need to take care to manage the DOM yourself and test thoroughly on a range of devices.

To set the domCache option on an individual pages in order to selectively cache a page, you can either add the data-dom-cache="true" attribute to the page container or set it programmatically like this:

elem.page({ domCache: true });

The domCache option can also be set globally. This is how to turn DOM caching back on so it works like it did originally:

$.mobile.page.prototype.options.domCache = true;

Page pre-fetch page option added

Another cool feature we recently added is the ability to flag pages that should be pre-fetched by Ajax. For example, if you’re building a photo gallery with each photo on a separate HTML page, you can pre-fetch the previous and next pages in the slideshow sequence so they will display immediately without the Ajax loader. It’s simple to use: just add a data-prefetch attribute to any link in the page and the framework will lazy load the pages into the DOM in the background. We recommend building your apps as a series of individual, linked HTML documents for each page for performance yet we see a lot of people using multi-page templates and even nested lists (yikes) as a way to essentially pre-load content. We hope this feature will encourage developers to use standalone, external pages with selective pre-caching instead of relying as much on multi-page setups.

<a href="foo/bar/baz" data-prefetch>link text</a>

Pages can also be pre-fetched programmatically by calling $.mobile.loadpage( url ). Pre-fetching links will naturally cause additional HTTP requests that may never be used, so it’s important to use this feature only in situations where it’s highly likely that a page will be visited.

New global config option: autoInitializePage

For advanced developers who want more control over the initialization sequence of a page, we’ve just added a new autoInitializePage global config option. Setting this to false disables auto-initialization of plugins on page creation to allow developers to manipulate or pre-process markup before manually initializing the page later on. By default, this option is set to true so things work just like they always did.

Loading message: Now configurable at runtime

Previously, you could customize the loading text message on initialization as an option, but you couldn’t modify it on the fly from within a page if you wanted a different message for the particular situation. We just landed an improvement so you can set the contents of the loading message programmatically at runtime. The syntax is the same as it’s always been, you can just use it more flexibly:

$.mobile.loadingMessage = "My custom message!";

Configurable swipe event thresholds added

There were a number of hard-coded constants in the jquery.mobile.event.js swipe code. For developers who need to tweak those constants to allow a greater vertical displacement and still register a swipe, this new feature allows them to be adjusted. Thanks to mlitwin for contributing this.

scrollSupressionThreshold (default: 10px) – More than this horizontal displacement, and we will suppress scrolling
durationThreshold (default: 1000ms) – More time than this, and it isn’t a swipe
horizontalDistanceThreshold (default: 30px) – Swipe horizontal displacement must be more than this.
verticalDistanceThreshold (default: 75px) – Swipe vertical displacement must be less than this.

Backtrack: We’ve switched back from vclick to click for links

In Beta 1, we decided to use our custom vclick event for handling Ajax links to improve responsiveness and to hide the URL bar on the iPhone and Android phones. Even though we did quite a bit of testing before landing this for Beta 1, we began to hear feedback that this change was causing some significant issues out in the wild including:

Multiple click events causing navigation and form element issue – In certain situations, when tapping an element, tap/click events seem to fire twice on links and is due to edge cases where the target of the touch event and mouse event don’t match due to how the browsers calculate tolerances for these events. This is most pronounced on Android 2.1, but affected most WebKit-based browsers to varying degrees when a tap events occured near the edge of an element.
Click handlers in custom scripts didn’t “work” anymore – if a script bound only to click events on the document, the global vclick feature could interfere because the touch events may supercede click events so it events wouldn’t appear to trigger.

Based on a lot of detailed testing and analysis, we’ve decided to roll back to using standard click events on links instead of using the custom vclick event because it’s the only reliable way to support all our target browsers. There are two important things to note in this change:

URL bar hiding isn’t quite as slick as in Beta 1, but link handling is obviously much more important. The good news is that there is still a significant improvement from Alpha 4.1: although URL bar may appear briefly it overlays the page in iOS instead of pushing down content and causing a re-draw blink. We methodically tried every technique we could to keep the URL bar hidden but there is unfortunately a Safari bug (even in the latest Beta 2 of iOS 5) that makes it impossible to hide the bar reliably.
The useFastClick global option introduced in Beta 1 is now removed because we’re not using vclick globally anymore on links and don’t recommend doing this going forward. We hardly knew ye…

Page wrapper: Now optional

The framework is now more flexible with document structure so now the data-role=page wrapper element is optional. This will ease integration with existing sites, as well as mashups with external content. Previously, if you didn’t wrap your page in a container with this role, the framework wouldn’t enhance the page widgets but now it doesn’t need a page wrapper in the markup to trigger initialization.

The page, header, content, and footer data-role elements have always been optional, but now with this page wrapper change, there is no required markup at all – just start building you page content. Here is an example of a page with none of these structural elements in the markup and everything works great.

Behind the scenes, the framework will inject the page wrapper if you don’t include it in the markup because it’s needed for managing pages, but the starting markup can now be extremely simple. Note that in a multi-page setup, you are required to have page wrappers in your markup in order to group the content into multiple pages.

Checkboxes and Radio buttons: New, Simpler design

Now onto fun fun stuff: the previous design for checkboxes or radio buttons highlighted the entire button background to the active state. We’ve wanted to tweak this for some time because having the full button switch tothe active state could be a bit overwhelming visually, especially on a check list with multiple items selected.

To make these controls a bit simpler visually and also fall in-line with standard UI conventions, now just the check or radio form element flips to the active state instead of the whole button. Note that the horizontal, grouped check and radio groups still flip the while label to the active state color because we hide the form element in these cases.

Gradients: Expanded platform support

We just added additional vendor-prefixed rules for CSS3 background gradients to increase browser support of this feature. There are now Opera (-o) and Internet Explorer (-ms) prefixed gradient rules in addition to the standard, non-prefixed version. Thanks to Paul Irish CCS3 Please for the slick formatting ideas for these rules:


background-image: -webkit-linear-gradient(top, #3c3c3c, #111); /* Chrome 10+, Saf5.1+ */
background-image:    -moz-linear-gradient(top, #3c3c3c, #111); /* FF3.6 */
background-image:     -ms-linear-gradient(top, #3c3c3c, #111); /* IE10 */
background-image:      -o-linear-gradient(top, #3c3c3c, #111); /* Opera 11.10+ */
background-image:         linear-gradient(top, #3c3c3c, #111); /* Standard, non-prefixed */

This now means that our background gradients work in WebKit, Firefox, Opera, Internet Explorer 10 and any other browser that supports the standard, non-prefixed rule. As we mentioned in an earlier blog post, we had to remove the -ms filter gradient rules due to a rendering issue in IE9 that conflicts with border radius and won’t be fixed by Microsoft. This means that older versions of IE will just see a flat background color, including WP7 and the forthcoming Mango release. More info on this bug and decision can be found at issue #2046. This change has been rolled into both the Default and Valencia themes.

All code formatting: Cleaned up & JSlint-ready

Thanks to an intense 24 hour sprint by Rick Waldron of Bocoup, all our code formatting now conforms with with the jQuery core styleguide for whitespace and organization. This also makes the library work with JSLint and other validation tools.

API documentation: Now underway

We’ve been trying a number of different ideas internally on how to add in more traditional API-style docs to the demos & docs site and have a proposed solution that essentially adds a simple tab strip to all the plugin detail pages where we can document the options, methods and events that a more technical developer might need. We’ve tried to strike a balance between presenting the simpler, markup-based approach that a designer may need and the more advanced script-driven details that a developer requires.

We’re looking for volunteers to help us apply this style of docs throughout the rest of the system. To participate, learn more about on how to help us write API docs. Thanks to ovargas27 for already jumping in and lending a hand.

Beta 1 upgrade notes

The useFastClick global option introduced in Beta 1 is now removed because we’re not using vclick globally anymore on links.

Change log

Fix for cached page removal breaking dialog sized select menus (issue 2181)

Added a configurable timeout to $.mobile.loadPage to give pages that are being fetched from cache a little time to load before a loading message appears. Note: if the delay ends up needing to be longer than 300ms or so to suit some devices,we may not keep this feature.

Exposed automatic initialization selectors on most widgets – The new option, initSelector is accessed through each of the widget plugins (select, slider, etc.) that expose options through the widget factory. This is used to define the selectors (element types, data roles, etc.) that should be used as the trigger to automatic initialization of each widget plugin. This allows developers to apply auto-initialization in more flexible ways.

Restored degradeInputs page option (issue 2123) – We originally had a degradeInputs option as part of the page plugin that would allows you to find a certain type of form element (say input type=”range”) and degrade it into another type (input type=”number”) either because the browser support is so uneven or if you built a custom enhancement for the primary type (like a custom slider) and you don’t want the native implementation to interfere. Now added back in a decoupled plugin, but the API is the same.

Prevent ‘Unspecified error’ when we use an IFrame on IE9 (issue 2064) – Add try/catch block to prevent the error. Thanks SamuelKC

Updated Valencia theme to match new CSS syntax (issue 2087) – After our request for help on this, and Mayank Varia came through with an update for this theme so thanks!

Error in new page.sections js when data-add-back-btn=”true” on page (issue 2119) -Fixed a problem when pages have the data-add-back-btn set to true causing an error. Thanks jgable!

Email input type doesn’t receive input field styles (issue 2117) – When using email as the input type for an input field, jQuery Mobile does not correctly enhance them post-decoupling. Thanks commadelimited! Also fixed URL and tel input types for the same regression.

Hide loading message for loadPage should be to not show the loading message – It’s default use case is to fetch a page that is not yet active so this is distracting. However, changePage should cause it to show because loadPage is being called during a page change. This was causing the loader to show when using the new page precache option.

Fix for URL handing in navigation with relative URLs – Now you can call $.mobile.loadPage with a relative path and it will load the page correctly, regardless of whatever page you are linking from.

Removed the nonHistorySelectors option, which was no longer in use after the nav refactor.

Fix for rounded corners in collapsible Set (issue #1931) – The first section in a collapsible set has rounded bottom corners when not expanded (shouldn’t have .ui-corner-bottom class), and the last section does not have rounded corners when collapsed (should have .ui-corner-bottom class). Thanks ryanneufeld !

Checkbox list with same name do not allow multiple selection (issue #1851) – The checkboxradio plugin treats a check box list with same value for the name attribute for the check boxes as radio buttons. Thanks Tigbro!

Rounded corner login for inset lists with two items (issue 1996) – The top corner style doesn’t get applied in an inset list with two items (other number of items work fine). Thanks eugenb1!

Close button behavior fixes (Issues #1618, #1692,#1750)- Abstracted out some of the page hide behavior to fix issues with the close button not returning focus to the button after closing. Also fixes an issue where a full page custom menu would open as a misplaced small custom menu the second time it opens (if the menu was closed via the custom close button).

Changed padding-box to padding for -moz-background-clip per this spec

Slider onChange event is launched on page load (issue #1526) – the onChange event was triggered when the page loads instead of only when the slider’s value is changed.

Disappearing text in IE7 (issue #2058) – Text would only appear on mouseover in certain circumstances due to a rendering bug in IE (shocker!). Fixed by adding the zoom: hack.

XSS risk with XHR level2 cross domain request (issue #1990) – jQuery mobile can load other domain’s html so there is a security risk, as it can XSS or display fake contents. Created new option for $.mobile.ajaxCrossDomainEnabled and set the defaultto false

Switch back to processing link clicks on the “click” event because it really is the only reliable way across all the devices we support. Fixes any of the double click events, missed clicks or click event not being processed. Also, removed the useFastClick option and documentation references since using vclick isn’t a workable solution for links.

mobile.changePage not working on BB5 (issue #1907)- multi-page docs don’t work, and clicking a link cause a “page is too large” error. The fix for this was to tweak the regex related.

Fix for the mysterious “page is too large” error on Blackberry 5 prior to beta 1. Turns out this little code was enough to invoke the error: “/dir1/dir2”.replace(/\/?/, “”); Rewrote the regexp in path.makePathAbsolute() that was stripping leading slash, and trailing filename/slash. This gets around the problem. Special thanks to @adambiggs for helping us test 33 iterations when trying to narrow down the cause!

Fixed form buttons no longer submitting forms in Internet Explorer 8

Corrected corner styling issue with listview refresh on growing lists (issue #1470) – If list items were appended and the refresh() method called, the correct corners were not being assigned.

Fixed incorrectly calculated path of forms (issue #1923)- Added code to calculate whether to choose the documentUrl or the page Url in the case where an action is not specified on a form element. Fixed bug in the navigation “submit” handler where an error was being thrown if “type” was not specified.

Hitting enter in search filter now doesn’t not submit the form – Since this is a client-side filter, we want to prevent submitting the form. Thanks adamvaughan

Remove unnecessary ajax call and duplicate DOM nodes when refreshing a page with a dialog visible (issue #1913) – This was causing duplicate dialog elements inthe DOM. Thanks Sunpig!

Controlgroup now filters on visible buttons when adding first and last classes for rounded corners. If you hide the first or last button in a controlgroup and then call refresh on it, it won’t add the right classes to the newly promoted first/last button.

Removed param “refresh” sent to .controlgroup since it’s not a $.widget

Tweaked styles for select menu text running off side of list – Seen when using the custom select menus only

Updated Valencia theme for the updated check and radio styles

Fixed swatch letter typo for E button in theme CSS (Issue #1894)- it said ui-bar-d instead of ui-bar-e. . Thanks app42!

Moved collapsible sets (accordions) in docs into a standalone page for better visibility, updated section nav on other pages and index page to link to it.

Moved our form binding into the _registerInternalEvents callback, to ensure it’s not bound until after mobilinit.

Download

CDN-Hosted JavaScript:

Uncompressed: jquery.mobile-1.0b2.js (useful for debugging)
Minified and Gzipped: jquery.mobile-1.0b2.min.js (20KB, ready to deploy)

CDN-Hosted CSS:

Uncompressed: jquery.mobile-1.0b2.css (useful for debugging)
Minified and Gzipped: jquery.mobile-1.0b2.min.css (7KB, ready to deploy)

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

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

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

ZIP File:

Zip File: jquery.mobile-1.0b2.zip (JavaScript, CSS, and images)

jQuery Mobile Beta 1 Released!

Posted on June 20, 2011 by Todd Parker

The jQuery Mobile team is happy to announce the release of Beta 1. We’re proud of the refinements we’ve made to make jQuery Mobile faster, extensible and more compatible over the last 12 weeks and look forward to having more frequent releases as we work up to 1.0 in late summer. We’re planning on releasing a second Beta in about a month that will begin decoupling our code so you can include only the components you need, add greater extensibility to support dynamic JS-driven sites, and bring even broader device support.

Note that jQuery Mobile 1.0 will require jQuery core 1.6 as a baseline. Going forward, we’ll be supporting the two latest major versions of core but we’re starting with a cleaner baseline for launch. Here is a summary of what’s new and improved in Beta 1.

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

Platform support: Expanded for Beta 1

jQuery Mobile is a broadly compatible HTML5 library for building web sites and apps and we’re very proud of our commitment to universal accessibility through our broad support for all popular platforms. Since we added WP7 support in Alpha 4, we’ve added support for both Blackberry 5 devices and Opera Mini in Beta 1 which dramatically increases the reach of the framework. Opera Mini had 57.9 billion page views in April 2011 alone so it’s incredibly popular, especially internationally. Both of these platforms had issues with handling the Ajax-based navigation so they receive a B grade experience with all the enhancements except for Ajax navigation.

At this stage, jQuery Mobile works on the vast majority of all modern desktop, smartphone, tablet, and e-reader platforms. In addition, feature phones and older browsers are also supported because of our progressive enhancement approach. The only notable platform still in the works is Nokia’s Symbian S60 platform and we have this targeted for Beta 2.

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

Apple iOS 3.2-5.0 beta: Tested on the original iPad (3.2 / 4.3), iPad 2 (4.3), original iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), and 4 (4.3 / 5.0 beta)
Android 2.1-2.3: Tested on the HTC Incredible (2.2), original Droid (2.2), Nook Color (2.2), HTC Aria (2.1), emulator (2.3). Functional on 1.5 & 1.6 but performance may be sluggish, tested on Google G1 (1.5)
Windows Phone 7: Tested on the HTC 7 Surround
Blackberry 6.0: Tested on the Torch 9800 and Style 9670
Blackberry Playbook: Tested on PlayBook version 1.0.1 / 1.0.5
Palm WebOS (1.4-2.0): Tested on the Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0)
Firebox Mobile (Beta): Tested on Android 2.2
Opera Mobile 11.0: Tested on the iPhone 3GS and 4 (5.0/6.0), Android 2.2 (5.0/6.0), Windows Mobile 6.5 (5.0)
Kindle 3: Tested on the built-in WebKit browser included in the Kindle 3 device
Chrome Desktop 11-13 – Tested on OS X 10.6.7 and Windows 7
Firefox Desktop 3.6-4.0 – Tested on OS X 10.6.7 and Windows 7
Internet Explorer 7-9 – Tested on Windows XP, Vista and 7 (minor CSS issues)
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.0) – Tested on iOS 3.2/4.3
Windows Phone 6.5 – Tested on the HTC

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

Blackberry4.x: Tested on the Curve 8330
All older smartphone platforms and featurephones – Any device that doesn’t support media queries will receive the basic, C grade experience

Not Officially Supported – May work, but haven’t been thoroughly tested or debugged

Nokia S60 – Targeted for Beta 2 release. A/B grade support will depend on results of device testing.
Meego – Originally a target platform, but Nokia decision to relegate this platform to “experimental”, we are considering dropping support.
Samsung Bada – The project doesn’t currently have test devices or emulators, but current support is known to be fairly good. Support level undecided for 1.0.
Palm WebOS 3.0 – We’re hoping to get test devices from Palm soon to start testing but have heard that rendering is quite good in 3.0

KEY CHANGES

URL bar: Now hidden in iOS and Android

One of the most common requests is to make the page transitions smoother and less jumpy and we are working hard to improve this as we move towards 1.0. There are two major items affecting the perceived smoothness: hiding the URL bar consistently and scrolling to the correct page position between transitions.

We’re happy to report that in Beta, we are able to hide the URL bar in both iOS and Android which avoids the multiple re-draws seen when the URL bar pushed down the page content, then hid later in the transition. We do this by scrolling the page by 0 pixels in iOS and 1 pixel in Android to trick the browser into hiding the bar and target this with a bit of clever feature detection. Nothing is perfect so you still may see the URL appear randomly but this should overlay the URL bar over the content briefly before disappearing but shouldn’t cause a re-draw.

Note that to accomplish the URL hiding, we’re using our custom fastclick event. There’s a small possibility that this event may interfere with jQuery plugins that bind to click events on touch devices. In these situations, you may need to tweak your code to either bind to vclick events instead of click, or set the useFastClick global config option to tell the automated Ajax handling use an ordinary click events instead. Disabling this feature will introduce a slight delay in clicking links and the URL bar will not be hidden.

Transitions: Smoother, faster scroll

If you don’t scroll the page at all and click on a link, you should see a smooth page transition with no jumps or blinks in Beta 1. However, there will be two potential situations that cause a scroll and visible blink: scrolling back to the top of the current page before a transition, and scrolling back down to your previous scroll position if you return to a page. We’ve been doing a lot of work to try and reduce or eliminate the scroll position blink, especially the need to first scroll to the top of the page before starting a transition, but it’s a tricky issue to solve across all the devices we support. We’ve minimized the speed and amount of scroll jumps for Beta 1, but still have a ways to go and will be working on refinements for future releases.

Restoring your scroll position is an important usability feature and is the expected behavior on both the web and in apps but it does introduce a small blink as the browser scrolls the viewport to the correct position and re-renders the new view. One tweak we introduced in Beta 1 is a threshold value for how far down the user needs to scroll a page before we restore their scroll position. For example, if the user only scrolled a page 50 pixels before clicking a link, it’s not worth seeing a scroll re-draw to restore that position but if they scrolled 500 pixels, it’s a huge time-saver.

By default, this scroll threshold is calculated as half of the device’s screen height, but can be adjusted in the minScrollBack config option. To eliminate the threshold, set this option to “0”. To completely disable the scroll position restore feature, set this option to infinity but remember that this may make your app much less usable, despite the smoother transitions.

Navigation core: Decoupled for extensibility

We landed a big refactor the core Ajax navigation code to allow for better extensibility for developers that are manipulating pages dynamically and plan on adding a lot more hooks for Beta 2 to make this even more powerful. Until recently, the navigation code was largely implemented as a set of nested functions within the$.mobile.changePage() function which made the code very hard to follow and extend so for Beta 1, we decoupled the navigation core into separate internal functions. Partitioning the code this way makes it easier for us to identify key points for adding extensibility hooks and makes the code easier to follow:

loadPage()
- Responsible for loading a page into the DOM of a specific page container and enhancing it
changePage()
- Responsible for updating the internal bookkeeping for tracking what is the current page. This includes: managing the URL stack, managing the location hash, and kicking off transitions
transitionPages()
- Responsible for managing the transition between the current active page and the new page to be shown

Of these, loadPage() and changePage() methods are public. The changePage() method now takes 2 arguments: the first is required, the second is optional. The first argument accepts a URL or a jQuery collection containing a page element as its first argument. The 2nd argument is an options object that allows the caller to modify changePage behavior. The options that can be specified are as follows:

transition (String, defaults to transition specified by $.mobile.defaultPageTransition)
reverse (Boolean, defaults to false)
changeHash (Boolean, defaults to true)
role (String, defaults to “page”)
pageContainer (jQuery collection, defaults to $.mobile.pageContainer)
type (String, defaults to “get”)
data (Object or String, default is undefined)
reloadPage (Boolean, default is false)
showLoadMsg (Boolean, default is true)

URL handling: Coverage for all path types

There are a number of factors involved in loading files in jQuery Mobile. The framework essentially listens for normal link clicks and form submissions and requests them through Ajax which allows us to support page transitions as the user navigates a site. Path handling within jQuery mobile is one of the most complex parts of the framework because it needs to handle the wide array of paths that a browser may encounter and seamlessly resolve the page and all it’s dependencies (images, stylesheets, scripts, etc) and also needs to work well with file:// URLs for installed applications. In Beta 1, we now cover every possible URL path type and have added robust unit test coverage to ensure we avoid regressions moving forward. When upgrading to Beta 1, no changes are needed to take advantage of these URL handling improvements.

Dynamic base tag: More robust

The Ajax navigation system loads multiple “pages” into the DOM of the starting page. Each of these pages loaded in could live in completely different directories on the server so the paths of links, forms, images, scripts and styles of each page need to be dynamically set so everything “just works”. To do this, when the initial jQuery Mobile document is loaded, the navigation code checks for an existing base tag, and if one does not exist, the framework injects one and sets its @href to path for the current document. As of Beta 1, the base tag mangement is completely re-vamped to work correctly, even in edge-case scenarios. When upgrading to Beta 1, no changes are needed to take advantage of these base tag improvements.

Page transitions: Decoupled and extensible

We’ve pulled page transitions out into a separate plugin so they can be decoupled from the navigation plugin. As part of this re-work, we’ve introduced the ability for developers to create custom transitions created with pure CSS3, or in combination with JavaScript by adding extensibility hooks to the transition system.

Pinch-to-zoom: Now restored in demos

Before Beta 1, all our demos and docs had a viewport meta tag that set “minimum-scale=1, maximum-scale=1” which completely disabled the pinch- or double-tap-to-zoom feature in mobile browsers. We had done this originally because on iOS, there is a bug that will incorrectly scale the page when you change orientation. Here is the meta tag we used up through Alpha 4.1:

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">

Disabling the native zoom features of the browser isn’t very user-friendly so we changed our meta tag in the demos and docs for Beta 1 to restore the ability to zoom the page. At this stage, we don’t think it’s worth disabling the user’s zoom feature to workaround an iOS bug that may be fixed in the near future. Since our demos are used as a template for many people so we want to set an example of the best practice for mobile web development. The new meta tag we use looks like this:

<meta name="viewport" content="width=device-width, initial-scale=1">

You will notice that in the Beta 1 demos & docs, you be able to pinch zoom the pages. You may also notice that the pages will zoom in when interacting with form elements on some browsers and this is normal with this viewport configuration. Since this meta tag is part of your page content, you are free to set these attributes to match the specific needs of your project so this isn’t a change to the library, just our demos.

Dynamic injected viewport meta tag: Support dropped

On a related topic, we deprecated injecting the viewport meta tag back in alpha 4 due to Windows Phone 7’s lack of support for dynamically injected viewport elements. In Beta 1, we removed the dynamic viewport support from the codebase in preparation for beta so if you haven’t switched to writing this tag into your markup, please do that now in preparation for Beta. If you page is zoomed out to a wide width when you upgrade, you’ll need to add a meta viewport tag to each page to control the zoom level. See the boilerplate template page in the docs for an example.

Automatic toolbar back button: Now off by default

In a blog post, we outlined the reasons why we felt the feature that automatically adds a back button to the header toolbar, while good for specific situations, wasn’t really necessary for most web sites and web apps because browsers and phones already have back buttons. The response in the comments and Twitter was overwhelmingly positive to moving in this direction so for Beta 1, we landed this change.

All this really means is that the auto-generated Back button feature is off by default. It’s not going anywhere because we understand that in fullscreen browser environments or installed apps, there isn’t browser chrome or a physical back button on all platforms so you’ll want to flip this switch on in those cases.

To activate auto generated back buttons on specific pages, simply add the data-add-back-btn="true" attribute on the page container and the magic will be back. To activate this globally, set the addBackBtn option in the page plugin to true. Here is an example of how to set this:

$(document).bind("mobileinit", function() {
      $.mobile.page.prototype.options.addBackBtn = true;
 });

Note: You must include this script before the jQuery Mobile library is referenced in the head of your page for this to work. The mobileinit event is triggered immediately upon execution, so you need to bind event handlers before jQuery Mobile is loaded. Learn more about setting global config options.

Responsive design helper classes: Now deprecated

We include a set of responsive design helper classes designed to make it easy to build a responsive design that adapts the layout for various screen widths. At the time, we went with a system of dynamically appended min- and max-width classes on the body that are updated on load, resize and orientation change events as a workaround for the limitation that Internet Explorer doesn’t support media queries.

Although this technique works, it adds script overhead that we’d like to avoid as we move towards 1.0. Within jQuery Mobile, we only use these classes for a single feature: the responsive label/form layouts. This week, we re-wrote the styles for the form elements to work without the helper classes by switching to standard media queries in our CSS. Since we use media queries sparingly right now, the only change you’ll see is that at wider screen widths, WP7 won’t switch to the layout with the label floated to the left of the form element.

We understand that many developers may be using these CSS classes so we’re going to leave this code in until for Beta 1 to give everyone time to migrate to other solutions. We will be removing these classes completely by 1.0. If you want to use media queries on Internet Explorer, we recommend adding in respond.js, a polyfill script written by team member Scott Jehl that adds media query support for IE. Post-1.0, we’re going to look into whether we should polyfill media queries as part of jQuery Mobile or continue to leave it as an optional file.

Experimental datepicker: Moved out of the official docs & repo

A while back, we took the jQuery UI datepicker and tweaked it to use the jQuery Mobile theme CSS classes as an experimental stopgap for people who really needed a datepicker. The issue with this component is it’s fairly heavy for mobile and the UI team is already re-factoring the datepicker from the ground-up so we wanted to shift this out of the official GitHub repo because it won’t be supported going forward. We will pull the new UI datepicker in once it’s finished, but that will be later this year. In the meantime, if you still want to use the experimental datepicker, it’s now available on Filament Group’s GitHub repo but note that it’s not being actively maintained. If anyone is interested in maintaining this plugin in the short-term, please let us know. You can also check out alternate jQuery datepickers like DateBox, a slick jQuery Mobile optimized date picker.

Beta 1 upgrade notes

Breaking Changes

ajaxFormsEnabled and ajaxLinksEnabled are now gone (they were deprecated for a release or two). Use ajaxEnabled to globally set auto-ajax handling.
Removed the dynamically-appended viewport Meta tag. Thish was deprecated in Alpha 4, and scheduled for removal in beta. jQM users must provide their own meta viewport tag in the head of jQM page markup.

Deprecations

The signature for changePage() has changed during this refactor you will need to update your custom code before upgrading. To ease the transition to the new signature in the short-term, we’ve added code to changePage() that maps any old signature calls to changePage() into a new call. This code will be removed before shipping 1.0.
$.mobile.pageLoading( done ) renamed to $.mobile.showPageLoadingMsg() and$.mobile.hidePageLoadingMsg(). Status: $.mobile.pageLoading( done ) is still in the codebase but will be removed soon. Do not use anymore.

Important Notes

jQuery code that binds to live click events may have issues with the new URL hiding techniques because we bind to the fastclick event (touch + mouse click). In these situations, you may need to tweak your code to either bind to vclick events instead of click, or set the useFastClick global config option to tell the automated Ajax handling use an ordinary click events instead. Disabling this feature will introduce a slight delay in clicking links and the URL bar will not be hidden.
Auto back button additions to toolbar are now off by default. To turn auto backbuttons on, you can set the page plugin’s autoBackBtn option to true per page, or globally via its configuration prototype. You can also use the data-auto-back-btn attribute on a page div.
$.mobile.defaultTransition is now renamed to $.mobile.defaultPageTransition and $.mobile.defaultDialogTransition. This is likely not a breaking change since the old configuration property, $.mobile.defaultTransition, will just be ignored.

Change log

Added utility functions $.mobile.getDocumentBase() and $.mobile.getDocumentUrl() – developers can retrieve the original base and url used when loading the document.

Added themeFilter option for listviews (issue 1790) – Available as data attribute data-filter-theme on listviews with filters enabled. Thanks adamvaughan!

Added new throttledresize special event (issue 1848 and 1422) – This prevents browsers from running continuous callbacks on resize, which we use internally for orientationchange in browsers like IE. It still ensures that a held event will execute after the timeout, so logic that depends on the final conditions after a resize is complete will still execute properly. This improves performance noticeably.

Set page min-height using availHeight or availWidth – Rather than height to fine tune height to exclude browser chrome. Also, reset the active page height on throttledresize and pageshow, eliminating some duplicate calls.

Removing item from inset list doesn’t redo corners (issue 1654) – When adjusting the list items, the corner classes went’ being properly adjusted. Thanks siromega!

Remove active state from buttons when closing dialogs (issue 1839) – Buttons would retain the active state if clicked and the dialog was re-opened.

Radio buttons in nested listviews don’t work (issue 1489) – Tweaked selectors to fix this situation. Thanks bernharduw!

Fixed a bug in IE desktop – calling scrollTop before domready was trying to access the body element before it was present. Moved this logic to domready and all’s well.

No change event triggered on multiple select when first option was deselected (issue 1579) – Custom multiple select event fixes. Thanks wtw!

Top header (and back button) of a nested list doesn’t render correctly when parent list has a thumbnail (issue 1595) – Fixed so Back button doesn’t gets clipped when there is no title

Disabled select usability issues in iOS (issue 1816) – A disabled select could be opened in iOS, but not closed due to an inportant cursor rule in the CSS.

Dialog styling and hashchange nav improvements (issue 1826) – Style a dialog is data-role=’dialog” is set on page container and ensure that hash nav between dialogs works.

Forward page transition fix (issue 1833) – If hit the browser’s forward button in some cases, you would not see a transition.

Workaround for PhonegGap double slashes in URL – Adjusted the urlParserRE regexp to account for double slashes in the directory path to work around a PhoneGap 0.9.4.

Height issue for transitioning page (issue 1507) – Fixed the issue where buttons and other elements were sometimes showing up at 100% height during page transitions. Thanks Eddie Monge.

Allow checkboxes and radio buttons to be selected with the keyboard – The name says it all, thanks Shana Golden.

Fixed header/footer positioning in IE 7/8 – Desktop IE wasn’t reporting a scrollTop value for fixed headers/footers—’window’ is now provided as a fallback in the event that $(document).scrollTop() reports zero. Thanks Mat Marquis (wilto).

Select menus now work in Firefox Mobile (issue 1626) – Changed the hiding mechanism for invisible native selects so that they work in Firefox Mobile.

Removed the ajaxLinksEnabled and ajaxFormsEnabled settings – These were deprecated in a4 and scheduled for removal. Automated link and form ajax handling can still be globally disabled via the ajaxEnabled option.

Add new focus event to show the clear button on search textbox when an item is pasted directly without a key event to search text box. Thanks joshiabk

Listview filter speed improvements (issue 1477) – We made a number of changes to improve the responsiveness of the filtering mechanism which is especially helpful on longer lists. More tweaks planned for the future. Thanks nsaleh

Phonegap: Pages with data-ajax=”false” on form fail to load (issue 1580) – In the $.ajax() callback, we look for elements with @href, @src, and @data-ajax=”false” elements, the code then assumes that matching elements will have either @href or @src, which of course forms don’t … they have @action … so the code throws an exception because thisUrl is undefined. Reworked the code to handle action and check to make sure we have an attribute and url string before attempting to use them.

Base tag regression fixed (issue 1508) – This change sets the base tag properly on page load and page changes, corresponding with the recent change to absolute path hash urls. Images and other assets will direct relative to the document in which they reside.

Can’t load file:// pages (issue 1578) – The change caused the base tag to be reset to file:// (literally with no path). All that was missing was a small tweak to base.reset() to use the new initialPath variable instead of docBase.

Grouped radio buttons with long labels don’t ellipsis (issue 1419) – Fixed grouped radio buttons with long labels so they wrap to multiple lines. Thanks gseguin!

Regex breaking Firefox >3.6 (issue 1514) – Tweaked regex to make Firefox happy. A quick bit of Date()-based benchmarking showed an improvement from ~4.5 seconds to 3ms in Firefox 3.6. The stock Android browser on my Galaxy Tab went from ~3.6 seconds to 1ms. Thanks MaxThrax

Radiobuttons can’t be selected once they are selected, then de-selected (issue 1532) – Fixed by using jQuery attr accessor instead of expando to guarantee consistent values.

Regex breaking Firefox >3.6 (issue 1514) – Fixed by Remove greedy matches from start and end of regex – there’s no need for them, and they cause immense slowdown (on the order of 3-4 seconds on medium-size pages loaded via ajax). Thanks Paul Nicholls!

Fixed base tag support (issue 1508) – This change sets the base tag properly on page load and page changes, corresponding with the recent change to absolute path hash urls. Images and other assets will direct relative to the document in which they reside.

Can’t load file:// pages (issue 1578) – Fixed a regression that caused the base tag to be reset to file:// (literally with no path). All that was missing was a small tweak to base.reset() to use the new initialPath variable instead of docBase.

Tops of pages clipped after returning from a dialog (issue 1461)
If you had scrolled down on a page, opened a dialog, then closed it, the page height was getting clipped off in iOS due to the timing of when we were placing focus back on the page. Solution: Delayed the setting of focus till after the scroll position is restored.

Active class not being removed correctly – If a link had an null or “#” value for the href, the active class wasn’t being removed. Modified the vclick handler code in navgation.js so that it doesn’t place the ui-btn-active class on any links meant for interactivity. Removed the return false in the vclick handler of collapsible and replaced it with a preventDefault().

Errors when trying to delete DOM elements (issue 1492) – Thanks @brukhabtu

Collapsible block prevents page scrolling on iPhone 4 (issue 1157) – Fixed events that prevented scrolling when interacting with collapsibles

Bad scroll performance since A4 on iPhone 3G (issue 1407) – Touch event tweaks for smoother scrolling on older iOS devices

Adding items to listviews on a4.1 is too slow (issue 1424) – Optimizations to listview rendering code

Download

CDN-Hosted JavaScript:

Uncompressed: jquery-mobile-1.0b1.js (useful for debugging)
Minified and Gzipped: jquery.mobile-1.0b1.min.js (20KB, ready to deploy)

CDN-Hosted CSS:

Uncompressed: jquery-mobile-1.0b1.css (useful for debugging)
Minified and Gzipped: jquery-mobile-1.0b1.min.css (7KB, ready to deploy)

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

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

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

ZIP File:

Zip File: jquery-mobile-1.0b1.zip (JavaScript, CSS, and images)

« Previous 1 2 3 4 5 Next »