jQuery Mobile 1.0.1 Released

Posted on by

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

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

KEY CHANGES

Now Officially Supported: bada and UC Web

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

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

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

Test lab & donations

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

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

Change log

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

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

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

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

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

Fix for custom multi select bubble counts – Thanks MauriceG

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

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

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

Fix position of searchbar in touchOverflow mode – Thanks MaZderMind!

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

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

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

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

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

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

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

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

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

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

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

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

Documentation and demo for hidden listview filter content – Thanks jakeboone002

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

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

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

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

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

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

Download

CDN-Hosted JavaScript:

CDN-Hosted CSS:

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

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

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

 
Microsoft CDN hosted jQuery Mobile files:

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

Platform support in 1.0.1

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

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

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

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

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

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

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

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

 


Upcoming Releases: 1.0.1, 1.1, and beyond

Posted on by

With the start of a new year, we’ll be resuming our more regular team updates to keep you in the loop on what we’re working on here in the jQuery Mobile project. To kick things off, we’d like to share our current thinking on the next few releases so you can start planning ahead.

1.0.1 Maintenance release: Coming soon

We’re planning on releasing our first maintenance release for 1.0 within the next two weeks. This will consist of bug fixes and minor improvements to 1.0 after which we’ll focus on getting 1.1 out the door.

Version 1.1: Big improvements ahead

As soon as we released 1.0, we took a hard look at the framework to identify what areas needed the most improvement. The two items that quickly rose to the top of the list were improving the smoothness of page transitions and achieving true fixed toolbars. Both of these items have been a priority for the project since the beginning but we realized that to significantly improve these, we needed a complete re-think to embrace the constraints and opportunities of the wide range of browsers we support.

I’m happy to annouce that we have dramatically improved both of these items in our upcoming 1.1 release. We also have a few other goodies in slated for this release including AMD support (already in master) and a download builder tool (in-progress).

We’re planning on getting into a pattern of fairly regular, focused releases roughly every 3 months. Version 1.1 is the first of these releases and is slated for release sometime in mid/late February. Here’s a bit more on the key things that will be included:

  • AMD Support: Dependency management, flexible builds and improved code structure. Sorting out the dependencies is an essential step for a future download builder tool. AMD is a CommonJS standard that is being widely adopted by the JS community and breaks the boundaries between frameworks. In jQuery Mobile, we’re using AMD to express dependencies for the build scripts and to support our in-progress download builder tool, however we strip out all the AMD overhead in the final source files. It will just export a single “jquery.mobile” AMD module if an AMD loader is present, the same way jQuery Core does it. Special thanks to James Burke (@jrburke) for jumping in and helping us polish our AMD implementation. We’re happy to report that this feature has now landed in master.
  • True fixed toolbars: Lightweight, CSS-based & broadly compatible.  When we first started developing the library, CSS support for position:fixed in mobile platforms was pretty much non-existent so our “fixed” toolbar solution dynamically re-positioned the toolbars each time you scrolled the page. Although it was a decent stopgap, the way mobile browsers would freeze the DOM during scroll would result in the toolbars briefly scrolling with the document which was impossible to completely fix. After a lot of prototyping and testing, we now have a complete re-write of this feature that provides true fixed toolbars on iOS5, Android 2.2+, Blackberry 7 & PlayBook, Kindle Fire, and most all desktop browsers while safely falling back to static toolbar positioning in other browsers. All in a lightweight, CSS-based approach that leverages native scrolling: demo the new fixed toolbars. We’ll cover fixed toolbars in more detail in a follow-up post.
  • Improved AJAX page transitions: Smoother, faster. We did a ton of work leading up to 1.0 to make our transitions as smooth as possible, but there were two significant constraints that we couldn’t avoid: the need to scroll the viewport between transitions and Android’s poor animation performance. In 1.1, we’ve embraced theses contraints and have come up with new animation sequence that effectively hides the page scrolling, completely re-designed the loading spinner to be visually unobtrusive, sped up the overall transition timing, added support for Firefox animations, and changed the default page transition to a fast and smooth fade out/in animation instead of slide. After much after a lot of testing and refinement, we’ve decided to use a 3D transform feature test to exclude poorly performing platforms like Android 2.x from the more complex slide, pop and and flip transitions so these will fall back to the default fade for all transitions to ensure a smooth experience. View an in-progress demo of the new transitions including a few experimental new animation types (note: above 1,000 pixel width screens, we switch to no transition so re-size your browser). If curious, this older iteration shows our best effort to improve transitions on Android 2.x and even with us dumbing down animations significantly, it’s pretty clear that Android simply isn’t capable of any page transitions other than fade. We’ll cover our thinking and process on the transition re-vamp in more detail in a follow-up post.

Heads up: touchOverflow to be deprecated in 1.1 – When we first introduced the touchOverflow feature, we saw it as a good way to leverage the native overflow support in iOS to bring true fixed toolbars and smoother transitions, even if it was for a fairly narrow set of devices at the time. Now with the significant changes to fixed headers and transition planned for 1.1, these will improve the experience in an almost identical way as touchOverflow, except it will work on a lot more platforms and with less complexity so we’ve decided to retire this feature. It will be deprecated at 1.1 and removed at 1.2. We do have future plans for addressing overflow regions with internal scrolling so a lot of the work we’ve done on touchOverflow will be re-purposed.

Version 1.2: New widgets and more improvements ahead

Our focus in 1.1 is improving key elements of the current library, but we plan on following up soon after with version 1.2. In this release, we plan on adding a few new components along with refinements to the existing widgets. We’re still prioritizing so things are subject to change, but here are two new things we’ve been working on for 1.2.

On deck, we have a popup component that is basically a small overlay that can hold any content or widget which makes it super easy to build a menu, tooltip, alert, dialog or even a lightbox with just a link and a few lines of HTML. This is different from a dialog because it actually overlays the current page instead of navigating to a new page so it has a different effect. It’s a bit easier to just play with this so here’s a rough popup proof of concept (yep, we know there are bugs). We’d like to thank Gabriel Schulhof from Intel for sharing their work on this plugin.

We also have a new utility called fetch links that surfaces the power of the AJAX navigation system for loading, enhancing and populating regions of the page. By adding a data-target attribute to any standard link, you can tell the framework to populate the an element of the page (target) with the contents of the link instead of doing a full page transition. This simple mechanism can be used to make a tab strip, a slideshow, create a “load more” or “pull to refresh” feature in a listview, or simply update any portion of the page based on user activity. You can specify what part of the href to pull in by adding a data-fragment attribute (we default to the page container). The href can either point to a local resource (#foo) or an external page (foo.html) and the framework will take care of auto-enhancing the markup for you. A data-method lets you specify all the standard jQuery AJAX methods (append, prepend, replace, etc.).  We’re working on documentation and demos now and will share a preview soon.

This is just a taste of what we have in store for 1.2. We’ll keep you updated as we move forward with planning for 1.2 in future blog posts.  Expect 1.2 to drop in early spring.