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.

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.

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

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

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

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.

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.

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

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

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

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

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

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

The jQuery Mobile project now has a few new ways to get and test the code and related resources.

Test
The test files are the latest direct pull from GitHub. The CSS and JavaScript files are not combined or minified in any way. This area is a good way to quickly test jQuery mobile and see what it is. It is also the shortest URL and thus the easiest to type into mobile phones. The test area is located at:

http://jquerymobile.com/test/

Latest
The Latest files are similar to the Nightlies with the exception that it is the latest up-to-date build that can be linked to directly. This differs from the http://jquerymobile.com/test/ files in that the JS and CSS files can be linked in your project by using one of the links below as opposed to just viewing examples.

• http://code.jquery.com/mobile/latest/jquery.mobile.js– The full JavaScript file that makes debugging easier
• http://code.jquery.com/mobile/latest/jquery.mobile.css– The full CSS file
• http://code.jquery.com/mobile/latest/jquery.mobile.min.js– The minified JS file that can be linked directly to
• http://code.jquery.com/mobile/latest/jquery.mobile.min.css – The minified CSS file that can be linked directly to
• http://code.jquery.com/mobile/latest/jquery.mobile.zip – The zipped up package of all the files necessary to deploy
• http://code.jquery.com/mobile/latest/demos – The demo pages using this date’s build

Nightlies
The Nightlies files are a “snapshot in time” of the code at the end of that particular date. They are mostly to test a particular feature and how it changed over time.  There are a couple of ways to use the Nightlies. The first is to download a prepackaged version that can be dropped into your own project. The Nightlies area contains the following files:

• CSS combined files
• CSS combined and minified files
• JavaScript combined files (Only combines the mobile files, not jQuery core)
• JavaScript combined and minified
• Images for the default theme

The second way is to link to the files directly without downloading them. This is not for production sites, though. The Nightlies files should only be used for testing.

The Nightlies files are located at the following location where YYYYmmdd should be substituted with the date (for example: 20110416 is April 16 2011, which is also the date of the first nightly build):

• http://code.jquery.com/mobile/nightlies/YYYYmmdd/jquery.mobile.js – The full JavaScript file that makes debugging easier
• http://code.jquery.com/mobile/nightlies/YYYYmmdd/jquery.mobile.css – The full CSS file
• http://code.jquery.com/mobile/nightlies/YYYYmmdd/jquery.mobile.min.js – The minified JS file that can be linked directly to
• http://code.jquery.com/mobile/nightlies/YYYYmmdd/jquery.mobile.min.css – The minified CSS file that can be linked directly to
• http://code.jquery.com/mobile/nightlies/YYYYmmdd/jquery.mobile.zip – The zipped up package of all the files necessary to deploy
• http://code.jquery.com/mobile/nightlies/YYYYmmdd/log.txt – A log file that contains the git commit used for this date’s build (*Note: this file will no longer appear after June 2, 2011 as the information it contained is now in the JS file)
• http://code.jquery.com/mobile/nightlies/YYYYmmdd/demos – The demo pages using this date’s build

You can also use the other locations provided on the Downloads page.

Thanks to everyone who helped us get Alpha 4 released last week. Overall the response has been great but there were a few important issues that cropped us once the new version was out in the wild that we wanted to address sooner as an official release.  So today, we’re release Alpha 4.1 as a maintenance release.

Demos & docs | Key changes | Additional fixes | Download & CDN

Key changes

Here are the key issues and fixes this release addresses:

PhoneGap file:// fix for Ajax navigation

After Alpha 4 was released, we continued to hear issues about Ajax requests with file:// extensions failing in PhoneGap. We discovered that the fix we landed to set the dataType: “html” parameter for all jQuery Mobile Ajax requests disappeared between commits and didn’t end up included in Alpha 4. We went ahead and re-applied this fix and have confirmation that links are now working like a charm under PhoneGap.

Virtual click tweaks

Overall, the new virtual click system seems to be working great across our target browsers and provides a centralized way to smooth out all the event differences across platforms. However, the way we were handling clicks in the new virtual click system was causing issues in certain cases: click handlers in custom code weren’t being called consistently, and if you tapped quickly on an element, touch and click target mismatches made it look like there were two click events on elements like Back buttons, list views, and other widgets.

We fixed this in 4.1 by changing the virtual click handler to fire on the click event (instead of the vclick event) and setting prevent default. This change introduced a noticeable lag in the visual feedback for the active state on lists and buttons so we made some tweaks to make the “perceived” visual performance feel as fast as A4 by applying the active state on vclick. We’ll continue to refine the events as we head towards beta, but this fix addressed most of issues we’ve been hearing about.

Scroll position fixes

Scroll position wasn’t being remembered when navigating back to a page in iOS. This was a regression from A3 and is an important part of how web pages and apps should work. We fixed this by setting the focus order on page show to 1) previously clicked item if revisiting that page 2) page title 3) first focusable item in the page. We have plans to further refine the way this works as we re-factor our page transition code to make it smoother for beta.

IE8 & 9 support

An error was causing jQuery Mobile to fail in IE8 & 9, but we’ve resolved the error by adding an activeElement conditional and pages now render suprisingly well. There are a few style tweaks needed to make this perfect, especially on form elements, but jQuery Mobile now works in IE 7, 8 and 9.

Additional fixes included in A4.1

The team is moving quickly with bug fixes and optimizations so in the last week, these issues also have been resolved and are included in 4.1.

Navigation in a multi-page configuration –  If you had a multi-page setup and if on the first page, you clicked on an anchor that linked to itself you’d see a blank page (an edge case, but possible).We fixed this by looking to see if the data-url matches the links href, and if so, it adds preventDefault and does nothing.

pagebeforehide and pagebeforeshow were returning undefined when referencing ui.prevPage and ui.nextPage. Fixed by passing a null event param for page _trigger beforehide and beforeshow (thanks Phil Barnes).

Ajax loading overlay was appearing beneath slider handles – We fixed this by setting loader z-index to be higher than the slider handles.

Checkboxes were only firing a change event when checked, but not when un-checked. We fixed the scoping issue that was causing the checkbox check to fail.

Project status and timing

We get asked all the time about exactly when jQuery Mobile 1.0 will be released and we understand that a lot of people are waiting for us to hit that milestone to use the library. As a project, we are committed to getting to 1.0 as quickly as we can while providing an exceptional user experience that works on the greatest number of devices and platforms. This is quite a challenge, but we feel it’s incredibly important delivering on the promise of the open web and universal access. Getting there will take time so we appreciate your patience.

As of A4, we are feature-complete for 1.0 and are focusing on perfomance, compatibility, bug fixes, API improvements, and documentation. In terms of timing, we were hoping to have the beta release ready for the jQuery Conference in SanFrancisco next weekend, but the complexity of landing the global namespacing and virtual click event systems for A4 combined with this maintenance release have pushed our timelines out a bit. At this point, we still have a fair amount of major platforms to debug (Nokia, BB5, etc.) and a solid list of issues to fix so beta is still a few weeks out at a minimum. The exact timing for beta and 1.0 are going to be determined by the quality of the code and device support, not a rigid timeframe, because we want to ensure that 1.0 is rock-solid.

Going forward, we’re going to be blogging more frequently with interim updates on what we’re working on so you can follow our activities as we move towards 1.0. The team is very active so we’re excited to share our progress so the community can give us more immediate feedback and take advantage of fixes as they land. As always, we maintain an active jQuery Mobile Twitter account and “jquerymobile” Channel on freenode IRC  for day-to-day updates, tips and Q&A.

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.0a4.1.js (130KB, useful for debugging)
• Minified and Gzipped: jquery-mobile-1.0a4.1.min.js (19KB, ready to deploy)

CDN-Hosted CSS:

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

Copy-and-Paste Snippet:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.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.0a4.1.zip (JavaScript, CSS, and images)

The jQuery Mobile team is very excited to announce the release of Alpha 4. This is the last alpha before we head into beta and it brings some great new features, and a long list of bug fixes (150+ issues closed since A3), and lots of performance tweaks. We’ve also been steadily increasing our test coverage and working our documentation in preparation for 1.0. Below is a summary of some of the highlights of Alpha 4. Enjoy!

Demos & docs | Bug fixes | Upgrade notes | Download & CDN | Supported platforms

Windows Phone 7 (WP7) support

We’re thrilled to announce WP7 is now a supported platform and has a solid A- experience. All core features work great on both WP7 and desktop versions of IE 7 (8 & 9 are close, but not perfect). Keep in mind that WP7’s browser is fairly close to IE7 so advanced CSS features like rounded corners and drop shadows aren’t supported but the layouts and widgets all look great within the capabilities of the browser. We’ve added a polyfill to bring pseudo-media query support to this platform, which we plan to improve with a native media query interpretation at a later stage. We also plan to support the future upgrade to an IE9-based rendering engine on WP7 later this year.

Namespaced data- attributes

To work around any potential HTML5 data attribute naming collisions with other frameworks or plugins, we’ve added an optional configuration option to allow developers to add a namespace to these attributes. We’ve introduced new methods and a custom selector for jqmData jqmRemoveData and jqmHasData to provide a namespaced proxy to jQuery’s data() in core.

To prevent breaking all the existing jQuery Mobile sites out there, we’re defaulting to an empty namespace so the current attribute conventions won’t change. For example, you can continue to use the data-role attribute by default, but if you choose to add a global namespace (eg. “foo”), then the attributes would look like this: data-foo-role. This is similar to how jQuery handles noConflict mode: opt into adding this feature if you need it. Making this configurable is recommended by the W3C:

“library authors are also encouraged to make the exact name used in the attribute names customizable, so that libraries whose authors unknowingly picked the same name can be used on the same page, and so that multiple versions of a particular library can be used on the same page even when those versions are not mutually compatible”

Normalized touch/mouse event system (aka “Fastclick”)

We’ve spent a lot of time recently trying to figure out how to ease the pain of handling touch and mouse events on mobile devices, and it’s a complex problem to solve. In jQuery Mobile, we’re introducing a feature that allows developers to bind to a set of virtual mouse events that normalize both touch and mouse events across all the popular mobile platforms. Because platforms like Android and Blackberry fire both touch and mouse events, this system decides what type of user input is occurring, eliminates any duplicate events and fires events in the most responsive way.

To make use of these virtual events, simply use the jQuery event methods you are already familiar with (bind, delegate, live, one) to bind to one of the following virtual mouse events and the framework takes care of all the details under the hood: vmouseover, vmousedown, vmouseup, vmouseclick, vmouseout. We’re using the virtual click system internally on every widget in jQuery Mobile now and it’s a powerful tool because it centralizes all event handling and can also be used with event delegation. We’ll be refining and documenting this system as we head towards beta.

PhoneGap improvements

We’ve spent a lot of time trying to find ways to make build building native apps easier with jQuery Mobile and have a lot of ideas in the pipeline. One common issue that cropped up with Alpha 3 was that file URLs were mysteriously breaking in PhoneGap. As it turns out, there were a number URL issues we had to address. We discovered that jQuery 1.5 broke the handling of file:// URLs. jQuery 1.5.1 fixed this but incorrectly assumed that files were XML, not HTML, so we worked around this in mobile by specifying dataType at the time we made ajax call.

Additionally, we weren’t allowing jQuery Mobile to load cross-domain JQM pages which is common in PhoneGap and other application frameworks. We’ve since added a configuration option $.mobile.allowCrossDomainPages that restricts support to pages loaded via http/https. This is because that code path also handles mail:/tel: and other protocols. This change allows for URLs like: file://dir1/dir2/myPhoneGapApp.html#https://myHomeServer.com/dir1/dir2/foo

All these PhoneGap issues are now fixed in Alpha 4 with jQuery 1.5.1. Thanks for everyone who helped us track down and debug these tricky issues.

Forms in listviews

By popular demand, we’ve re-factored listviews to support the full compliment of form elements. Just wrap a form tag around an unordered list and drop in a label + form element combination for each list item. Be sure to check out forms in inset lists because they look great. The label will above the form element at narrow sizes and float side-by-side with them at wider screen sizes due to the responsive design styles baked into forms.

We also spent some time tweaking all the list styles so read-only lists can now display all the same content formatting as linked lists – thumbnails, icons, count bubbles, etc. all work exactly like their linked counterparts.

Configurable text strings

As a first step towards making internationalization (i18n) support a bit easier, the text strings for the “loading” overlay, Ajax error message, and the search input placeholder message, auto-generated back button label, and dialog close button label are now all configurable via options. Now you can translate these messages or tweak the text to fit your needs.

• There are global config options for loadingMessage (string, default: “loading”): and pageLoadErrorMessage (string, default: “Error Loading Page”).
• The search filter placeholder text can now be configured by adding the data-filter-placeholder attribute on your listview or binding to the mobileinit event and set the $.mobile.listview.prototype.options.filterPlaceholder option to a string (thanks Ernesto Jiménez).
• The text for the auto-generated Back buttons can be configured by adding the data-back-btn-text attribute on the page container element, or by binding to the mobileinit event and setting the $.mobile.page.prototype.options.backBtnText property to a string. Note that the close button is set to be icon-only but event though the text isn’t show on-screen, the text is still read aloud to screen readers so it’s important to configure.
• The close button text for dialogs can now be configured by adding the data-close-btn-text attribute to the dialog’s page container or by binding to the mobileinit event and setting the $.mobile.dialog.prototype.options.closeBtnText property to a string.

Auto-updating page titles for Ajax navigation

When you load the first page of a jQuery Mobile based site, then click a link or submit a form, the framework uses Ajax to pull in the content of the requested page. Having both pages in the DOM is essential to enable the animated page transitions but one downside of this approach is that the page title is always that of the first page, not the subsequent page you’re viewing. To remedy this, we’ve added a feature in A4 that automatically grabs the title of the page pulled via Ajax and changes the title attribute of the document to match. On multi-page sites, add the data-title attribute to each page container to manually define a title. Since we already support the browser’s history stack, back button and bookmarking of these Ajax-based pages, this really helps when looking through your browsing history.

Bug fixes & improvements

Auto-generated Back button in the header now has a configurable theme
By default, generated back buttons match the swatch letter of the header toolbar. If you’d like to configure the back button theme swatch, you can use: $.mobile.page.prototype.options.backBtnTheme = "a";. If you’re doing this programmatically, set this option inside the mobileinit event handler (thanks mariozaizar).

Listview cursor fixes
Read-only lists and list dividers not are styled with the default cursor to indicate they aren’t clickable.

Nested lists can handle all types of formatting
Previously, only basic list markup would work in nested list markup but not you can use images, text hierarchy, count bubbles and all other list formatting.

List search filter improvements
Improved styling for search filter on inset lists so it is more visually integrated and properly aligned.

Free-form list images
All images in a list item were being styled as thumbnails but now this style is only applied if image tag an immediate child of the list item or link. This fixes the problem when you want multiple images on each li element, like a 5 star rating for each element for example. Now to add multiple images you just have to put them in a div and the framework won’t apply any special styling.

Dialog hash tracking improvements
Fixed a number of issues where the dialogs we not being properly tracked in the hash history and should now work as expected. Dialogs are purposely not deep-linkable, but you can navigate away from them with the browser’s Back button by tapping into the history stack.

Custom select menus now work well within dialogs
Both the small, overlay style and full-page select menus work correctly within dialogs now that the hash tracking has been patched up and work correctly.

Select improvements
By default, all selects now open the native OS menu picker by default for better responsiveness, performance and compatibility. The onChange event is now fired reliably on selects.

Disabled buttons now styled appropriately
When a button has the disabled attribute, it will now look disabled. If you dynamically disable a button, just call the button refresh() method to have the styles applied.

Form target, method, action fixes and transition support
Forms with the method or action is undefined will now work without errors. Added support for the target attribute on forms (such as target="_blank"). When set, the form handler simply allows the native handling to apply. Unlike anchors however, the rel attribute is not allowed on forms. If you’re purely looking to submit a single form without ajax, you can use the data-ajax="false" attribute as well. Also added support for data-transition and data-direction on form elements to allow the page transition to be controlled when a form is submitted.

Navbar improvements
Adds a fallback for navbars that have one item they simply fill 100% of the page width (thanks kennedyr).

Fixed and persistent toolbar performance
The fixed toolbars in jQuery Mobile dynamically re-position themselves when the page is scrolled. In A4, we’ve improved the scripts so these toolbars are less likely to scroll with the document or fail to re-appear in the correct position after scroll. Because many mobile browsers prevent us from re-positioning or hiding the toolbars during a scroll, these are still far from perfect but we’re planning on doing a deep re-factor for beta to make these perform at their best.

Navbar active state in persistent footers
Navbars in persistent footers now will correctly maintain the active state of the requested page after the page transition. As with fixed toolbars, these still need a deeper dive to smooth out transitions and performance for beta but they are much more functional now. Note: In A4, if you’d like an active button in your navbar to remain active when you return to it again, add a class of ui-state-persist in addition to ui-btn-active.

Grid fixes
Empty layout grids don’t collapse now, even if they don’t contain any content

Collapsible fixes
Fixed event issues that prevented scrolling and/or toggled collapsibles open then closed on a single tap.

Page backgrounds now fill the height of the browser
Regardless of page content length, the page backgrounds and general page height fills the height of the browser. This was a particular issue with dialogs.

Icon cleanup and new HD icons for radio and checkbox icons
We now support retina display (HD) icons for all icons and the check/radio elements. Merged the checkbox and radio button images into the 18 and 32px icon sprites to reduce requests and pre-load these images for better responsiveness. Themes only require 6 images total (SD + HS versions of the black and white icon sprites, ajax loader and search icon). Search icon will be dropped by beta to use the sprite version to get us to five total. Updated the retina sprite CSS selector targeting to specifically apply only to the icons in the sprite, and nothing broader to not interfere with custom icons (thanks adammessinger).

Upgrade notes

Although we strive for backwards compatibility, there are a few potentially breaking changes to note when upgrading. The following code changes may need to be made before upgrading any existing jQuery Mobile sites and apps to Alpha 4:

New list markup conventions

In the new list markup conventions, we wrap the anchor around all the content in the list item (split buttons have two sibling anchors within a list item). Previously, we had a link with sibling elements which required workarounds trigger clicks and mimic default anchor clicking when not using Ajax in order to make the whole row clickable. Now, thanks to HTML5, we can just wrap all the list content in an anchor which makes all the default link behaviors and features work as expected, no scripting needed. Simple lists that only contain a text node or link will not be affected, but any list item that contains advanced formatting like thumbnails, text hierarchy, split buttons, etc. will need to be updated.

Meta viewport tag injection deprecated

WP7 doesn’t recognize dynamically injected viewport meta tags so we now recommend placing the meta tags on each page instead of using the dynamic tags injected by the metaViewportContent defined in the global configuration. To avoid breaking existing sites, the framework looks to see if the meta tag exists in the markup and will inject one only if one isn’t present. NOTE: We are deprecating the meta inject feature and will remove it by 1.0 so please update your markup to include this meta tag now.

Native select menus, not custom menus, are now the default

The custom select menus included in jQuery Mobile are great because they allow us to create a consistent, themeable menu that can support multiple-selection, placeholder attributes and other features. The downside is that this feature adds complexity which means slower performance and more opportunities for bugs. In Alpha 2, we introduced the ability to keep the custom-styled select button that would open the native select menu when activated by adding the data-native-menu="true" attribute to a select.

In Alpha 4, we’re making this the default behavior of select menus to ensure the fastest and most compatible experience out of the box. This will impact existing sites built with jQuery Mobile, so if you upgrade and want to keep the custom menus on specific select menus, just add the data-native-menu="false" attribute. Alternately, this can also programmatically set the select menu’s nativeMenu configuration option to false in a callback bound to the mobileinit event to achieve the same effect. This will globally make all selects use the custom menu by default. The following must be included in the page after jQuery is loaded but before jQuery Mobile is loaded.

Active state of links in persistent footer navbars need an additional class

The active navbar button link within persistent footers needs an additional class of ui-state-persist in addition to ui-btn-active in order for the navbar to remain active when you navigate back to that page. Normally, the framework removes the active class on links after page transitions but in navbars we don’t want this to happen because the ui-btn-active is added to indicate the “on” state and this class is used to trigger this exception.

Looking ahead

Our current goal is to release a beta version of jQuery Mobile by mid-April for the jQuery conference and are planning on finalizing 1.0 by the late spring timeframe. We are now feature-complete for 1.0 and will be focusing on increasing our device support to include Blackberry 5 and Symbian S60, improving performance, fixing bugs, and expanding our documentation and test coverage.

After 1.0 is out, the project be focusing on a few major themes: tablet support, dynamic applications, expanded widget set, and tools like ThemeRoller and a Download builder. A more detailed roadmap is underway and we’ll share it as we get closer to our 1.0 release.

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.0a4.js (130KB, useful for debugging)
• Minified and Gzipped: jquery-mobile-1.0a4.min.js (19KB, ready to deploy)

CDN-Hosted CSS:

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

Copy-and-Paste Snippet:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.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.0a4.zip (JavaScript, CSS, and images)

Supported platforms in Alpha 4

In the alpha 4 release, the following platforms and browsers have a solid jQuery Mobile experience with pages fully functional and rendering as designed. New in this release is WP7 support.

Apple iOS (3.1-4.2): tested on iPhone, iPod Touch, iPad
Android (1.6-2.3): all devices, tested on the HTC Incredible, Motorola Droid, Google G1 and Nook Color
Blackberry 6: tested on Torch and Style
Windows Phone 7: tested on HTC Surround
Palm WebOS (1.4): tested on Pre, Pixi
Opera Mobile (10.1): Android
Opera Mini (5.02): iOS, Android
Firefox Mobile (beta): Android

Since jQuery Mobile is built on the jQuery core, all pages should also work great on most recent versions of desktop browsers too – Firefox, Chrome, Safari, Internet Explorer, Opera, etc. For more information about browser support, view the current browser support status and known issues and the project’s target graded browser matrix [UPDATED].

Target platform additions for beta
The team is now focusing on bringing support to Blackberry 5, Nokia/Symbian for the upcoming beta release. We don’t yet have phones to test bada or MeeGo but these will be evaluated as soon as we get devices.

Thanks

For this release we would like to thank our corporate sponsors and John Resig, Filament Group (Scott Jehl, Todd Parker), Adobe (Kin Blas, Jorge Taylor), John Bender, Eric Hynds, Ben Alman, Jörn Zaefferer, Elijah Manor, Alex Kovar, Adam Messinger, Brad Broulikand, Felipe Brahm, cm71td, Ivan Rubanov, Alexander Wunschik, hakanson, adammessinger, Dave Hulbert, Phil Barnes, ray58750034, Dave Hulbert, ahallerblu, eddiemonge, Martin Kou, Bra1n, Ernesto Jiménez, Jim Hoskins, Ashley Streb, tschaub (“there is no p in hamster”), chrsMon, Alex Kovar many others.

We’re pleased to announce the third alpha release of the jQuery Mobile project. This release includes a number of bug fixes and enhancements to the original jQuery Mobile Alpha 1 and jQuery Mobile Alpha 2 releases.

Overall the quality of jQuery Mobile has been greatly improved. In general, the following improvements have been doing since Alpha 2:

• The team made about 480 commits!
• Fixed around 150 bugs
• Created 240 unit tests (almost all are passing in most browsers)
• Refactored and improved our core and navigation plugins in many ways, and improved consistency across plugin APIs
• Increased our A-Grade browser support to include Firefox Mobile (Fennec), Opera Mobile / Mini, and refined our support for iOS, Android, BlackBerry 6, Palm WebOS, and most modern desktop browsers
• Wrapped the jQuery UI datepicker plugin with a touch optimized theme (it’s not included in our build by default)
• Fixed our “fixed” toolbars – Thanks Kin!
• Improved keyboard and general accessibility support on VoiceOver
• Gotten very close to a-grade support for Windows Phone 7 and Nokia (in branches currently)
• Made headway on several feature branches, like history.pushState support (for hash-free URLs), and simulated scrolling
• Made countless other improvements and optimizations

Right now we’re planning on releasing the first beta within the month before moving on to our 1.0 release. Our goals moving forward are to improve performance, user-experience and responsiveness, and extend our support to Windows Phone 7, BlackBerry 5, and Nokia devices, among other browsers. Please follow our twitter account for updates: @jquerymobile.

Demos and Documentation

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.0a3.js (130KB, useful for debugging)
• Minified and Gzipped: jquery-mobile-1.0a3.min.js (17KB, ready to deploy)

CDN-Hosted CSS:

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

Copy-and-Paste Snippet:

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

More details on how this works can be found in the page and layout documentation.

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

ZIP File:

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

Testing

If you wish to help with testing of jQuery Mobile we recommend that you hop on to Github and grab the latest source. Additionally please test against the latest version of the source at our test URL and file bugs in the bug tracker:

• jQuery Mobile Source Code
• jQuery Mobile Test Page (Pulls directly from the latest commit)
• jQuery Mobile Bug Tracker

Changelog

Ajax Navigation

The Ajax naigation system has been deeply re-factored to improve performance and handle more edge cases. This includes event handling for click, submit, and hashchange, all of the base tag management, path management, active link class handling, etc. and better support for dialogs.

We changed page navigation scripting to use data-url attributes instead of IDs for storing page URLs. This fixes a number of issues, most importantly a bug which exposed a conflict between jQuery’s selector engine that would result in un-enhanced pages whenever linking between two pages in the same directory. The shift away from interal ID attribute usage also allows users to bind page events (pagecreate, pagebeforecreate) to a page div by its ID, which was a frequent cause of confusion when it didn’t work as expected in former versions of the framework.

Fixed baseTagTest() in jquery.mobile.support.js, so that it uses any pre-existing base tag for testing. This fixes the bug on Webkit (Safari) where the relative paths for links were being resolved/expressed with the document path instead of the original base path.

Page transitions are now smoother and we have more improvements queued up for the next release.

Dialogs

Close behavior works better and can be invoked by adding a data-rel=”back” attribute on a link to provide a way to dismiss with dialog and also provide a real href for non-JavaScript users. Dialogs aren’t tracked in the history stack to prevent deep-linking but can be dismissed via the device’s/browser’s back button. Improved up click and submit handling on forms in dialogs. Dialogs can now be used more reliably in multiple-page documents as well.

Toolbars

Fixed positioning of headers and footers was completely re-factored and is much smoother so they no longer scroll with the page. Persistent footer nav bars now reliably show across pages.

List views

Fixed rendering issues with single item lists, first/last item styles and thumbnail images. Made the list parser more forgiving of whitespace, line breaks and other formatting. Nested lists can now be deep-linked to via the hash and support the auto-generated back buttons. Split buttons now work in older versions of Android and work correctly after calling refresh() for dynamically added items.

Form Controls

Now support enable, disable, and refresh methods (where applicable). Native form elements can be used by adding data-role=”none” attribute on the element or globally via the global keepNative option. Form controls can now be styled with data-theme attributes and will automatically inherit the theme swatch of their parent container. Ajax form handling has been improved.

Text Inputs

Search input has improved styling and fixes the inner shadow bugs in iOS. Input types can now optionally degrade to alternate types, instead of text. First such example is type=range degrades to type=number. These types are configurable via the page plugin’s degradeInputs option

Radiobutton and Check Boxes

New touch events make these much more responsive for immediate visual feedback

Flip Toggle

New touch events make these much more responsive, and can now be operated with the navigator keypad on Android and Blackberry 6, as well as through standard keyboard input.

Slider

New touch events make these much more responsive, fixed a bug that validated the text input too fast to enter a value. We now bind the slider drag event handling to touch and mouse events, which allows us to support Opera Mobile, Blackberry and other platforms.

Select Menus

Deep re-work of select menus to improve performance and feature set. New features include support for multiple select, optgroups, placeholder and disabled options. Native select menus can now be used instead of custom menus by adding data-native-menu=”true” attribute for even faster performance with long lists while maintaining the custom select button style.

Submit Buttons

Now, form input/button elements are appended to a div-based “button”, invisibly filling its width and height. The user now interacts directly with the native control, rather than having to trigger a click from another anchor (which formerly prevented some native submit event handling from working). A workaround is still included to ensure the input’s name/value is submitted along with the form when it’s not a type=reset, as this is necessary for the button data to appear in the serialized form data.

Buttons

Added new icons for home and search. Added extra padding to buttons that don’t have text labels (icon only) to improve hit area.

Theme

Improved the contrast of the focus state for lists and buttons to make them more usable in Android with the navigation pad. Tweaked gradient styles to better support Firefox and Internet Explorer. Fixed icons and loading image issues on Opera Mobile.

Thanks

For this release we would like to thank Filament Group (Scott Jehl, Todd Parker), Adobe (Kin Blas, Jorge Taylor), John Bender, Brightcove (Jesse Streb, Ashley Streb), Eric Hynds, Ben Alman, Jörn Zaefferer, Alex Kovar, Adam Messinger, @davibe, Louy Alakkad, @medovob and many others.

We’re pleased to announce the second alpha release of the jQuery Mobile project. This release includes a number of bug fixes and enhancements to the original jQuery Mobile Alpha 1 release.

Overall the quality of jQuery Mobile has been greatly improved. A number of subsystems have been rewritten (both for clarity and for performance) and cross-browser compatibility has seen a marked increase in quality. We’re planning on releasing at least one more alpha (or beta) before the end of the year, followed by a final 1.0 release in January.

Demos and Documentation

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.

NOTE: jQuery Mobile 1.0 Alpha 2 requires jQuery 1.4.4.

CDN-Hosted JavaScript:

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

CDN-Hosted CSS:

• Uncompressed: jquery-mobile-1.0a2.css (49KB, useful for debugging)
• Minified and Gzipped: jquery-mobile-1.0a2.min.css (6KB, ready to deploy)

Copy-and-Paste Snippet:

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

More details on how this works can be found in the page and layout documentation.

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

ZIP File:

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

Testing

The current state of the jQuery Mobile test lab.

If you wish to help with testing of jQuery Mobile we recommend that you hop on to Github and grab the latest source. Additionally please test against the latest version of the source at our test URL and file bugs in the bug tracker:

• jQuery Mobile Source Code
• jQuery Mobile Test Page (Pulls directly from the latest commit)
• jQuery Mobile Bug Tracker

Bug Fixes

Lots and lots of bug fixes have been made in this release – about 200 tickets have been closed since the 1.0 Alpha 1 release and we’re continuing to work strong

List Views

The performance of loading a large listview has been greatly improved. We’re seeing around a 3x improvement in speed, depending upon the platform.

Additionally you can now call refresh on a list view for when you add new items, to apply the list view styling to them.

Select Menus

The new refresh functionality has been added to select menus as well, allowing you to add the select menu styling to newly-injected items.

Additionally the accessibility of select menus has been improved, allowing your to navigate through the select menu using the keyboard (such as being able to open the select menu with the ‘enter’ key and navigate using the arrow keys).

Scrolling and Headers/Footers

The performance of page scrolling has been greatly improved – as has the performance and quality of fixed headers and footers.

Navbar Overhauled

The navbar functionality has been overhauled using the grid model work provided by the framework allowing for much greater flexibility in the design of the navbar.

URL Navigation Refactored

Much of the handling for loading new pages (via Ajax) has been overhauled and tremendously improved. The functionality has been encapsulated in a new changePage method that gives a great amount of flexibility as to how data should be loaded and how page-to-page transitions should work.

Ajax Form Handling

In addition to the automatic handling of internal links (converting them into Ajax requests and introducing smooth page-to-page transitions), Alpha 2 also handles the same functionality for forms. Form submissions will now pass through the changePage method – allowing for smooth form submission, transitions, and page loads. More information about this technique can be seen in the documentation.

jQuery UI Widget Factory

All of the relevant jQuery Mobile widgets have moved over to building off of the jQuery UI Widget Factory. This gives us the ability to have greater extensibility and methods (such as the ability to disable controls). Specifically in this release Dialog, Form Buttons, listview, collapsible, Checkbox/Radio, textinput, slider / switch, Select menu,  have all moved over to the widget factory, and we’re continuing to work on extending the methods and events those plugins provide.

Dialog

In addition to moving to the jQuery UI Widget Factory a new method for dialogs has been introduced: close (naturally, allowing you to close a dialog once open). You can call it like so: .dialog("close").

Global Configuration

jQuery Mobile now has a number of ways to override the initial configuration of a number of aspects of the framework (such as disabled Ajax-style links or forms). This can allow you to sculpt jQuery Mobile to work in situations that are more-specialized and don’t fit the complete design methodology of the framework (giving you the ability to only use a couple widgets rather than the framework as whole, for example).

Media Query Helpers

A new set of CSS classes have been introduced that are automatically updated on resize and orientationchange that you can use to scale your layout to particular devices and rotations. These are designed to work even in browsers that don’t support CSS Media Queries.

New Methods

A number of static methods have been added to make some common tasks quite simple, such as: Scrolling the page, showing the loading message, changing pages, and other tasks.

Events

The documentation for jQuery Mobile’s events has been drastically improved. jQuery Mobile publishes a number of events that can be utilized to write complex mobile applications (and can be used separately from the jQuery Mobile framework).

Thanks

For this release we would like to thank Filament Group (specifically Scott Jehl who was responsible for much of the development of the release and Todd Parker who was responsible for the design), Adobe (specifically Kin Blas who helped to fix a number of bugs and Jorge Taylor), Ben Alman (for helping to improve orientationchange), RIM (for providing us with test devices), and Nokia (for providing us with test devices).

Today we’re pleased to announce the first alpha release of the jQuery Mobile project. jQuery Mobile is a user interface framework, built on top of jQuery, designed to simplify the process of building applications that target mobile devices.

We’ve made really good progress since we first announced the project two months ago. We’ve created a number of components, layouts, and theming tools to greatly simplify the process of building a mobile application.

There are two guiding principles of the jQuery Mobile project that differentiates it from most other offerings: It’s completely built on the principle of progressive enhancement and is designed to be functional in all HTML-capable mobile browsers.

Features

Progressive Enhancement: jQuery Mobile is built completely around the principle of progressive enhancement: taking a fully functional HTML web page, layering on additional JavaScript functionality, and giving capable browsers a top-of-the-line experience. This means that your jQuery Mobile application will work in more browsers, guaranteed – even in mobile browsers that don’t support JavaScript (a regular occurrence).

For this first alpha release we’ve managed to cover support for many of the A-Grade browsers that we wish to support (such as iOS devices, Android devices, Blackberry OS 6, webOS, Fennec, and Opera Mobile). There are still bugs on those platforms and a few of the other platforms are failing pretty hard. We’re working to resolve these issues in time for the 1.0 release.

Graceful Degradation: jQuery Mobile uses the very best HTML 5 and CSS 3 features to provide the best possible experience in the most-capable browsers. However we don’t consider this to be an all-or-nothing proposition: Less capable browsers will still receive the best possible experience that their platform can handle. They may not have all the gradients or fancy transitions of the best platforms but they’ll still be highly usable. The most basic browsers will easily degrade back to simplified HTML and CSS.

Accessibility: All jQuery Mobile components are ARIA accessible. They are keyboard navigable (on a desktop computer) and can be navigated using a screen reader. While at this very moment jQuery Mobile is highly targeted at mobile devices we hope to quickly grow the scope of the project to encompass many platforms: mobile, tablets, desktops, and beyond.

Simplicity: jQuery Mobile is completely markup-driven requiring no JavaScript configuration. This makes it incredibly easy to get started: Just open an HTML file, edit its contents, and you’ll have a fully-capable jQuery Mobile application in no time.

File Size: By utilizing the principles of progressive enhancement and leaning heavily on markup-driven configuration the file size of jQuery Mobile remains quite small. The JavaScript for the alpha release is only 12KB and the CSS is a mere 6KB. Very few images are used in the design of the framework (mostly icons) – instead making heavy use of CSS.

Theming: jQuery Mobile has a comprehensive theming structure built from the ground up to enable you to build capable web applications. This goes far beyond the styling system provided by jQuery UI and gives you the ability to truly adapt the styling of your entire application. For the alpha release all theme configuration must be done manually but for the final 1.0 release we’ll be providing a complete Themeroller tool for theming your application.

App-Capable: The usefulness of jQuery Mobile goes far beyond making impressive mobile web applications – you can also use it to build apps that can be purchased and deployed through an app store. We strongly recommend using PhoneGap as it gives you the full tools you need to deploy HTML/CSS/JavaScript applications to a mobile device.

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.0a1.js (86KB, useful for debugging)
• Minified and Gzipped: jquery-mobile-1.0a1.min.js (12KB, ready to deploy)

CDN-Hosted CSS:

• Uncompressed: jquery-mobile-1.0a1.css (45KB, useful for debugging)
• Minified and Gzipped: jquery-mobile-1.0a1.min.css (6KB, ready to deploy)

Copy-and-Paste Snippet:

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

More details on how this works can be found in the page and layout documentation.

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

ZIP File:

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

Contributing

Reminder: This is the first alpha release of the framework. There will surely be bugs in your platform of choice. The best way you can help us is to use it, file bugs, and even provide patches back. Please discuss issues that you encounter in the Developing jQuery Mobile forum.

We’re looking to do a few more preview releases during the next couple months leading up to the 1.0 release of the platform in January. Thanks for your help!

Thank You

We had tremendous amount of help from a variety of people and companies and would like to thank them:

Filament Group – For providing countless development hours to the project – taking it from a mere idea to a full-fledged framework in an incredibly short amount of time – they are super-human.

Palm – For providing us with finances, developers, and devices to test on. Palm is all about their webOS platform – which is completely designed around building HTML/CSS/JavaScript-based applications.

Research In Motion – For providing us with finances and devices to test on. They’re working on their Widget SDK and WebWorks platforms – a simple way of building Blackberry Widgets with HTML/CSS/JavaScript.

Adobe – For providing us with developers to help fix bugs and do testing. They’re doing some great things with jQuery Mobile and we’re really excited to see how they can push it forward.

DeviceAtlas – For providing us with advice and financial support. The DeviceAtlas folk have been doing mobile work for a long time now and have an incredible amount of insight into the platforms. They build tools to make it easier to practically deploy mobile web applications.

Mozilla Corporation – For providing us with devices to test against and for sponsoring the development of John Resig to work on jQuery and jQuery Mobile.

Nokia – For providing us with devices for testing. Nokia is working on a great platform for deploying web technology-based applications to Nokia devices.

Coming Soon

We have a number of components and features that we weren’t able to finish for the alpha release. We will be tackling them soon and they should be ready by the time 1.0 is ready.

• Date Picker, Time Picker
• Progress Bar
• Spinner
• Themeroller Support – jQuery Mobile is completely themable but we hope to make it even easier with the Themeroller tool.
• Tablet Optimization – Basic tablet support exists now but we’re looking to make some rather large improvements.

The jQuery project is really excited to announce the work that we’ve been doing to bring jQuery to mobile devices. Not only is the core jQuery library being improved to work across all of the major mobile platforms, but we’re also working to release a complete, unified, mobile UI framework.

Absolutely critical to us is that jQuery and the mobile UI framework that we’re developing work across all major international mobile platforms (not just a few of the most popular platforms in North America). We’ve published a complete strategy overview detailing the work that we’re doing and a chart showing all the browsers that we’re going to support.

Right now we’re working hard, planning out the features that we want to land and doing testing against the devices that we want to support — and hoping for a release later this year. If you wish to help, please join the discussion in the jQuery Mobile Community.

The start of jQuery’s Mobile testing lab.

The jQuery project has received sponsorship from a number of mobile browser vendors as well.

Palm, working on the webOS platform, is excited to sponsor jQuery’s mobile work:

“The jQuery community has focused on making the Web as productive and fun as possible. When we heard the mission behind jQuery Mobile, we wanted to help. With webOS we have shown that the Web platform is fantastic for developers, so we are excited to help make jQuery Mobile as good as it can be.” -Dion Almaer

Mozilla, working on Mobile Firefox, is also eager to sponsor jQuery’s mobile work:

“As a longtime supporter of the jQuery project and its wider community we are excited to extend our support to the jQuery Mobile project. jQuery Mobile has the potential to make cross-platform Open Web development significantly simpler.” -Pascal Finette

Filament Group Inc., a Boston-based design and development studio, is both a corporate sponsor and leading the design and front-end coding effort for the jQuery Mobile project:

“Filament is thrilled to sponsor and lead the design for the jQuery Mobile Framework; it’s a great opportunity to extend our work on ThemeRoller and jQuery UI. We’re especially pleased that progressive enhancement will be built right into jQuery Mobile – we think this positions it really well for broad accessibility and future compatibility.”

We’re thrilled to be working on this project. The mobile web is desperately in need of a framework that is capable of working across all browsers, allowing developers to build truly mobile web sites. We’re doing all we can to ensure that jQuery Mobile fills that need.