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.

jQuery Mobile: “Innovation of the Year” in the 2011 .net Awards

Posted on by

We are honored to be recognized by the prestigious .net Awards awards as the “Innovation of the Year“.

This is an important achievement for the jQuery Mobile project and would like to thank the judges, community and .net Magazine for their support. We’d also like to congratulate our fellow nominees CSS3Pie and Google+, we’re honored to be in your company.

Learn more about the .net Awards

Announcing jQuery Mobile 1.0

Posted on by

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

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

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

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

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

 

jQuery Mobile 1.0 Final
Requires jQuery core 1.6.4

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

 

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

ANNOUNCEMENTS

Performance

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

ThemeRoller for Mobile

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

Resources: Sites, books, plugins, articles and more

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

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

New documentation pages

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

Upgrade notes

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

Reminder: 1.0 supports jQuery core 1.6.4 only

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

A Word of Thanks

We’d like to thank the 125 contributors and supporters for their incredible dedication and for being a great bunch people to work with: John Resig, Todd Parker, Scott Jehl, Kin Blas, John Bender, Tyler Benziger, Ghislain Seguin, Mat Marquis, Maggie Wachs, Patty Toland, Anne-Gaelle Colom, Garann Means, Eddie Monge, Dan Heberden, Paul Irish, Rick Waldron, Ben Alman, Scott González, Jörn Zaefferer,  Richard Worth, Dave Methvin, Douglas Neiner, Ralph Whitbeck, Maurice Gottlieb, Eric Hynds, Jesse Streb, Steven Black, Jacob Gable, Aaron McAdam, Sven Franck, Timmy Willison, Nabil Saleh, Abriele Rabbiosi, Jake Boone, Ryan Neufeld, Andy Matthews, Jonathan Sharp, Dan Croak, Louy Alakkad, Jason Crane, Asyraf Abdul Rahman, Dave Hulbert, Matthew Leon Grinshpun, Konstantin Pozin, Alexandre Capt, Gabe Hollombe, Casey Justus, frietsch, depeele, Mike Woods, Matt Lins, Adam Messinger, Bradley Kuhn,  Jorge Taylor, Mike Taylor, Divya Manian, Dion Almer, Ben Galbraith, Laurent Hasson, Conrad Seaman, Eli Fidler, Abu Obeida Bakhach, Claudio Cataldo, Jean-Christophe Cimetiere, Wai Seto, Michael Daitzman, Mano Balasubramaniam, Andrea Trasatti, David Ballmer, and countless others.

Our corporate sponsors have been essential to our success and donating developer time on an ongoing basis is a really useful way to help the project. First and foremost, we’d like to thank our premier sponsor Adobe for their incredible support of the project, donating three full-time developers (Kin Blas, John Bender and Tyler Benziger). We’d also like to thank sponsors Filament Group for kickstarting the project and donating the design and development time from the whole crew (Todd Parker, Scott Jehl, Mat Marquis, Maggie Wachs, Patty Toland). Both Jive Software (Ghislain Seguin) and Microsoft (Sergey Grebnov) generously donate part-time development support.

Financial support is another critical way corporations support the project. We’d like to thank Research In Motion, HP/PalmNokia, Microsoft, Rhomobile for contributing generously to the project to support our mission. We’d also like to thank the various companies and individuals who have donated test devices to the project.

If you are interested in giving back to the project, please contact Todd Parker.

Platform support in 1.0

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), and 4 (4.3 / 5.0)
  • Android 2.1-2.3 – Tested on the HTC Incredible (2.2), original Droid (2.2), Nook Color (2.2), HTC Aria (2.1), Google Nexus S (2.3). Functional on 1.5 & 1.6 but performance may be sluggish, tested on Google G1 (1.5)
  • Android Honeycomb- Tested on the Samsung Galaxy Tab 10.1 and Motorola XOOM
  • Windows Phone 7-7.5 – Tested on the HTC Surround (7.0) HTC Trophy (7.5), and LG-E900 (7.5)
  • Blackberry 6.0 – Tested on the Torch 9800 and Style 9670
  • Blackberry 7 – Tested on BlackBerry® Torch 9810
  • Blackberry Playbook – Tested on PlayBook version 1.0.1 / 1.0.5
  • Palm WebOS (1.4-2.0) – Tested on the Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0)
  • Palm WebOS 3.0 – Tested on HP TouchPad
  • Firebox Mobile (Beta) – Tested on Android 2.2
  • Opera Mobile 11.0: Tested on the Android 2.2
  • Meego 1.2 – Tested on Nokia 950 and N9
  • Kindle 3 and Fire: Tested on the built-in WebKit browser for each
  • Chrome Desktop 11-15 - Tested on OS X 10.6.7 and Windows 7
  • Firefox Desktop 4-8 – Tested on OS X 10.6.7 and Windows 7
  • Internet Explorer 7-9 – Tested on Windows XP, Vista and 7 (minor CSS issues)
  • Opera Desktop 10-11 - Tested on OS X 10.6.7 and Windows 7

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

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

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

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

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

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

Download

CDN-Hosted JavaScript:

CDN-Hosted CSS:

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

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

 

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

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

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

jQuery Mobile Wins a 2011 Open Source Award

Posted on by


We are thrilled to announce that jQuery Mobile has been awarded the top honor in the “Open Source Mobile Toolkits and Libraries” category of the Packt 2011 Open Source Awards.

We want to thank the community for all their support of the project and look forward to using our award to keep up our momentum in our goal of creating an easy-to-use and broadly accessible user interface library for all popular mobile platforms.

The Open Source Awards is a contest that aims to encourage, support, recognize and reward Open Source projects. Formerly the Open Source CMS Award, the contest has been running since 2006 and is regarded as one of the most established platforms for recognizing excellence amongst Open Source Software.

jQuery Mobile RC3 Released!

Posted on by

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

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

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

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

KEY CHANGES

Performance, performance, performance

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

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

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

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

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

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

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

Reminder: 1.0 will ship with jQuery core 1.6.4

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

New linkBindingEnabled option

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

New overlay theme swatch option

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

Listview inheritance: Fixed

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

New documentation pages

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

Change log

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

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

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

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

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

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

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

Flip switch improvements to fix snapping – Thanks redaemn!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Tweak to reference the buttonMarkup text wrapper element through data

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

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

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

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

Page title overridden on first load (issue 2865)

Fix theme inheritance for text inputs - Thanks eddiemonge!

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

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

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

Account for dialog or other sub element enhancements 

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

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

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

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

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

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

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

Download

CDN-Hosted JavaScript:

CDN-Hosted CSS:

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

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

 

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

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

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

Platform support in 1.0 RC3

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

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

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

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

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

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

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

Announcing ThemeRoller for Mobile (beta)

Posted on by

We’re excited to announce the release of the new ThemeRoller for Mobile tool. ThemeRoller is a web-based tool that makes it super simple to create custom themes without writing a single line of CSS.

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

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

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

Themes & swatches

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

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

Global settings

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

Gradient tools

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

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

Preview inspector and QuickSwatch bar

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

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

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

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

Adobe Kuler Integration

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

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

Sharing URLs

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

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

Downloading and importing

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

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

A word of thanks

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

Give it a try!

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

ThemeRoller Source: Open Source

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

jQuery Mobile 1.0RC2 Released!

Posted on by

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

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

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

KEY CHANGES

Expanded support for HTML5 date, time and color input types

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

New helper class for hiding elements in an accessible way

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

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

Custom selects: now work in controlgroups

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

Dialogs: now have a max-width

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

Fixed toolbar improvements

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

Form elements: 100% width by default

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

Native touch overflow enhancements: Off by default.

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

New: Theme vs. structure stylesheets

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

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

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

Change log 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Title is custom select menus now updates correctly – Thanks MauriceG

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

Switched to stop propagation on checkbox/radio with vmouse events

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

1.0 RC2 upgrade notes

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

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

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

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

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

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

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

 

Download

CDN-Hosted JavaScript:

CDN-Hosted CSS:

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

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

 

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

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

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

Platform support in 1.0 RC2

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

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

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 – Tested on Nokia 950
  • Kindle 3: Tested on the built-in WebKit browser included in the Kindle 3 device
  • Chrome Desktop 11-13 – Tested on OS X 10.6.7 and Windows 7
  • Firefox Desktop 3.6-4.0 – Tested on OS X 10.6.7 and Windows 7
  • Internet Explorer 7-9 – Tested on Windows XP, Vista and 7 (minor CSS issues)
  • Opera Desktop 10-11 - Tested on OS X 10.6.7 and Windows 7

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

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

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

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

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

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

jQuery Mobile 1.0 RC1 Released!

Posted on 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.