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.
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
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.
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.
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.
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.
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.
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.
We’d like to thank the 125 contributors and supporters for their incredible dedication and for being a great bunch people to work with: John Resig, Todd Parker, Scott Jehl, Kin Blas, John Bender, Tyler Benziger, Ghislain Seguin, Mat Marquis, Maggie Wachs, Patty Toland, Anne-Gaelle Colom, Garann Means, Eddie Monge, Dan Heberden, Paul Irish, Rick Waldron, Ben Alman, Scott González, Jörn Zaefferer, Richard Worth, Dave Methvin, Douglas Neiner, Ralph Whitbeck, Maurice Gottlieb, Eric Hynds, Jesse Streb, Steven Black, Jacob Gable, Aaron McAdam, Sven Franck, Timmy Willison, Nabil Saleh, Abriele Rabbiosi, Jake Boone, Ryan Neufeld, Andy Matthews, Jonathan Sharp, Dan Croak, Louy Alakkad, Jason Crane, Asyraf Abdul Rahman, Dave Hulbert, Matthew Leon Grinshpun, Konstantin Pozin, Alexandre Capt, Gabe Hollombe, Casey Justus, frietsch, depeele, Mike Woods, Matt Lins, Adam Messinger, Bradley Kuhn, Jorge Taylor, Mike Taylor, Divya Manian, Dion Almer, Ben Galbraith, Laurent Hasson, Conrad Seaman, Eli Fidler, Abu Obeida Bakhach, Claudio Cataldo, Jean-Christophe Cimetiere, Wai Seto, Michael Daitzman, Mano Balasubramaniam, Andrea Trasatti, David Ballmer, and countless others.
Our corporate sponsors have been essential to our success and donating developer time on an ongoing basis is a really useful way to help the project. First and foremost, we’d like to thank our premier sponsor Adobe for their incredible support of the project, donating three full-time developers (Kin Blas, John Bender and Tyler Benziger). We’d also like to thank sponsors Filament Group for kickstarting the project and donating the design and development time from the whole crew (Todd Parker, Scott Jehl, Mat Marquis, Maggie Wachs, Patty Toland). Both Jive Software (Ghislain Seguin) and Microsoft (Sergey Grebnov) generously donate part-time development support.
Financial support is another critical way corporations support the project. We’d like to thank Research In Motion, HP/Palm, Nokia, Microsoft, Rhomobile for contributing generously to the project to support our mission. We’d also like to thank the various companies and individuals who have donated test devices to the project.
If you are interested in giving back to the project, please contact Todd Parker.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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)
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!
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
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.