jQuery Mobile 1.3.0 Released

The jQuery Mobile team is excited to announce version 1.3.0. This release is focused on elevating responsive web design (RWD) and brings lots of cool new widgets including panels, dual handle range sliders, and two different responsive table modes. Try it now!

We’ve also been doing a lot of work on re-factoring our AJAX nav system to make is easier to use and more consistent across browsers. We’re also retiring the old demos & docs and launching an API documentation site and all new demo site.

We’d like to thank the community, sponsors and most of all our amazing list of more than 200 contributors who have supported and guided the project. We encourage you to participate wherever you can, you input and help are always appreciated.

KEY CHANGES

1.3: A responsive focus

Since the inception of the jQuery Mobile project, we have embraced the idea of designing for all devices and platforms in a “One web” approach. To that end, we built everything on a progressive enhancement foundation and every widget is designed to be 100% width to fit within a flexible or responsive grid.

jQuery Mobile-first

jQuery Mobile is also designed and fully tested to work not just on mobile phones, but tablets and even desktop browsers. Think of it as mobile-first, not mobile only. In fact, in our next release we’re going to be starting the process of integrating closer with the jQuery UI with the goal of having even more shared code and conventions. The UI tabs widget will be the first to be ported into our library and theming system.

We’ve seen the question “What should I use: RWD or jQuery Mobile?” many times on Twitter and our response is an unqualified “both”. Think of jQuery Mobile as a set of touch-friendly UI elements that are designed to fit within your responsive design. Even at 1.0, our demos & docs used media queries for a responsive experience, but we decided that we could do a better job helping people use responsive design techniques in their own projects.

Our focus for the 1.3 release has been to educate the community on responsive web design (RWD) by adding responsive documentation and demos that explain key concepts and also by adding new widgets like responsive tables, panels and grids that make it easy to build responsive sites and apps.

Bundling breakpoints

Media queries are a difficult thing for any framework to include in the codebase because responsive is all about designing for your specific content. For that reason alone, it’s impossible to pick a single “ideal” breakpoint that will work for everyone.

For example, in our responsive table widget we need to select a screen width to switch between the tabular and stacked presentation for reflow mode. That breakpoint width will completely depend on both the visual design (typography, other layout elements) and the content (number of columns, content length). To address this, in the docs for each responsive widget, we spend a lot of time explaining how to write a custom breakpoint that will be tailored to your unique needs.

Breakpoint classes to the rescue

The flipside is that people use a framework because they want things to be easy and it’s hard to explain that a responsive widget won’t work at all until you write a bunch of CSS. So the compromise we took for responsive widgets is to include a single breakpoint “preset” in the structural CSS that we hope will be useful in a fair amount of typical situations. This breakpoint is applied by adding a class like ui-responsive to the widget markup to opt into the breakpoint. This opt-in is important because overriding a breakpoint baked into the CSS is very cumbersome if you want to use a custom breakpoint — you’d need to negate all the CSS rules from our breakpoint before adding your own.

We think this strikes a good balance between convenience and educating folks on how to use media queries. When we finalize 1.3 in a few weeks, we’ll accompany this with an all-new demos site that will have RWD tutorials and lots of cool demos showing off how to write custom styles and breakpoints to deeply customize jQuery Mobile.

New Widget: Panels

One of the most common mobile UI patterns we see right now are Facebook-style panels that open to reveal a menu, form or other content. We spent a lot of time prototyping different ideas and are really happy with our new panel widget. It offers a ton of flexibility. Panels can be positioned on the left or right of the screen and be placed flexibly in the HTML source order.

There are three different ways a panel can animate open. The default reveal display slides the page away to show the panel beneath, the push display animates both the panel and page, and the overlay display places the panel on top of the page. Panels can be closed by swiping, tapping onto the page, or hitting the Esc key on the keyboard.

To take this widget responsive, it’s easy to add media queries to make the panel stay open at wider widths instead of auto-closing when you click on the page content. This makes this panel more like a collapsible column, like the folder list in a mail program. We’ve included a breakpoint preset to add this behavior by adding a class to the page container. Here’s an example of a typical panel setup with a left nav panel and right panel with a form.

For such a simple looking widget, panel were really challenging to get right across all our platforms. We ended up going through four different re-factors leading up to beta in order to get the animations as smooth as possible and are really happy with the result. In the new docs, there are examples of how to apply custom panel styles and open panels on swipe.

New: Responsive tables

There are a lot of possible ways to handle tabular data in responsive designs. We’ve decided to tackle two different responsive table modes in 1.3, each with its own strengths and uses.

The reflow table mode swaps to a stacked label/data style presentation at narrow screen widths and best for situations where the content length is fairly long and comparing data across rows in a table is less critical. For example, a product or movie list might be a good choice for reflow mode.

The column toggle table mode hides columns at narrower page widths according to a priority you set on each column as a sensible default to ensure that the table fits on-screen. A dynamically generated column chooser popup allows the user to select which columns they want to see for full control. This mode is best for situations where comparing data across rows and columns is critical. For example, a complex table of financial data might be a good choice for column toggle mode.

New: Range slider

Adding support for dual handle sliders for collecting range values has been a popular request and we’re happy to add this new widget in 1.3. The new dual handle range slider starts with a pair of HTML5 range inputs and essentially two sliders with a shared track. All the normal slider options work with ranges: mini sizing, theming, etc.

We’ve also refined the size and styling of the inputs that accompany sliders to make them integrate better visually and leave more room for the slider. The inputs are now mini sized with bold text and no border or spinner arrows (seen in desktop browsers).

All sliders now respect step values smaller than whole numbers which is great for scientific and financial applications that need inputs that capture values to the 0.1 or 0.01 level of accuracy. Slider behavior has been refined so dragging will snap to the closest step position to provide better feedback.

New: Responsive grids

The cornerstone of any responsive design are responsive grids. We believe that the best grid systems are content-specific and not something that can be easily generalized into a framework but for people using our simple grid blocks, there are now detailed instructions on how to create your own media queries to adjust grids at various breakpoints.

We’re also shipping with a breakpoint preset that can be applied by adding a class to your grid wrapper. This will apply a CSS breakpoint at narrower screen widths that stack all the grid blocks instead of floating them. This is a simple way to make your grids a bit responsive and fit better on phones.

Navigate event and method

There are two new additions to the navigation functionality in jQuery Mobile. A navigate event that normalizes the URL alteration events hashchange/popstate, and a $.mobile.navigate method that allows users to receive extended traversal information in navigate bindings (eg, directionality).

The navigate event is a lightweight attempt to unify bindings to a browser’s URL alteration events hashchange and popstate. It also handles differences in the way setting the hash on the location object interacts with the two browser events (ie, stop the world popstate triggering), and provides event hooks to control the event lifecycle.

The $.mobile.navigate method forms the bulk of the new functionality. By using the $.mobile.navigate method to do URL manipulation instead of doing it directly with the location object, replaceState, or pushState you get history management and support for both modes of URL state tracking. The history management provides a state object to navigate event bindings whether the browser supports the new history API or not. It also contains the logic to determine whether navigation is moving forward or back in the browser history.

Both the event and the method are available as modules apart from other navigation functionality in jQuery Mobile, with minor dependencies on other parts of the library. More info can be found in the navigation page and teh issue for this refractor.

Page transitions: Support for IE10/WP8

Our CSS keyframe animations were written with vendor prefixes to date, but we’ve now added non-prefixed keyframe rules to bring transition support for IE10/WP8 and all future browsers. This also required updating the 3D support feature tests.

Listview: two new ways to make into an auto-complete

Everyone loves the listview filter feature and we heard quite a few requests to make this work as an autocomplete. Rather than create a new widget, we found two clever ways to make the current listview more powerful.

First, we’ve added the filter reveal feature makes is easy to build a simple autocomplete with local data. When a filterable list has the data-filter-reveal="true", it will auto-hide all the list items when the search field is blank and will display matching items as the user types into the search field. The data-filter-placeholder attribute can be added to specify the placeholder text for the filter. Any listview filter with a lot of items may be slow to perform on a mobile device so we recommend using this feature for a relatively small number of items.

To use the listview filter as an autocomplete that taps into remote data sources, you can use the listviewbeforefilter event to dynamically populate a listview as a user types a search query. This is useful when you have a very large data set like cities, zip codes, or products that can’t be loaded up-front locally. Use the view source button to see the JavaScript that powers this demo.

We’ve added corner and shadow options for inset listviews for consistency with other widgets and made it possible to set theme on list dividers via the data-divider-theme attribute. On mobile devices, when using a listview filter, the submit button on the on-screen keyboard will now blur the input to dismiss the keyboard to improve usability.

Dialog: close button option for control

If the dialog has a header the framework will automatically add a close button at the left side of the header. You can now change the position by adding data-close-btn="right" to the dialog container.

If you don’t want a close button in the header or prefer to add your own custom close button, you can use data-close-btn="none".

Dialogs now have a corners option like other widgets to control whether rounded corners are applied.

Popup: dismissible option

We’ve heard requests to prevent the click-out-to-close behavior of popups to make them modal. To address this, we’ve added a new dismissible option so you can add the data-dismissible attribute to a popup container. When set to false, the popup won’t close when you tap outside it onto the page.

Inputs: clear button option, support for file inputs

We’ve added a new feature to let you add the clear button we originally created for search inputs to any input type (text, date, number, etc.) by adding the data-clear-btn="true" attribute. The text for this clear button can be customized via the data-clear-btn-text="clear input" attribute. Search buttons have the clear button by default but can be controlled by this option. Note that this is available for all the input types except for textareas.

Now that file input types are becoming more supported by mobile platforms, we’ve added automatic styling for these as part of jQuery Mobile. Browser support for styling these is surprisingly good and even the clear button option seems to work with these on better browsers.

In addition, we’ve made lots of small improvements to inputs: fixed the height and alignment of text inputs on IE9/WP, textarea auto-grow now also works when you paste text, and text inputs now work much better with multibyte strings.

Selects: themable optgroups, header position support

If you’re using selects with custom menus, we’re fixed some focus issues and made optgroup themeable in custom menus via the new data-divider-theme option. We’ve also made selects work nicely inside headers when positioned with the ui-btn-left or ui-btn-right classes.

Button: programatic theme updates

It is now possible to change button‘s data-theme programatically via _setOption.

Collapsibles: corner option

We’ve added a new corners option for inset collapsibles and accordions (collapsible sets) to make this consistent with other widgets.

Since the majority of these fixes are for older, but popular versions of Android 2.x and iOS, we’ve packaged these fixes and workarounds into an extension to fixed toolbars called fixedToolbar.workarounds.js that can be omitted in the download builder if you’re targeting only newer mobile browsers to save bandwidth and complexity.

Controlgroup is now a widget

We’ve upgraded controlgroup from a function into a proper widget so it has a full set of options (mini, shadow, corners, etc.) and a create event to help with enhancement.

Less JS, More CSS

In 1.4, we’re planning on dramatically simplifying the amount of JavaScript we use to modify markup or apply classes, and instead use forward-looking CSS techniques which will be more performant. In 1.3.0, we switched away from our fairly complex JS-based logic to apply corner classes and instead use CSS inheritance for corner styling. As part of this process, we have removed the corner classes (ex. corner-top, corner-bl) from theme.css since this can be done with CSS now and it saves us valuable bandwidth and complexity.

Removing these classes and JS logic yielded substantial savings: roughly 1k (gzipped) from the library. We look forward to much bigger changes like this in 1.4.0.

Icons: New icons, ability to switch color and remove the disc

We’ve had a lot of requests to add specific icons to our icon sprite and with the current sprite-based approach, we’ve been trying to keep the set pretty simple and make it easy to use 3rd party sets. However, we realized that we need the now standard “3 bar” icon to accompany the new panels to support people using these for menus. While we were at it, we added a edit icon (pencil) because this was a very popular request.

The theme system always had a white and black icon set but it required a bit of CSS to switch between colors. Now use class ui-icon-alt to switch from the white to black icons in the default theme (configurable via ThemeRoller). If you don’t need the dark circle behind the icons, simply add the ui-icon-nodisc to the element or its container to remove the icon background. In keeping with our theme of using less JS, you’ll notice both of these features are classes, not data-attributes to reduce the script overhead.

In 1.4, we’re looking at re-vamping our theming and icon system and hope to be switching to SVGs with a PNG fallback which will make it easier to offer a larger icon set and maintain the best quality since we will be working with vectors.

Swipe event extensibility

The swipe event can now be extend to add your own logic or functionality. The following methods can be extended:

$.event.special.swipe.start – This method recieves a touchstart event and returns an object of data about the starting location.

$.event.special.swipe.stop – This method recieves a touchend event and returns an object of data about the ending location.

$.event.special.swipe.handleSwipe – This method recieves the start and stop objects and handles the logic for and triggering for the swipe events.

New demos site: Launching today for 1.3.0

The demos and docs grew organically out of our original development work for 1.0 and it was easy to find the information you needed. With 1.3, we’ve been hard at work building whole new API site (see below) and companion demo center.

The widget reference is designed to make it easy to quickly browse every widget and variation and grab the code via the an integrated ‘view source’ tool. There is an demo showcase that shows you how to customize and extend the framework and a Q&A section that covers common issues and solutions.

Navigation is now much improved with a navigation panel with quick access to all widgets, a global search, and a panel to jump to a section within a page. If you are interested in helping us improve the demos by contributing fixes, demos or Q&A pages, please let us know or submit a pull request.

New API site: Launching today for 1.3.0

Our current demo and docs format has mixed reviews: some folks like our simpler, tutorial style docs while others have said that it’s hard to just get all the info they need quickly.

To address this, we’ve been working hard on porting all our docs over to the same API style API format as jQuery core and UI. This will provide a complete reference for every option, method and event in one centralized, searchable place. Since the docs are all XML-based, you’ll be able to remix them in any way you want for complete flexibility.

We’d like to take a moment to thank team member Anne-Gaelle Colom who has spent an incredible amount of time over the last year building these docs from scratch and we really appreciate her dedication.

The new API docs are in beta now and when we hit 1.3 final, we’re going to switch over to those as our authoritative place for API info. Our plan is to retire the current docs and have an all-new demos site to accompany the new API docs.

Support for jQuery 1.9.1 (and 2.0.0)

jQuery Mobile 1.3.0 supports versions of jQuery core 1.7.2 – 1.9.1 and we’re actively testing the upcoming 2.0 version too. We will be keeping in sync with their releases to let you take full advantage of the new goodness.

Nested listviews: Now deprecated, will be removed in 1.4.0

We are depreciating the nested list feature now and will be dropping support for this in 1.4.0. Nested lists auto-generate pages based on nested UL structures but these have a number of important drawbacks. First, these generated pages complicate the AJAX navigation system and introduce a wide range of edge cases (and bugs) that make it impossible to maintain with our navigation model. Second, these dynamic pages are of limited value because they can’t be controlled without introducing a templating engine so they are not flexible enough to be useful without adding a lot of functionality.

The same effect can be achieved by creating a multi-page document which give you full control of the page layout and styles. The nested listview plugin will be removed in 1.4.0 and moved to an external repo for those that still want to access the code.

Supported Platforms: Always Expanding

Our test lab has grown to over 70 phone, e-readers and tablets over the past few years. Luckily, our dedication to web standards and feature detection has meant that most new devices “just work” when they arrive. As of 1.3.0, we’ve added a few notable A grade platforms into testing rotation: BlackBerry 10, IE10 and Microsoft Surface RT, WP7.8, Kindle Fire HD (7″ and 10″), and more.

Upgrade notes

We have removed the corner classes (ex. ui-corner-top, ui-corner-bl) from theme.css since this can be done with CSS now and it saves us valuable bandwidth and complexity.

All links containing a hash were truncated at the hash and then appended to the current base tag value. This was a blanket solution for dialogs and nested listviews. As of 1.3.9, we will now only apply this to dialogs and nested listviews by looking for &ui-page and &ui-state. All other urls will be allowed to pass through normally.

AJAX nav – iOS 4 will now receive hash-based navigation only because of it’s buggy history implementation.

Multipage documents result in a sluggish back button performance on IE7 due to browser issues. The back button still works, but you have to click it several times to go back a single step in the history. The further you try to go back in history the more work you have to do for a single backwards step. Single-page AJAX-linked documents are a better approach if IE7 support is essential.

Title attribute of a split button pulls in extra spaces(Issue #5182) Title attribute of a split button pulls in extra spaces. Cause: entire text node is copied for the title attribute, including any leading or trailing spaces. Solution: Apply $.trim() to the text node value before assigning to the title attribute. Files Impacted: listview.js

Popup(“destroy”) never ends(Issue #5244) – Avoid infinite recursion by detach()ing the payload from the container before attempting to put it back to its original place in the DOM (which may not exist, if the popup was created based on a detached element)

Text input placeholder text not grayed out in Firefox(Issue #5166) – Modify placeholder text color in Firefox to use standard in FF 15+, add important to resolve issue in build process where other CSS overrides :-moz-placeholder setting later on., use input prefix for -moz-placeholder fix instead of important override.

Platform support in 1.3.0

jQuery Mobile has broad support for the vast majority of all modern desktop, smartphone, tablet, and e-reader platforms. In addition, feature phones and older browsers are supported because of our progressive enhancement approach. We’re very proud of our commitment to universal accessibility through our broad support for all popular platforms.

We use a 3-level graded platform support system: A (full), B (full minus Ajax), C (basic HTML). The visual fidelity of the experience and smoothness of page transitions are highly dependent on the CSS rendering capabilities of the device and platform so not all A grade experience will be pixel-perfect but that’s the nature of the web.

* Note: If jQuery core 1.8+ is used with jQuery Mobile, iOS 3.x and BB5 are re-graded to C level support because core dropped support for methods these platforms need for full functionality.

Thanks for the great release. The file size is wrong:
“Minified and Gzipped: jquery.mobile-1.3.0.min.js (24KB, ready to deploy)”
It’s closer to 40kb. I have to get my hands on an old c-grade device and check out load times. JQuery and JQuery mobile together are about 200kb uncompressed!

First of all… I love this framework…
But I have to comment regarding the supposed ‘autocomplete’ feature of the list view…
Seriously .. do you guys have any idea what an typeahead/autocomplete does? The user starts typing.. the list filters (so far so good) Then the user chooses an option, and the contents of which populates the input field.. and then the list goes away! It does not sit there like a dead link.. or navigate the user to another page.. Seriously I can’t even get the contents of the input field, close the filter list or anything.. please KISS!

What if anything are you doing about improving performance for PhoneGap targeted apps? Googling JQuey Mobile PhoneGap Performance yields a number of concerning posts citing poor performance in PhoneGap / Cordova. A related post addressing these concerns would be very helpful as I would prefer to use this over Sencha Touch.