Development Update – Week of June 13, 2011

Posted on by

We slipped a bit on on our weekly updates so sorry for the lack of updates recently. We’ve been busy prepping for Beta 1 and fixing bugs so there is a lot of activity. Here’s what we’ve been up to on the jQuery Mobile project.

Over the last few weeks, we’ve been deeply re-factoring our Ajax navigation system to make it more extensible and robust. This week, we’re happy to announce that we just landed a batch of improvements to URL handling and base tag manipulation.

Continue reading

Development Update – Week of May 23, 2011

Posted on by

Blackberry 5: Now officially supported!

We’ve been working hard to support the Blackberry 5 platform and we’re happy to announce that jQuery Mobile now works great on our test Blackberry 5 devices. This platform has B grade support which means that all the enhanced styles and widgets work well within the CSS capabilities of the device, but Ajax navigation and page transitions aren’t supported so links and form submits result in a full page refresh.

Ajax navigation was problematic on BB5 because it lacks hashchange support for the history stack whcih essentially broke the back button behavior so disabling this feature resolves that issue and also speeds up the user experience. These devices tend to be fairly under-powered so very complex pages can take a bit longer to render but overlaly it works very well. There are of a few style improvements we need to tidy up, but sites built with jQuery Mobile should now work well on this platform. View the latest build to see it in action.

Opera mini: Ajax-free and faster

We’ve had support for Opera Mobile and Mini for a few releases now, but Opera Mini had a few issues with handling the Ajax navigation system which resulted in pages that were either scrolled to the wrong position, clipped off just plain blank in some cases. After a bit of research, we determined that the majority of issues were to due to timing issues with Mini’s proxy-based browser and our Ajax-based page creation and animation system.

After a lot of debate, we decided to exclude Opera Mini from the Ajax navigation system and mark it as Grade B, just like Blackberry 5. We landed this change landed this week and not only did this fix all the major rendering issues we were experiencing, it also significantly improved the overall speed and responsiveness of the user experience. As a bonus, Opera Mini seems to apply a slide page animation natively so you actually get smoother animated page transitions with Ajax transitions turned off!

jQuery Mobile works great in both Opera Mini 5 and the brand new version 6 that was just released. We tested Opera Mini 6 for both the iPhone, iPad and Android and the rendering quality is much better than 5 so it’s a significant upgrade. Opera’s full-blown browser, Opera Mobile is unaffected by this change to Mini and will continue to see a Grade A experience with Ajax navigation and animated transitions. View the latest build to see it in action.

This week, we landed a big refactor the core Ajax navigation code to allow for better extensibility for developers that are manipulating pages dynamically. Until recently, the navigation code was largely implemented as a set of nested functions within the $.mobile.changePage() function which made the code very hard to follow and extend.

In this refactor, we decoupled the navigation core into 3 separate functions. Partitioning the code this way makes it easier for us to identify key points for adding extensibility hooks and makes the code easier to follow:

  • loadPage()
    • Responsible for loading a page into the DOM of a specific page container and enhancing it.
  • changePage()
    • Responsible for updating the internal bookkeeping for tracking what is the current page. This includes:
      • Managing the URL stack.
      • Managing the location hash.
      • Kicking off a transition.
  • transitionPages()
    • Responsible for managing the transition between the current active page and the new page to be shown.

changePage() now takes 2 arguments: the first is required,  the second is optional. The first argument accepts a URL or a jQuery collection containing a page element as its first argument. The 2nd argument is an options object that allows the caller to modify changePage behavior. The options that can be specified are as follows:

  • transition
    • String
    • The transition to use when showing the page.
    • Defaults to transition specified by $.mobile.defaultPageTransition.
  • reverse
    • Boolean
    • Decides what direction the transition will run when showing the page.
    • Defaults to false.
  • changeHash
    • Boolean
    • Decides if the hash in the location bar should be updated.
    • Defaults to true.
  • role
    • String
    • The data-role value to be used when displaying the page.
    • Defaults to “page”.
  • pageContainer
    • jQuery collection
    • Specifies the element that should contain the page after it is loaded.
    • Defaults to $.mobile.pageContainer.
  • type
    • String
    • Specifies the method (“get” or “post”) to use when making a page request.
    • Default is “get”.
    • NOTE: This should probably be renamed to “method”. The current name comes from the old signature.
  • data
    • Object or String
    • The data to send with an Ajax page request.
    • Default is undefined.
  • reloadPage
    • Boolean
    • Forces a reload of a page, even if it is already in the DOM of the page container.
    • Default is false.
  • showLoadMsg
    • Boolean
    • Display the loading message when a page request is fired.
    • Default is true.

Upgrade note: Since the signature forchangePage() has changed during this refactoryou may need to update your custom code before upgrading. To ease the transition to the new signature in the short-term, we’ve added code to changePage() that maps any old signature calls to changePage() into a new call. This should fix issue 1712 ($.mobile.changePage broken in latest). This code will be removed before shipping 1.0.

We have a list of additional items we’re planning to improve in the Ajax navigation system for 1.0 including more flexible URL handling, improved page transitions, page-level cache settings, global methods for managing the DOM size, and much more.

Experimental datepicker: Moved out of the official docs & repo

A while back, we took the jQuery UI datepicker and tweaked it to use the jQuery Mobile theme CSS classes as an experimental stopgap for people who really needed a datepicker. The issue with this component is it’s really heavy and the UI team is currently re-factoring the datepicker from the ground-up so we wanted to shift this out of the official GitHub repo because it won’t be supported going forward. We will pull the new UI datepicker in once it’s finished, but that will be later this year.

In the meantime, if you still want to use the experimental datepicker, it’s now available on Filament Group’s GitHub repo but note that it’s not being actively maintained. If anyone is interested in maintaining this plugin in the short-term, please let us know. You can also check out alternate jQuery datepickers like DateBox, a slick jQuery Mobile optimized date picker.

Notable commits this week

Height issue for transitioning page (issue 1507) - Fixed the issue where buttons and other elements were sometimes showing up at 100% height during page transitions. Thanks Eddie Monge.

Allow checkboxes and radio buttons to be selected with the keyboard – The name says it all, thanks Shana Golden.

Fixed header/footer positioning in IE 7/8 – Desktop IE wasn’t reporting a scrollTop value for fixed headers/footers—’window’ is now provided as a fallback in the event that $(document).scrollTop() reports zero. Thanks Mat Marquis (wilto).

Select menus now work in Firefox Mobile (issue 1626) – Changed the hiding mechanism for invisible native selects so that they work in Firefox Mobile.

Removed the ajaxLinksEnabled and ajaxFormsEnabled settings – These were deprecated in a4 and scheduled for removal. Automated link and form ajax handling can still be globally disabled via the ajaxEnabled option.

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.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

 

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.

 

Development Update – Week of May 16th, 2011

Posted on by

In addition to discussing our daily activity of the project in our weekly blog posts, we’re going to try and start covering some of the interesting developments around jQuery Mobile out in the world. Feel free to ping jquerymobile on Twitter if you have a project, plugin or event that you’d like to share.

Beta 1: Coming soon

The jQuery Mobile team is making great progress and we’re getting close to our first beta release. At this stage, we want to complete all the navigation re-factor work, achieve solid Blackberry and Opera Mini support, and close out a few key blocker issues before we hit this milestone. We’ll will keep everyone updated here on the blog as we get closer to beta 1, but we’re hoping to release at the end of May or early June.

Ajax navigation and B grade support

We’re almost done getting Blackberry 5 support buttoned up and it’s looking great. However, one major issue we’ve found is that it doesn’t support hashchange events in the history stack so the back button is effectively broken completely with Ajax-based navigation. Symbian has the same issues with tracking hashchange and there isn’t a viable workaround for either platform. We’ve also found that Opera Mini’s proxy-based rendering has a number of issues with the Ajax navigation that can cause blank or clipped pages if the timing of the rendering is a bit off.

For these reasons, we’re looking into ways of excluding these platforms from the Ajax navigation system but still give them the rest of the enhanced user experience. In our early tests, eliminating Ajax navigation from Blackberry 5, Opera Mini and Symbian have dramatically improved the performance of jQuery Mobile on these platforms so we’re currently working on a way to target this feature without resorting to user agent detection which we avoid at all costs in jQuery.

This enhanced experience without Ajax navigation and page transitions seems like a good way to characterize the “B grade” support. Stay tuned, we’ll have some announcements on this topic soon.

Pinch-to-zoom: Now restored

Our demos and docs had a viewport meta tag that set “minimum-scale=1, maximum-scale=1″ which completely disabled the pinch- or double-tap-to-zoom feature in mobile browsers. We had done this originally because on iOS, there is a bug that will incorrectly scale the page when you change orientation. Here is the meta tag we used up through Alpha 4.1:

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

Disabling the native zoom features of the browser isn’t very user-friendly so we just changed our meta tag in the demos and docs to restore the ability to zoom the page. At this stage, we don’t think it’s worth disabling the user’s zoom feature to workaround an iOS bug that may be fixed in the near future. The meta tag is part of the page markup so this isn’t a a change to the library scripts, but our demos are used as a template for many people so we want to set an example of the best practice for mobile web development. The new meta tag we use looks like this:

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

We landed two changes earlier this week to adjust the meta tags so if you go to the latest demos, you will be able to pinch zoom the pages. Since this meta tag is part of your page content, you are free to set these attributes to match the specific needs of your project.

Note that JavaScript can be used to manipulate this tag dynamically to fix the iOS bug, but this approach is far from fool-proof and causes some performance issues. At this stage, we want to start with the simplest option (leaving the browser feature untouched) and think about alternatives to improve this for 1.0.

Dynamic injected viewport meta tag: Support dropped

On a related topic, we deprecated injecting the viewport meta tag back in alpha 4 due to Windows Phone 7’s lack of support for dynamically injected viewport elements.  This week, we removed the dynamic viewport support from the codebase in preparation for beta so if you haven’t switched to writing this tag into your markup, please do that now in preparation for Beta.

Automatic toolbar back button: Now off by default

In last week’s blog post, we outlined the reasons why we felt the feature that automatically adds a back button to the header toolbar, while cool, wasn’t really necessary for most web sites and web apps because browsers and phones already have back buttons. The response in the comments and Twitter was overwhelmingly positive to moving in this direction so this week, we landed this change.

All this really means is that this feature is off by default. It’s not going anywhere because we understand that in fullscreen browser environments or installed apps, there isn’t browser chrome or a physical back button on all platforms so you’ll want to flip this switch on in those cases.

To activate auto generated back buttons on specific pages, simply add the data-add-back-btn="true" attribute on the page container and the magic will be back. To activate this globally, set the addBackBtn option in the page plugin to true. Here is an example of how to set this:

$(document).bind("mobileinit", function() {
      $.mobile.page.prototype.options.addBackBtn = true;
 });

 

Notable commits

Upgraded jQuery Mobile to use jQuery core 1.6.1 to pick up :checked fixes.

Add new focus event to show the clear button on search textbox when an item is pasted directly without a key event to search text box. Thanks joshiabk

Interesting jQuery Mobile Plugins

Actionsheet – A really simple, markup-driven plugin that allows you to create small floating overlays that contain buttons or any other content or even forms with a bit of CSS tweaks.

Photoswipe – A slick photo gallery tool, now with jQuery Mobile support. Check out the demos to see it in action.

Datebox – A calendar and Android-like spinner datepicker. The site has lots of demo examples to play with so check it out.

Google maps – Integration examples of Google maps with jQuery Mobile that show how easy it is to drop maps into mobile.

Mobilism talk on jQuery Mobile

Team member Scott Jehl spoke recently at the Mobilism conference about the current state, lessons learned and future of jQuery Mobile: “jQuery Mobile: Building Tools for a Changing Web”. Check out his presentation video and summary by Luke W.

New team member

We want to welcome Ghislain Séguin from Jive Software to the jQuery Mobile team. He will be working part time on the jQuery Mobile project at Jive. We’re glad to have you aboard.

We’re still trying to figure out a solid timeline for getting a ThemeRoller tool created for jQuery Mobile. In the meantime, we’d like to set up a place for people to share themes with the community. To create a theme,  just grab a copy of the default theme and start tweaking colors in the CSS. We’d like to get themes that cover a broad range of look and feel and include at a minimum 5 swatches (a-e) for compatibility with the current themes. Other than that, go to town deeply customizing your themes. Check out the structure of the slick Valencia theme by Jordan Dobson to see the structure of a standard theme. To submit your theme, please post a link to a zip download or Git repo and tell us about it on twitter or by emailing Todd Parker. We’re looking forward to seeing what you create!

Looking for inspiration?

If you want to see all the cool things people are building with jQuery Mobile, be sure to check out jQMgallery.com. In addition to highlighting inspiring sites built with jQuery Mobil, it also maintains lists of resourcestutorials, and plugins.

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.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

 

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.

 

Development Update – Week of May 9th, 2011

Posted on by

Ajax navigation moving along

Our Ajax navigation re-write in still in-progress in a branch, but here are some of the key things we’ve done this week:

  • Broke out nested functions from changePage() to improve readability/understanding.
  • Changed signature to changePage() so that it uses an options structure.
  • Removed differenciation between form submit and loading. It’s all the same. Now there is a generic flag/option you can pass that is forceLoad: true which does the same thing for forms.
  • Replaced $.mobile.defaultTransition with $.mobile.defaultPageTransition and $.mobile.defaultDialogTransition.
  • Performance fix to prevent unnecessary crawling of the entire document.

Responsive design helper classes: Deprecated for beta

We include a set of responsive design helper classes designed to make it easy to build a responsive design that adapts the layout for various screen widths. At the time, we went with a system of dynamically appended min- and max-width classes on the body that are updated on load, resize and orientation change events as a workaround for the limitation that Internet Explorer doesn’t support media queries.

Although this technique works, it adds script overhead that we’d like to avoid as we move towards 1.0. Within jQuery Mobile, we only use these classes for a single feature: the responsive label/form layouts. This week, we re-wrote the styles for the form elements to work without the helper classes by switching to standard media queries in our CSS. Since we use media queries sparingly right now, the only change you’ll see is that at wider screen widths, WP7 won’t switch to the layout with the label floated to the left of the form element.

We understand that many developers may be using these CSS classes so we’re going to leave this code in until after the first beta to give everyone time to migrate to other solutions. We will be removing these classes completely by 1.0. If you want to use media queries on Internet Explorer, we recommend adding in respond.js, a polyfill script written by team member Scott Jehl that adds media query support for IE.  Post-1.0, we’re going to look into whether we should polyfill media queries as part of jQuery Mobile or continue to leave it as an optional file.

Toolbar back button: Relevant on the web?


When we first introduced jQuery Mobile, one pattern we adopted was the “back” button in the header bar because it’s a standard app convention. We went so far as to include a back button on every page we Ajax in automatically. However, as time has gone on, we’ve been wondering if this is still a good idea for a few reasons:

A web app runs in a browser that already includes software and/or hardware based buttons for navigating forward and back in the history stack so a button in the header is redundant and may not used as much as the native controls which have the benefit of habitual use. A hardware back button is standard on all Android, WP7 and Blackberry devices and we’d bet most users on those platforms prefer to use the hardware button. Both iOS and Palm WebOS don’t have hardware buttons, but both have a persistent back button available in the browser chrome at all times. The only time a back button is critical is in a fullscreen iOS or WebOS app.

Compounding our issues with the automatic back button is it’s seemly unpredictable behavior. When we first added this feature, we actually had a bug that added it to every page unless you shut off the feature or had a button in the lefthand slot in the header. We eventually fixed this so the back button was only added if jQuery Mobile loaded a page through Ajax so we could know that the back button would go back to another jQuery Mobile page and not some random site in your history stack. However, this caused a lot of confusion because the back button would “disappear” when a page was refreshed or when you linked to a page with the data-ajax=”false” attribute.

Because we originally built the demos and docs pages with the auto back button as the only navigation feature, a lot of people followed this pattern. In hindsight, we think this is less than ideal because a web site or application should have some form of persistent navigation. For any web site or web application that will be consumed primarily through the browser, we recommend following all the normal web conventions for navigation:

  • At a minimum, provide a link back to the home screen, either via a linked logo or home button, like we do in the demos & docs so a deep link to a page isn’t a dead-end
  • Consider adding a way to access other primary navigation, either via a simple navbar or menu
  • Consider providing a global search box if available on every page
  • Add additional navigation links at the bottom of pages to improve flow flow one page to another. It’s always easier to access navigation at the end of a long page than at the top

Our current plan is to shut off the automatic back button feature by default for beta and are considering whether to keep this feature in for 1.0. Let us know your thoughts, we’re listening.

 

Submitting an issue? Some tips

To help us resolve issues in the Git tracker as quickly as possible, here are a few critical things that every ticket should have:

  • First test to see if this is still an issue in the latest Git build because we’re constantly fixing bugs after a release. Include our latest JS and CSS files in your project to see if we’ve already fixed it. If it can be reproduced in the demos and docs, simply view the latest on the /test/ directory:
    http://www.jquerymobile.com/test/
  • Always specific the platform and version if it’s in the native browser: Ex. iPhone 3GS, iOS 3.2
  • If you see an issue with a 3rd party browser, specify that in addition to the device info. Ex: Firefox mobile 4.0b3 running on HTC Aria running Android 2.2
  • List out the detailed steps and conditions needed to reproduce the bug
  • Don’t paste huge chunks of code into the issue ticket. Instead, post a demo page on an online code sharing site like JS Bin or jsFiddle or in a Git repo so we can demo the page and view the code easily. For a head start, use this JS Bin as a template that includes a live link to the latest build: http://jsbin.com/ukewu3/edit

Notable changes this week

Listview filter speed improvements (issue 1477)
We made a number of changes to improve the responsiveness of the filtering mechanism which is especially helpful on longer lists. More tweaks planned for the future. Thanks nsaleh

Phonegap: Pages with data-ajax=”false” on form fail to load (issue 1580)
In the $.ajax() callback, we look for elements with @href, @src, and @data-ajax=”false” elements, the code then assumes that matching elements will have either @href or @src, which of course forms don’t … they have @action … so the code throws an exception because thisUrl is undefined. Reworked the code to handle action and check to make sure we have an attribute and url string before attempting to use them.

Base tag regression fixed (issue 1508)
This change sets the base tag properly on page load and page changes, corresponding with the recent change to absolute path hash urls. Images and other assets will direct relative to the document in which they reside. This may not cover new path situations Kin has documented, but it does fix the regression so things work as they did before the change. Tested in non-base supporting browsers to verify it works there too. The following page should have an image in the content, verifying the fix

Can’t load file:// pages (issue 1578)
The change caused the base tag to be reset to file:// (literally with no path). All that was missing was a small tweak to base.reset() to use the new initialPath variable instead of docBase.

Listview theme swatch D issue when clicked (issue 1624)
When an item in a listview with the D swatch of the default theme is tapped or clicked, the btn-down class creates a square border and looked chunky. Fixed by removing extraneous style rules. Thanks epsd

Grouped radio buttons with long labels don’t ellipsis (issue 1419)
Fixed grouped radio buttons with long labels so they wrap to multiple lines. Thanks gseguin!

Regex breaking Firefox >3.6 (issue 1514)
Tweaked regex to make Firefox happy. A quick bit of Date()-based benchmarking showed an improvement from ~4.5 seconds to 3ms in Firefox 3.6. The stock Android browser on my Galaxy Tab went from ~3.6 seconds to 1ms. Thanks MaxThrax

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.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

 

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.

Development Update – Week of May 2, 2011

Posted on by

Navigation re-factor update

This week, we’re continuing our work on the Ajax navigation re-write. There are a number of dimensions involved in this re-write including:

  • More flexible URL handling:
  • Extensibility hooks for dynamic page creation
    • Steven Black will start a wiki page with suggesitons
  • Caching: add a simple “don’t cache” flag per page
    • A new data-cache attribute on the page div to tell framework to re-load it if shown again, default is “true” (re-use the page) but you can set data-cache=”false” to tell the framework to re-load ever time it’s viewed
    • Issue created in the tracker
  • Memory management: how to keep the DOM from getting too big?
    • Add a new global configuration option to set the max number of pages to keep in the DOM at once. Once that max is hit, we run a a document-wide $(“selector”).remove() at the appropriate juncture in every changePage invocation (post Ajax success) that finds all pages that are data-cache=”false” or oldest in the stack and delete them. We’ll need to check for alreadyLocalPage = (“[data-url='...']:not([data-cache='false']“)
    • Default to a sensible number like 15-20 pages but this can be overridden to any number more than 2 (to allow for transitions) or turned off completely
    • Issue created in the tracker:
  • Focus: can we handle this better?
    • we need to have focus brought to the top of the current page on transition for accessibility and keyboard/focus-based navigation
    • Scott Jehl will create a wiki page with suggestions
  • Transitions: how to smooth out, eliminate blinking
    • Kin will tackle this after URLs

View source bookmarklet

Doug Neiner, a jQuery core team member and all-around design genius just created a cool view source bookmarklet that makes is super easy to view the source of any jQuery Mobile page. Since we use Ajax-based navigation that uses the hash to track page state, it requires a bit of hacking to the URL to get the source of the page but this bookmarklet makes it a breeze. We’ll look into adding this to our demo pages so everyone can enjoy the convenience. Thanks Doug!

Notable changes this week

Updated jQuery Mobile to run of jQuery core 1.6 Until this week, we were running on the 1.6 RC but we’ve moved over to the final version of 1.6 and things seem to be working great.

Radiobuttons can’t be selected once they are selected, then de-selected. Fixed by using  jQuery attr accessor instead of expando to guarantee consistent values. (issue 1532)

Multiple calendars generated inadvertently in multi-page docs. The each callback in the pagecreate method was creating multiple calendars when used with a multi-page html file. Fixed by scoping to the current page instead of the entire document. Thanks edelabar!

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

Fixed base tag support. This change sets the base tag properly on page load and page changes, corresponding with the recent change to absolute path hash urls. Images and other assets will direct relative to the document in which they reside. This may not cover new path situations we’ve documented recently (changes underway), but it does fix the regression so things work as they did before the change. Tested in non-base supporting browsers to verify it works there too. (issue 1508)

Can’t load file:// pages. Fixed a regression that caused the base tag to be reset to file:// (literally with no path). All that was missing was a small tweak to base.reset() to use the new initialPath variable instead of docBase. (issue 1578)

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.

 

Development Update – Week of April 25, 2011

Posted on by

This and next week, the team is primarily focused on re-factoring and optimizing the Ajax navigation system and page transitions in jQuery Mobile to make them more extensible and stable. Here is a recap of our activities this week.

Navigation re-write in progress

We’re in the process of re-factoring our URL handling for Ajax-driven navigation to be more robust and are starting to plan extensibility points in the system to make it easier for developers to tweak and extend the navigation behavior.  For typical web use, we will continue to use site relative URLs in the hash for same host/protocol to keep the URLs from being too unwieldy and plan on eventually adding Ajax replaceState  to further improve the length and readability of URLs in typical situations.

To better support PhoneGap developers that use file:// protocols extensively, we’re considering how to best support scenarios where the document may initially contain a base tag that specifies a URL that has a different protocol and/or host from the document URL, or cases where the page containing the link was in an externally loaded page that may have specified a different URL with the @data-url attribute. Our proposed solution is to have jQuery Mobile check to see if the page was loaded with file:// protocol and it is attempting to load a page via the http:// protocol. If this occurs and the $.mobile.allowCrossDomainPages configuration flag is also set to true, jQuery Mobile will switch to absolute mode (isExternal) where it looks at the full absolute path and checks the hostname, protocol and link.href to ensure that everything is properly resolved. Before we start re-writing code, we’re going to beef up our test coverage this week around navigation to ensure that we avoid any regressions. Read more about the  details of the navigation re-write on the planning wiki.

Page transitions: decoupled and extensible

We’ve been working on pulling page transitions out into a separate plugin so they can be decoupled from the navigation plugin. As part of this re-work, we’re introducing the ability for developers to create custom transitions created with pure CSS3, or in combination with JavaScript by adding extensibility hooks to the transition system. The development work has been completed and pushed into master so grab the latest if you want to start hooking in your own custom transitions.

Mobile profiler code released

Team member Kin Blas from Adobe has built some really great profiling tools that we use for optimizing our code. He recently released this code on GitHub so grab the code and start helping us find places to optimize our code: https://github.com/jblas/profiler

Notable changes

Tops of pages clipped after returning from a dialog (issue 1461)
If you had scrolled down on a page, opened a dialog, then closed it, the page height was getting clipped off in iOS due to the timing of when we were placing focus back on the page.  Solution: Delayed the setting of focus till after the scroll position is restored.

Active class not being removed correctly
If a link had an null or “#” value for the href, the active class wasn’t being removed. To fix this, we modified the vclick handler code in navgation.js so that it doesn’t place the ui-btn-active class on any links meant for interactivity. Removed the return false in the vclick handler of collapsible and replaced it with a preventDefault(). The only reason we were returning false was to stopPropagation() so that the vclick handler in navigation.js didn’t place a ui-btn-active on it.

jQuery 1.6 RC now in master
In preparation for the 1.6 release, we’ve been testing with the latest jQuery core RC. So far, we haven’t seen any issues but let us know if anything crops up in your testing.

Listview refresh and filtering performance
We’ve really speed up the listview since 4.1 so if you have a site or app  that uses long listviews, be sure to grab the latest version (see below) to get the best performance.

Get the latest build with our nightlies

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.

Development Update – Week of April 21, 2011

Posted on by

Attending: Todd Parker, Scott Jehl, John Resig, Kin Blas, John Bender, Eddie Monge, Steven Black

Project communication

We’re going to try to post a summary of our weekly meeting here on the wiki and on the jQuery.org site so everyone can see what we’re up to on the project.

Going forward, all communication and meetings will take place on IRC channels for better transparency and to gain input from the jQuery Mobile community. Core dev team discussion is now in #jquerymobile-dev. For help with jQuery Mobile, please use the #jquerymobile or #jquery channels on freenode.net. Weekly jQuery Mobile team meetings will happen on the #jquery-meeting IRC channel on freenode.net every Tuesday at 2:00pm EST/11am PST.

Key issues we’re tracking now

Tops of pages missing after returning from a dialog in Safari and iPhone

https://github.com/jquery/jquery-mobile/issues/1461
https://github.com/jquery/jquery-mobile/issues/1457
This issue is tied to recent focus management changes. Solution noted in comments: we just need to bind to the silentscroll event for when we set focus. Kin will try to land this ASAP.

Ajax = issue re: relative paths

In A4.1 links referencing parent directory with the `../` syntax break some ajax calls. Needs testing with the forced absolute paths introduced post A4.1. Closed and created new issue: https://github.com/jquery/jquery-mobile/issues/1171

Active state stickyness issues

Buttons in jQM have 4 states: normal, hover, focus, and down (pressed) which is a bit different from the link’s :hover and :active states. Our active state is not parallel to a link’s :active, instead it’s meant to be more like and ”on” or selected state that is only needed for stateful buttons or special cases (like lists) where we want to have an “on” state.
Proposed change: only set the active class on a button if we know we’re navigating so any null or # links will get the down state but not active.

The “active” class name is a bit confusing because of reasons outlined above, may be worth changing if we can find a much clearer name. Look here for synonym ideas: http://thesaurus.com/browse/Active

Navigation: changepage

• Lengthy discussion on how to proceed.

• Goals: less procedural, separate things out for readability, tightly coupled thru scoping on purpose,

• plan our re-factor on the wiki ahead of time, add high-level tests before re-factoring

• Tangent on initial conditions for tests.

• Pulling transitions from changePage().  An easy get?

• Navigating to self… legitimate in generated pages?

• Making isExternal smarter.

• Moving arguments over to a hash, rename changePage so it can act as a proxy to new one?

• Page container concept: pave the way to multi-panel tablet, handles transitions between pages in the DOM

• Followup with history.js @ https://github.com/balupton/History.js

• Kin will be available to lead the charge on this and everyone else will plug in. First step is to keep filling out the navigation mapping and planning wiki pages here and here.

Recent commits

Fix from @brukhabtu for issue 1492 – Errors when trying to delete DOM elements.

Check for existence of the bindings object before attempting to use it. Apparently jQuery core strips off any data bindings of an element before calling teardown on it to remove special event handlers.

Fix for issue 1157 – Collapsible block prevents page scrolling on iPhone 4

When we switched to virtual mouse events, I just did a straight translation of the code that existed which basically did the collapse/expand on mouseup. In order to factor in scrolling, I needed to move that code into a vclick handler and stopPropagation() and preventDefault() to make sure the button doesn’t activate.

Fix for 1407 – Bad scroll performance since A4 on iPhone 3G

- Modified vmouse code so that it uses $.data() instead of $().data() which is significantly faster.

- Modified the navigation and buttonMarkup code so they stop using live(). The vmouse code triggers several events during the touch events, which in turn causes the underlying event code to call $.closest() with the selector used during the live() call to figure out if the event should be handled. This turns out to be very expensive, so instead, we now just bind directly to the document, and walk the DOM manually to figure out if we should handle it. This is much faster since we are avoid triggering multiple nested function calls.

Fix for Issue 1424 – Adding items to listviews on a4.1 is too slow

- Modified _itemApply() to make use of item.children() and filters. Also got rid of some unused code.

- Convert .each() in refresh() to a loop.

- Cache some $list.jqmData() values so we don’t do it for each list item.

Nightly and Up-To-Date builds

Posted on by

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

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

http://jquerymobile.com/test/

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

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

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

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

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

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

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

jQuery Alpha 4.1 maintenance release

Posted on by

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

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

Key changes

Here are the key issues and fixes this release addresses:

PhoneGap file:// fix for Ajax navigation

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

Virtual click tweaks

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

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

Scroll position fixes

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

IE8 & 9 support

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

Additional fixes included in A4.1

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

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

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

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

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

Project status and timing

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

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

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

Download

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

CDN-Hosted JavaScript:

CDN-Hosted CSS:

Copy-and-Paste Snippet:

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

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

ZIP File:

jQuery Mobile Alpha 4 Released

Posted on by

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

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

WP7 running on jQuery Mobile

Windows Phone 7 (WP7) support

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

Namespaced data- attributes

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

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

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

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

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

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

PhoneGap improvements

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

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

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

Forms in listviews

Forms in listviews

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

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

Configurable text strings

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

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

Auto-updating page titles for Ajax navigation

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

Bug fixes & improvements

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Upgrade notes

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

New list markup conventions

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

Meta viewport tag injection deprecated

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

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

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

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

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

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

Looking ahead

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

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

Download

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

CDN-Hosted JavaScript:

CDN-Hosted CSS:

Copy-and-Paste Snippet:

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

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

ZIP File:

Supported platforms in Alpha 4

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

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

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

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

Thanks

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