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.

jQuery Mobile Alpha 3 Released

Posted on by

We’re pleased to announce the third alpha release of the jQuery Mobile project. This release includes a number of bug fixes and enhancements to the original jQuery Mobile Alpha 1 and jQuery Mobile Alpha 2 releases.

Overall the quality of jQuery Mobile has been greatly improved. In general, the following improvements have been doing since Alpha 2:

  • The team made about 480 commits!
  • Fixed around 150 bugs
  • Created 240 unit tests (almost all are passing in most browsers)
  • Refactored and improved our core and navigation plugins in many ways, and improved consistency across plugin APIs
  • Increased our A-Grade browser support to include Firefox Mobile (Fennec), Opera Mobile / Mini, and refined our support for iOS, Android, BlackBerry 6, Palm WebOS, and most modern desktop browsers
  • Wrapped the jQuery UI datepicker plugin with a touch optimized theme (it’s not included in our build by default)
  • Fixed our “fixed” toolbars – Thanks Kin!
  • Improved keyboard and general accessibility support on VoiceOver
  • Gotten very close to a-grade support for Windows Phone 7 and Nokia (in branches currently)
  • Made headway on several feature branches, like history.pushState support (for hash-free URLs), and simulated scrolling
  • Made countless other improvements and optimizations

Right now we’re planning on releasing the first beta within the month before moving on to our 1.0 release. Our goals moving forward are to improve performance, user-experience and responsiveness, and extend our support to Windows Phone 7, BlackBerry 5, and Nokia devices, among other browsers. Please follow our twitter account for updates: @jquerymobile.

Demos and Documentation

jQuery Mobile Alpha 3

All the jQuery Mobile demos and documentation can be found in the unified demo application:


    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.0a3/jquery.mobile-1.0a3.min.css" />
    <script src="http://code.jquery.com/jquery-1.5.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>

    More details on how this works can be found in the page and layout documentation.

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

    ZIP File:

    Testing

    jQuery Mobile test devices

    If you wish to help with testing of jQuery Mobile we recommend that you hop on to Github and grab the latest source. Additionally please test against the latest version of the source at our test URL and file bugs in the bug tracker:

    Changelog

    Ajax Navigation

    The Ajax naigation system has been deeply re-factored to improve performance and handle more edge cases. This includes event handling for click, submit, and hashchange, all of the base tag management, path management, active link class handling, etc. and better support for dialogs.

    We changed page navigation scripting to use data-url attributes instead of IDs for storing page URLs. This fixes a number of issues, most importantly a bug which exposed a conflict between jQuery’s selector engine that would result in un-enhanced pages whenever linking between two pages in the same directory. The shift away from interal ID attribute usage also allows users to bind page events (pagecreate, pagebeforecreate) to a page div by its ID, which was a frequent cause of confusion when it didn’t work as expected in former versions of the framework.

    Fixed baseTagTest() in jquery.mobile.support.js, so that it uses any pre-existing base tag for testing. This fixes the bug on Webkit (Safari) where the relative paths for links were being resolved/expressed with the document path instead of the original base path.

    Page transitions are now smoother and we have more improvements queued up for the next release.

    Dialogs

    Close behavior works better and can be invoked by adding a data-rel=”back” attribute on a link to provide a way to dismiss with dialog and also provide a real href for non-JavaScript users. Dialogs aren’t tracked in the history stack to prevent deep-linking but can be dismissed via the device’s/browser’s back button. Improved up click and submit handling on forms in dialogs. Dialogs can now be used more reliably in multiple-page documents as well.

    Toolbars

    Fixed positioning of headers and footers was completely re-factored and is much smoother so they no longer scroll with the page. Persistent footer nav bars now reliably show across pages.

    List views

    Fixed rendering issues with single item lists, first/last item styles and thumbnail images. Made the list parser more forgiving of whitespace, line breaks and other formatting. Nested lists can now be deep-linked to via the hash and support the auto-generated back buttons. Split buttons now work in older versions of Android and work correctly after calling refresh() for dynamically added items.

    Form Controls

    Now support enable, disable, and refresh methods (where applicable). Native form elements can be used by adding data-role=”none” attribute on the element or globally via the global keepNative option. Form controls can now be styled with data-theme attributes and will automatically inherit the theme swatch of their parent container. Ajax form handling has been improved.

    Text Inputs

    Search input has improved styling and fixes the inner shadow bugs in iOS. Input types can now optionally degrade to alternate types, instead of text. First such example is type=range degrades to type=number. These types are configurable via the page plugin’s degradeInputs option

    Radiobutton and Check Boxes

    New touch events make these much more responsive for immediate visual feedback

    Flip Toggle

    New touch events make these much more responsive, and can now be operated with the navigator keypad on Android and Blackberry 6, as well as through standard keyboard input.

    Slider

    New touch events make these much more responsive, fixed a bug that validated the text input too fast to enter a value. We now bind the slider drag event handling to touch and mouse events, which allows us to support Opera Mobile, Blackberry and other platforms.

    Select Menus

    Deep re-work of select menus to improve performance and feature set. New features include support for multiple select, optgroups, placeholder and disabled options. Native select menus can now be used instead of custom menus by adding data-native-menu=”true” attribute for even faster performance with long lists while maintaining the custom select button style.

    Submit Buttons

    Now, form input/button elements are appended to a div-based “button”, invisibly filling its width and height. The user now interacts directly with the native control, rather than having to trigger a click from another anchor (which formerly prevented some native submit event handling from working). A workaround is still included to ensure the input’s name/value is submitted along with the form when it’s not a type=reset, as this is necessary for the button data to appear in the serialized form data.

    Buttons

    Added new icons for home and search. Added extra padding to buttons that don’t have text labels (icon only) to improve hit area.

    Theme

    Improved the contrast of the focus state for lists and buttons to make them more usable in Android with the navigation pad. Tweaked gradient styles to better support Firefox and Internet Explorer. Fixed icons and loading image issues on Opera Mobile.

    Thanks

    For this release we would like to thank Filament Group (Scott Jehl, Todd Parker), Adobe (Kin Blas, Jorge Taylor), John Bender, Brightcove (Jesse Streb, Ashley Streb), Eric Hynds, Ben Alman, Jörn Zaefferer, Alex Kovar, Adam Messinger, @davibe, Louy Alakkad, @medovob and many others.

    jQuery Mobile Alpha 2 Released

    Posted on by

    We’re pleased to announce the second alpha release of the jQuery Mobile project. This release includes a number of bug fixes and enhancements to the original jQuery Mobile Alpha 1 release.

    Overall the quality of jQuery Mobile has been greatly improved. A number of subsystems have been rewritten (both for clarity and for performance) and cross-browser compatibility has seen a marked increase in quality. We’re planning on releasing at least one more alpha (or beta) before the end of the year, followed by a final 1.0 release in January.

    Demos and Documentation

    jQuery Mobile 1.0 Alpha 2

    All the jQuery Mobile demos and documentation can be found in the unified demo application:

    This includes demos and documentation for all the changes in jQuery Mobile 1.0a2, including:

    • Events
    • API and Methods
    • Ajax Form Handling
    • URL handling and transitions
    • Global Configuration


    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.

    NOTE: jQuery Mobile 1.0 Alpha 2 requires jQuery 1.4.4.

    CDN-Hosted JavaScript:

    CDN-Hosted CSS:

    Copy-and-Paste Snippet:

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

    More details on how this works can be found in the page and layout documentation.

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

    ZIP File:

    Testing

    jQuery Mobile test devices
    The current state of the jQuery Mobile test lab.

    If you wish to help with testing of jQuery Mobile we recommend that you hop on to Github and grab the latest source. Additionally please test against the latest version of the source at our test URL and file bugs in the bug tracker:

    Bug Fixes

    Lots and lots of bug fixes have been made in this release – about 200 tickets have been closed since the 1.0 Alpha 1 release and we’re continuing to work strong

    List Views

    The performance of loading a large listview has been greatly improved. We’re seeing around a 3x improvement in speed, depending upon the platform.

    Additionally you can now call refresh on a list view for when you add new items, to apply the list view styling to them.

    Select Menus

    The new refresh functionality has been added to select menus as well, allowing you to add the select menu styling to newly-injected items.

    Additionally the accessibility of select menus has been improved, allowing your to navigate through the select menu using the keyboard (such as being able to open the select menu with the ‘enter’ key and navigate using the arrow keys).

    Scrolling and Headers/Footers

    The performance of page scrolling has been greatly improved – as has the performance and quality of fixed headers and footers.

    Navbar Overhauled

    The navbar functionality has been overhauled using the grid model work provided by the framework allowing for much greater flexibility in the design of the navbar.

    URL Navigation Refactored

    Much of the handling for loading new pages (via Ajax) has been overhauled and tremendously improved. The functionality has been encapsulated in a new changePage method that gives a great amount of flexibility as to how data should be loaded and how page-to-page transitions should work.

    Ajax Form Handling

    In addition to the automatic handling of internal links (converting them into Ajax requests and introducing smooth page-to-page transitions), Alpha 2 also handles the same functionality for forms. Form submissions will now pass through the changePage method – allowing for smooth form submission, transitions, and page loads. More information about this technique can be seen in the documentation.

    jQuery UI Widget Factory

    All of the relevant jQuery Mobile widgets have moved over to building off of the jQuery UI Widget Factory. This gives us the ability to have greater extensibility and methods (such as the ability to disable controls). Specifically in this release Dialog, Form Buttons, listview, collapsible, Checkbox/Radio, textinput, slider / switch, Select menu,  have all moved over to the widget factory, and we’re continuing to work on extending the methods and events those plugins provide.

    Dialog

    In addition to moving to the jQuery UI Widget Factory a new method for dialogs has been introduced: close (naturally, allowing you to close a dialog once open). You can call it like so: .dialog("close").

    Global Configuration

    jQuery Mobile now has a number of ways to override the initial configuration of a number of aspects of the framework (such as disabled Ajax-style links or forms). This can allow you to sculpt jQuery Mobile to work in situations that are more-specialized and don’t fit the complete design methodology of the framework (giving you the ability to only use a couple widgets rather than the framework as whole, for example).

    Media Query Helpers

    A new set of CSS classes have been introduced that are automatically updated on resize and orientationchange that you can use to scale your layout to particular devices and rotations. These are designed to work even in browsers that don’t support CSS Media Queries.

    New Methods

    A number of static methods have been added to make some common tasks quite simple, such as: Scrolling the page, showing the loading message, changing pages, and other tasks.

    Events

    The documentation for jQuery Mobile’s events has been drastically improved. jQuery Mobile publishes a number of events that can be utilized to write complex mobile applications (and can be used separately from the jQuery Mobile framework).

    Thanks

    For this release we would like to thank Filament Group (specifically Scott Jehl who was responsible for much of the development of the release and Todd Parker who was responsible for the design), Adobe (specifically Kin Blas who helped to fix a number of bugs and Jorge Taylor), Ben Alman (for helping to improve orientationchange), RIM (for providing us with test devices), and Nokia (for providing us with test devices).

    jQuery Mobile Alpha 1 Released

    Posted on by

    Today we’re pleased to announce the first alpha release of the jQuery Mobile project. jQuery Mobile is a user interface framework, built on top of jQuery, designed to simplify the process of building applications that target mobile devices.

    We’ve made really good progress since we first announced the project two months ago. We’ve created a number of components, layouts, and theming tools to greatly simplify the process of building a mobile application.

    There are two guiding principles of the jQuery Mobile project that differentiates it from most other offerings: It’s completely built on the principle of progressive enhancement and is designed to be functional in all HTML-capable mobile browsers.


    Demos and Documentation


    jQuery Mobile Demo Page

    All the jQuery Mobile demos and documentation can be found in the unified demo application:

    This includes demos and documentation for all the components in jQuery Mobile 1.0a1:

    • Theming and Layout
    • Headers/Footers (Fixed and Persistent)
    • Form Controls
    • Dialogs
    • List Views
    • Events
    • Transitions


    Features

    jQuery Mobile 1.0 Alpha 1 Graded Browser Support

    Progressive Enhancement: jQuery Mobile is built completely around the principle of progressive enhancement: taking a fully functional HTML web page, layering on additional JavaScript functionality, and giving capable browsers a top-of-the-line experience. This means that your jQuery Mobile application will work in more browsers, guaranteed – even in mobile browsers that don’t support JavaScript (a regular occurrence).

    For this first alpha release we’ve managed to cover support for many of the A-Grade browsers that we wish to support (such as iOS devices, Android devices, Blackberry OS 6, webOS, Fennec, and Opera Mobile). There are still bugs on those platforms and a few of the other platforms are failing pretty hard. We’re working to resolve these issues in time for the 1.0 release.

    Graceful Degradation: jQuery Mobile uses the very best HTML 5 and CSS 3 features to provide the best possible experience in the most-capable browsers. However we don’t consider this to be an all-or-nothing proposition: Less capable browsers will still receive the best possible experience that their platform can handle. They may not have all the gradients or fancy transitions of the best platforms but they’ll still be highly usable. The most basic browsers will easily degrade back to simplified HTML and CSS.

    jQuery Mobile Page Sample (Chrome) jQuery Mobile Page Sample (Opera Mobile)

    Accessibility: All jQuery Mobile components are ARIA accessible. They are keyboard navigable (on a desktop computer) and can be navigated using a screen reader. While at this very moment jQuery Mobile is highly targeted at mobile devices we hope to quickly grow the scope of the project to encompass many platforms: mobile, tablets, desktops, and beyond.

    Simplicity: jQuery Mobile is completely markup-driven requiring no JavaScript configuration. This makes it incredibly easy to get started: Just open an HTML file, edit its contents, and you’ll have a fully-capable jQuery Mobile application in no time.

    jQuery Mobile HTML Snippet

    File Size: By utilizing the principles of progressive enhancement and leaning heavily on markup-driven configuration the file size of jQuery Mobile remains quite small. The JavaScript for the alpha release is only 12KB and the CSS is a mere 6KB. Very few images are used in the design of the framework (mostly icons) – instead making heavy use of CSS.

    Theming: jQuery Mobile has a comprehensive theming structure built from the ground up to enable you to build capable web applications. This goes far beyond the styling system provided by jQuery UI and gives you the ability to truly adapt the styling of your entire application. For the alpha release all theme configuration must be done manually but for the final 1.0 release we’ll be providing a complete Themeroller tool for theming your application.

    jQuery Mobile Color Samples

    App-Capable: The usefulness of jQuery Mobile goes far beyond making impressive mobile web applications – you can also use it to build apps that can be purchased and deployed through an app store. We strongly recommend using PhoneGap as it gives you the full tools you need to deploy HTML/CSS/JavaScript applications to a mobile device.

    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.0a1/jquery.mobile-1.0a1.min.css" />
    <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>

    More details on how this works can be found in the page and layout documentation.

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

    ZIP File:

    Contributing

    Reminder: This is the first alpha release of the framework. There will surely be bugs in your platform of choice. The best way you can help us is to use it, file bugs, and even provide patches back. Please discuss issues that you encounter in the Developing jQuery Mobile forum.

    We’re looking to do a few more preview releases during the next couple months leading up to the 1.0 release of the platform in January. Thanks for your help!

    Thank You

    We had tremendous amount of help from a variety of people and companies and would like to thank them:

    Filament Group – For providing countless development hours to the project – taking it from a mere idea to a full-fledged framework in an incredibly short amount of time – they are super-human.


    Palm – For providing us with finances, developers, and devices to test on. Palm is all about their webOS platform – which is completely designed around building HTML/CSS/JavaScript-based applications.


    Research In Motion – For providing us with finances and devices to test on. They’re working on their Widget SDK and WebWorks platforms – a simple way of building Blackberry Widgets with HTML/CSS/JavaScript.


    Adobe – For providing us with developers to help fix bugs and do testing. They’re doing some great things with jQuery Mobile and we’re really excited to see how they can push it forward.


    DeviceAtlas – For providing us with advice and financial support. The DeviceAtlas folk have been doing mobile work for a long time now and have an incredible amount of insight into the platforms. They build tools to make it easier to practically deploy mobile web applications.


    Mozilla Corporation – For providing us with devices to test against and for sponsoring the development of John Resig to work on jQuery and jQuery Mobile.


    Nokia – For providing us with devices for testing. Nokia is working on a great platform for deploying web technology-based applications to Nokia devices.


    Coming Soon

    We have a number of components and features that we weren’t able to finish for the alpha release. We will be tackling them soon and they should be ready by the time 1.0 is ready.

    • Date Picker, Time Picker
    • Progress Bar
    • Spinner
    • Themeroller Support – jQuery Mobile is completely themable but we hope to make it even easier with the Themeroller tool.
    • Tablet Optimization – Basic tablet support exists now but we’re looking to make some rather large improvements.

    Development Update – Week of Aug 24, 2011

    Posted on by

    This is the first status update regarding the work that we’ve been putting in to jQuery Mobile. We hope to have similar updates about once a week – along with posts describing new things that we’ve learned along the way.

    Sample Mobile Components

    Sample jQuery Mobile Components

    Some sample components implemented by the folks at Filament Group. Currently the components are done purely in HTML/CSS (no images), are ARIA accessible, and are completely implemented using progressive enhancement.


    Sample Selection Dialog

    Sample jQuery Mobile Selection DialogThis is a sample modal dialog from which options from a large select menu could be displayed.


    Activating webOS Devices

    Activating webOS DevicesThe webOS team recently sent us a few more phones to test against so we’re actively adding them in to our test bed and hooking them into TestSwarm.


    Fixing Blackberry 4.7

    A few commits have landed the past couple days (and quite a few more will be landing over the next couple) taking care of compatibility issues in Blackberry 4.6 and 4.7.

    Announcing the jQuery Mobile Project

    Posted on by

    The jQuery project is really excited to announce the work that we’ve been doing to bring jQuery to mobile devices. Not only is the core jQuery library being improved to work across all of the major mobile platforms, but we’re also working to release a complete, unified, mobile UI framework.

    Absolutely critical to us is that jQuery and the mobile UI framework that we’re developing work across all major international mobile platforms (not just a few of the most popular platforms in North America). We’ve published a complete strategy overview detailing the work that we’re doing and a chart showing all the browsers that we’re going to support.

    Right now we’re working hard, planning out the features that we want to land and doing testing against the devices that we want to support — and hoping for a release later this year. If you wish to help, please join the discussion in the jQuery Mobile Community.

    jQuery's Mobile Testing Lab
    The start of jQuery’s Mobile testing lab.

    The jQuery project has received sponsorship from a number of mobile browser vendors as well.

    Palm, working on the webOS platform, is excited to sponsor jQuery’s mobile work:

    “The jQuery community has focused on making the Web as productive and fun as possible. When we heard the mission behind jQuery Mobile, we wanted to help. With webOS we have shown that the Web platform is fantastic for developers, so we are excited to help make jQuery Mobile as good as it can be.” -Dion Almaer

    Mozilla, working on Mobile Firefox, is also eager to sponsor jQuery’s mobile work:

    “As a longtime supporter of the jQuery project and its wider community we are excited to extend our support to the jQuery Mobile project. jQuery Mobile has the potential to make cross-platform Open Web development significantly simpler.” -Pascal Finette

    Filament Group Inc., a Boston-based design and development studio, is both a corporate sponsor and leading the design and front-end coding effort for the jQuery Mobile project:

    “Filament is thrilled to sponsor and lead the design for the jQuery Mobile Framework; it’s a great opportunity to extend our work on ThemeRoller and jQuery UI. We’re especially pleased that progressive enhancement will be built right into jQuery Mobile – we think this positions it really well for broad accessibility and future compatibility.”

    We’re thrilled to be working on this project. The mobile web is desperately in need of a framework that is capable of working across all browsers, allowing developers to build truly mobile web sites. We’re doing all we can to ensure that jQuery Mobile fills that need.