jQuery Mobile team update – Week of May 16th
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.
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 active auto generated back buttons on specific pages, simply add the
data-auto-back-btn="true" attribute on the page container and the magic will be back. To activate this globally, set the
autoBackBtn option in the page plugin to true. As a bonus, we’re appending the button to every page where there is at least 2 steps in the history if you disable Ajax or refresh the page, the back button will still appear.
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.
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.
Theme gallery: Contribute your creativity
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 resources, tutorials, 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.