jQuery Mobile 1.0 RC1 Released!

Posted on by


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

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

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

KEY CHANGES

Collapsibles: Design improvements

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

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

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

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

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

ThemeRoller Mobile: Coming soon!

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

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

Download builder: In the works

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

API Documentation: Expanded for all form widgets

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

 

Platform support in 1.0 RC1

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

We’re excited to announce that as of 1.0 RC1, we’ve covered all our target platforms for the project. At this stage, we have broad support for the vast majority of all modern desktop, smartphone, tablet, and e-reader platforms. In addition, feature phones and older browsers are supported because of our progressive enhancement approach. We’re very proud of our commitment to universal accessibility through our broad support for all popular platforms.

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.

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

  • Apple iOS 3.2-5.0 beta – Tested on the original iPad (3.2 / 4.3), iPad 2 (4.3), original iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), and 4 (4.3 / 5.0 beta)
  • Android 2.1-2.3 – Tested on the HTC Incredible (2.2), original Droid (2.2), Nook Color (2.2), HTC Aria (2.1), Google Nexus S (2.3). Functional on 1.5 & 1.6 but performance may be sluggish, tested on Google G1 (1.5)
  • Android Honeycomb– Tested on the Samsung Galaxy Tab 10.1
  • Windows Phone 7 – Tested on the HTC 7 Surround
  • Blackberry 6.0 – Tested on the Torch 9800 and Style 9670
  • Blackberry 7 – Tested on BlackBerry® Torch 9810
  • Blackberry Playbook – Tested on PlayBook version 1.0.1 / 1.0.5
  • Palm WebOS (1.4-2.0) – Tested on the Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0)
  • Palm WebOS 3.0 – Tested on HP TouchPad
  • Firebox Mobile (Beta) – Tested on Android 2.2
  • Opera Mobile 11.0: Tested on the iPhone 3GS and 4 (5.0/6.0), Android 2.2 (5.0/6.0), Windows Mobile 6.5 (5.0)
  • Meego 1.2 NEW – Tested on Nokia 950
  • Kindle 3: Tested on the built-in WebKit browser included in the Kindle 3 device
  • Chrome Desktop 11-13 – Tested on OS X 10.6.7 and Windows 7
  • Firefox Desktop 3.6-4.0 – Tested on OS X 10.6.7 and Windows 7
  • Internet Explorer 7-9 – Tested on Windows XP, Vista and 7 (minor CSS issues)
  • Opera Desktop 10-11 – Tested on OS X 10.6.7 and Windows 7

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

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

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

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

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

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

1.0 RC1 upgrade notes

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

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

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

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

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

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

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

Change log

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Add internal dependent tracking functions for jQuery Mobile objects

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Download

CDN-Hosted JavaScript:

CDN-Hosted CSS:

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

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

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

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

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

Development Update – Week of Sept. 19th

Posted on by

The jQuery Mobile team is now focused on bug-fixing and preparation for our first release candidate (RC1) for 1.0. We’ll be releasing RC1 within a week, just in time for the jQuery conference in early October. From there, we’ll have a few quick RCs with additional bug fixes before releasing 1.0 a bit later in October.

 

Meego 1.2: Grade A Support

Nokia was kind enough to send us a N950 phone for testing recently. Not only is Meego a super slick OS and the 950 an impressive piece of hardware, we were thrilled to find that jQuery Mobile worked beautifully the first time we fired it up. This has to be one of the easiest platform additions we’ve had and it shows how our focus on web standards and feature detection is really paying off.

Let’s hope we need more Meego devices in the future, it’s a really nice platform.

Cleanup of deprecated features: Take note

In preparation for jQuery Mobile 1.0, we’re removed a number of deprecated features. Please note that if you are running on an alpha codebase, many of these will be breaking changes.

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

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

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

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

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

Notable commits

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

Enable touch overflow scrolling on by default where supported – The $.mobile.touchOverflowEnabled is now true by default meaning that iOS5 devices will benefit from the improved animated page transitions and true fixed headers by default.  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

We’ve been nominated: Packt Publishing’s Open Source Awards

We’re honored to be nominated for Packt Publishing’s Open Source Awards in the “Mobile Toolkits and Libraries” category. The Voting stage begins on 19th September 2011 and closes on 31st October 2011, with the winners announced throughout the week commencing 7th November 2011. Vote now for jQuery Mobile!

Bartender: iOS-inspired tab widget


Bartender is a new jQuery Mobile-compatible plugin created by Sven Franck that adds a iOS-like bottom tab bar to your page. Here’s how Sven describes bartender:

Since starting to work with Jquery Mobile I have been looking for a more “app-like” navigation bar. There are examples abound, but most can be used on webkit-browsers only. Since I did not find a real cross-browser solution, I made one myself. I call it the bartender plugin.

Features

  • based on JQM elements
  • CSS-only, no Jquery needed
  • tested on IE7+, latest FF, Opera, Chrome, Safari, Android, iOS
  • retina icons on all browsers except IE7-8
  • single retina-regular or separate sprites
  • All CSS-gradients

Get the latest builds on the jQuery CDN

To take advantage of the daily improvements happening in jQuery Mobile, be sure to check out out the new daily and latest builds that are now available on the jQuery CDN for hotlinking. This allows you to upgrade to the latest code without waiting for the next official release. Here are the three files to include in the head of your page to always be viewing the latest in Git:

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

If you just want to do a quick preview of our latest progress, visit www.jquerymobile.com/test to see a live demo of the docs synced every minute to the jQuery Mobile GitHub repo. This is helpful to check before filing an issue in the tracker to see if we’ve already fixed a bug you see in the last stable release. Please keep in mind that this the unstable, development version so we don’t recommend linking to the latest in a production site or app but it’s great for development and testing.

jQuery Mobile Beta 3 released!

Posted on by

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

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

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

KEY CHANGES

pushState: Now, clean URLs with Ajax-based navigation

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

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

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

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

$.mobile.pushStateEnabled = false;

 

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

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

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

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

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

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

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

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

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

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

To learn more, visit the new documentation page.

iOS5: Dramatically improved page transitions and true fixed toolbars

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

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

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

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

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

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

Don’t other mobile platforms already support overflow?

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

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

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

Switch from keyframe to transitions for animations: Post 1.0

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

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

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

Download builder: In the works

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

Platform support in Beta 3

As of Beta 3, we’ve pretty much covered our target platforms for 1.0. At this stage, jQuery Mobile works on the vast majority of all modern desktop, smartphone, tablet, and e-reader platforms. In addition, feature phones and older browsers are also supported because of our progressive enhancement approach. We’re very proud of our commitment to universal accessibility through our broad support for all popular platforms.

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). Functional on 1.5 & 1.6 but performance may be sluggish, tested on Google G1 (1.5)
  • Android Honeycomb– Tested on the Samsung Galaxy Tab 10.1
  • Windows Phone 7: Tested on the HTC 7 Surround
  • Blackberry 6.0: Tested on the Torch 9800 and Style 9670
  • Blackberry 7 NEW – Tested on BlackBerry® Torch 9810
  • Blackberry Playbook: Tested on PlayBook version 1.0.1 / 1.0.5
  • Palm WebOS (1.4-2.0): Tested on the Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0)
  • Palm WebOS 3.0 – Tested on HP TouchPad
  • Firebox Mobile (Beta): Tested on Android 2.2
  • Opera Mobile 11.0: Tested on the iPhone 3GS and 4 (5.0/6.0), Android 2.2 (5.0/6.0), Windows Mobile 6.5 (5.0)
  • Kindle 3: Tested on the built-in WebKit browser included in the Kindle 3 device
  • Chrome Desktop 11-13 – Tested on OS X 10.6.7 and Windows 7
  • Firefox Desktop 3.6-4.0 – Tested on OS X 10.6.7 and Windows 7
  • Internet Explorer 7-9 – Tested on Windows XP, Vista and 7 (minor CSS issues)
  • Opera Desktop 10-11 – Tested on OS X 10.6.7 and Windows 7

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

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

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

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

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

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

Beta 3 upgrade notes

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

Change log

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Download

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

CDN-Hosted JavaScript:

CDN-Hosted CSS:

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

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

 

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

ZIP File: