The jQuery Mobile team is thrilled to announce the 1.4.0 Alpha release. For this release we focused on performance improvements and reviewing widgets. We also introduced a new default theme and SVG icons. Some of the new features that come with this release are a flip switch widget, a generic filter widget named “filterable”, popups with arrows, tooltips for sliders and we integrated the tabs widget from jQuery UI.

Performance

To improve performance we reduced DOM manipulation. Generation of inner markup for elements styled as butons has been completely removed. In many cases the framework just adds classes to the native element during enhancement and we even reduced the amount of classes that are added by the framework.

Theme inheritance

One of the biggest changes is the way theme inheritance works. In previous versions we used JavaScript to find the nearest parent element with a theme and added theme classes to all elements. This has been replaced by a pure CSS solution where the level of specificity of the selector determines what theme (swatch) is applied. In almost all cases the default for option theme has been removed and widgets get the same theme as their container or page via CSS.

New default theme

This was also a good time to switch to a new default theme with a flat, more modern, design. The number of swatches has been reduced from five to two; a light “A” swatch and a dark “B” swatch. We will update the ThemeRoller soon so you can create your own themes for 1.4.

SVG icons

Not only the theme is new. A big thank you to Glyphish for creating a complete new icon set for jQuery Mobile! These are vector-based SVG icons, but we included a fallback to external PNG icons on browsers that don’t support inline SVG. We are also going to provide additional stylesheets, each with different icon CSS (inline SVG, data-uri PNG, and external PNG) that can be used with the full Grunticon solution.

Please help us test

In the next few weeks we will work on updating the API documentation and the Demo Center, and creating an upgrade guide. While we work on it, this guide will be available as wiki page on the Github repo. Please help us by testing the Alpha version, giving us your feedback, and reporting issues.

Thanks

We want to say thanks to everyone who contributed. Thank you Sven Franck for all your hard work on the new filterable widget and the table widget!

New widget Toolbar: replaces page.sections (which is removed) and handles all header and footer bars

Fixed Toolbars are now an extension on the toolbar widget

Toolbars work outside of pages

True persistant Toolbars

Textinput: added option corners

Slider and Rangeslider: added option corners.

New set of vector-based icons from Glyphish with fallbacks via Grunticon

Base tag support https://github.com/jquery/jquery-mobile/issues/3978

New flip switch widget

New filterable widget

Integrated UI tabs widget

Popup work outside of pages

Panel work outside of pages

Option wrapperClass to add custom classes to a generated wrapper

All widgets (excluding listview, tables, and selectmenu) have options that can be set after the widget has been instantiated

All widgets (excluding listview, tables, and selectmenu) have an option named “enhanced” that allows you to provide the markup the widget itself would generate, thus saving startup time

Table now also has a rebuild method that makes it possible to dynamically add columns

Changes

Theming: The theme swatch for pages does no longer default to “c” but “a”. Dialog overlays still default to “a”. The loader theme defaults to “a” instead of “e”. Headers and footers don’t have default “a” anymore but inherit the page theme. List dividers don’t default to “b” but inherit the list theme. Count bubbles in listviews don’t default to “c” anymore, but inherit from the LI/button/divider. Count bubbles in multiple selects always had theme “c” but now always inherit the theme from the button.

Button style: We now use the same padding and icon positioning rules for all elements that are styled as button and changed px values to em values.

Option mini: We don’t set specific padding values for ui-mini anymore, but only set a smaller font-size. Because we use em values now, the padding will still be adjusted. Instead of data-mini=”true” you can add class ui-mini to a container. Now it’s also very easy to use a media query to only apply the mini size at a certain screen width.

Icons: We use :after pseudo element for icons instead of adding a span with class ui-icon. The icon class (ui-icon-[iconname]) is added to the button.

data-add-back-btn now set on toolbar not page

Listview filter has been replaced by new generic filter widget (“filterable”)

Panel: Always scroll to top when opening a panel, unless it’s a fixed panel

Removal

No generating of inner button markup (.ui-btn-inner and .ui-btn-text) anymore. For linked listviews this means the anchor is now the button and no longer get class .ui-link-inherit.

Button: Button elements are no longer wrapped in a div. Inputs type submit and reset used to get class ui-submit on the wrapper div. This has been changed to class ui-input-btn and also applies to input type button. The native input element no longer gets class ui-btn-hidden.

Form labels: Labels no longer get a class (they used to get the widget class).

Listviews thumbs and icons (small image left): The feature to auto-detect thumbs and icons has been deprecated to improve performance. If a list item (read-only) or button (linked) contains a thumb you have to add class ui-li-has-thumb to the LI. If it contains an icon you have to add ui-li-has-icon to the LI and don’t have to add class ui-li-icon to the image element anymore. Also, the framework doesn’t add class ui-li-thumb anymore in 1.4.

Icon shadow: Deprecated option iconshadow for buttons and select. You can use class ui-shadow-icon on a container or a button (same as ui-icon-alt and ui-icon-nodisc). Also work with listviews, controlgroups, checkbox/radio, etc. that didn’t have option iconshadow.

The second pagebeforechange has been replaced with pagebeforetransition. Both will be triggered for compatibility

Today we’re announcing a change to our project leadership. Since the start of the jQuery Mobile project in 2010, Todd Parker has been the project and design lead. After three years at the helm, he has decided to step aside as lead but will continue to participate as a team member with a focus on design and outreach.

We’re thrilled to announce that Jasper de Groot, a longtime team member, will be stepping in as the new jQuery Mobile project lead. Jasper is deeply knowledgeable and an all around great guy and we look forward to him leading the charge.

The most important part of any open source project is having a great team and we have that in spades with jQuery Mobile. We want to take a moment to recognize all the fantastic people on the mobile team, past and present, who have worked tirelessly over the last few years: Ghislain Seguin, John Bender, Gabriel Schulhof, Anne-Gaelle Colom, Alexander Schmitz, Scott Jehl, Mat Marquis, Kin Blas, Jason Scott, Tyler Benziger, Ralph Whitbeck, and over a hundred contributors from the community.

With this change in leadership, we’re also moving the Mobile and UI projects closer with more shared code, team members, meetings and a common destiny. We’ve been collaborating closely with Scott González, Jörn Zaefferer, and the rest of the UI team and look forward to a more unified approach going forward.

The team has been hard at work on the upcoming 1.4 release, which is nearing the alpha stage. It is focused on performance, API and code cleanup, and a new theme. Look for that release very soon.

Popup(“destroy”) never ends(Issue #5244) – [popup] 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)

License

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.

The jQuery Mobile team is excited to announce the first release candidate for 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. 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. Try it now: 1.3.0 RC1 demos

Check out the 1.3.0 Beta blog post for details of everything new in this release. For those following along, here are the fixes and improvements we’re added since Beta based on your testing and feedback.

Please help us test!

We’re looking for help with testing this release so we can release a final build as soon as possible. Browse the docs or try out the 1.3.0 RC1 release in your projects, then report issues in the GitHub tracker. Be sure to specify the device, OS version, browser, steps to reproduce and include a simplified test case that uses the latest build (see our contributing guidelines for a test template). If all goes well, we hope to release the final build in 2 weeks.

Try it now: ThemeRoller and Download Builder have 1.3.0 RC1

We will now support pre-release versions to both the ThemeRoller and Download Builder tools to help you test. Please be patient, these may take a while to update for each release.

The jQuery Mobile team is thrilled to announce the beta release of 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. 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. Try it now: 1.3.0 Beta demos

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.

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 present breakpoint 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 on the 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 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.

Icon additions: menu and edit

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.

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. More on that after 1.3 is finalized.

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 API site: Launching with 1.3!

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 and 2.0

jQuery Mobile 1.3.0 is being actively tested to support versions of 1.9 and 2.0 of jQuery core and will be keeping in sync with their releases to let you take full advantage of the new hotness. The 1.3.0 Beta includes 1.8.3 because 1.9.0 just shipped today (congrats). When we hit the final release, 1.9.0 will be our default. We will offer support back to 1.7.0 of core for folks on older versions.

Please help us test!

We’re looking for help with testing this release so we can release a final build as soon as possible. Browse the docs or try out the 1.3.0 Beta release in your projects, then report issues in the GitHub tracker. Be sure to specify the device, OS version, browser, steps to reproduce and include a simplified test case that uses the latest build (see our contributing guidelines for a test template). If all goes well, we hope to release the final build in 3-4 weeks.

The jQuery Mobile team is excited to announce the final release of 1.2.0. This release brings a new popup widget, an autodivider and collapsible option for listviews, and over 100 enhancements and fixes throughout the library to make things smoother, faster, and more polished. Try it now!

We’d like to thank the community, sponsors and most of all our amazing list of almost 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

New Widget: Popups

The biggest feature of 1.2 is the new popup widget. The idea with popups is to create a flexible element that makes it easy to place any content or widget in an overlay that floats above the current page. This makes it easy to build a simple tooltip, menu, popup form, map overlay, or lightbox with this same widget.

Popups follow the markup pattern of dialogs and consist of a container with a data-role of popup and a link with a data-rel of popup that points to the ID of that container. When the link is clicked, the popup is shown. Clicking outside the popup, hitting the back button, or pressing the Escape key all close the popup.

We’ve worked hard to make the popups as flexible as possible to let you get creative. By default, popups are styled as a simple box with the same theme as the current page, rounded corners, and a drop shadow. Popups don’t have padding which makes it really easy to drop in a widget like a listview to create a menu.

Out of the box, there are options to control whether how it’s positioned (centered over the thing you tapped, the window, or any selector), add a semi-transparent overlay layer behind the popup, use an animated transition when the popup opens, adjust theming, and more. We’ve also added a few advanced demos showing how to build a lightbox by working with image scaling, use embedded iframes in popups for maps and videos, and even make a very custom looking side panelby tweaking styles and working with the API.

Popup history tracking: Optional

We heard feedback at alpha that some developers didn’t want to track popups in the history stack. Using the browser Back button to dismiss popups and menus is an important UI convention on many mobile platforms but there may be use cases like an iOS app where this is less of a concern.

Since we had to exclude WP7 from the history support to workaround a bug anyway, we decided to surface this mechanism in the popup API as the history option, a boolean that defaults to true but can be set via the data-history="false" attribute or when calling popup:

$( ".selector" ).popup({ history: false });

Popups must live within the page wrapper (for now)

After alpha went out, we also heard pretty clear feedback that folks want to re-use popups across pages by placing them outside the page container. At the moment this won’t work because many widgets (listviews, toolbars) are built with the assumption that they live inside a page container for theme inheritance and enhancement to work. Until these widgets are re-factored to work outside of pages at a future release, popups should only be added within a page.

Collapsible Lists

We’ve had lots of requests to make collapsible listviews that would reveal a nested listview when a row is tapped. Rather than create a new extension for listviews, we realized we could adapt of existing collapsible widget to do the trick (thanks to sjdecaires for the suggestion).

Now collapsibles have a data-inset option which still defaults to true to keep the current collapsible appearance. When this is set to false, the collapsible goes to the edges of the screen, just like a non-inset listview does. By then placing a listview inside these full width collapsible, we achieve the effect of a collapsible list.

To make what looks like a collapsible list that allows multiple sections to be open at once, stack up a series of individual collapsibles with a listviews inside. To force only one section to be expanded at once, use the collapsible set (accordion) to get this behavior.

We’re really excited to bring this new capability to the library by just adding a single option to the existing plugin set and hope to find similar opportunities to add powerful features with minimal code.

Custom collapsible icons

We forgot to mention in the alpha post that we added the ability to configure the icons for the expanded and collapsed states of a collapsibles and collapsible sets. Collapsible headings’ default icons can be overridden by using the data-collapsed-icon and data-expanded-icon attributes and choosing any of the standard icons for each.

Listview Autodividers

Speaking of listivews, we have a cool new feature in 1.2: autodividers. Simply add the data-autodividers attribute to any listview and the framework will automatically add alphabetical list dividers based on the contents of your list.

<ul data-role="listview" data-autodividers="true">

This is especially helpful when generating lists dynamically. Best of all, this feature is designed to work seamlessly with our listview filter extension so dividers will be added and removed to stay in sync with the current set of filtered items.

Read-only Lists: Flat Visual Style

We’ve tweaked the design of read-only listviews in 1.2 to make them look less clickable by removing the gradient from the list items and only using the flat background color. It’s a subtle change, but it does help to provide a clearer visual separation between clickable and read-only lists.

Prior to 1.2, read only lists were also given a bit less padding because we figured that these didn’t need to be as touch-friendly as normal, clickable listviews. However, we found that some folks were using listviews with a mixture of linked and non-linked list items and that shift in padding didn’t look right.

If you still need to smaller style, you can add the data-mini="true" option to the controlgroup or individual buttons to reduce the size of the button groups to be closer to the way they were in 1.1, but they are still large enough to still be usable.

Buttons in Toolbars: Now Mini by Default

Prior to 1.2, link-based buttons were mini by default, but not buttons based on input and button elements. Now, we automatically make these mini sized for visual consistency. If you ever need to revert to larger buttons, that option is available via the data-mini attribute.

All Form Elements: Width Adjustments in Fieldcontainers

We recommend that most folks use the fieldcontainer markup pattern when building forms to take advantage of the responsive label styling. This stacks the label above the input at narrow widths and floats it to the left of the input at wider widths to take full use of tablet and desktop devices.

In 1.2, we’ve made some refinements to the design for this pattern to make sure we’re using as much of the horizontal space as possible for the form element. Labels have always been 20% + 2% margin and now the form element widths have been increased from 60% to 78% so they go as full width as possible.

We’ve carefully tested every form element in a wide variety of situations to ensure that the spacing and sizing of each is as consistent as we can for a polished experience.

Touch and vmouse events: Now available for standalone use

We’ve decoupled all of our plugins and have a clear dependency map which allows us to offer the download builder tool (Alpha) to let you build the leanest package possible. However, we heard that some developers just wanted to grab the virtual mouse events that normalize between touch and mouse inputs (vmouse) or the touch events like swipe or touchstart but don’t want to use the rest of the jQuery Mobile library.

In this latest release, we’ve refactored a bit to eliminate the dependency on mobile core for utilities like these. Now if you want to take advantage of just our vmouse events, simply check that box in the download builder and grab the file. Other utilities like orientationchange and throttledresize are also available without the core dependency in the builder.

This additional decoupling is only available if you choose 1.2.0 or latest in the version dropdown of the download builder tool.

Note that the file generated by the download builder is always jquery.mobile.custom.zip which contains the .js, .min.js, .css, .min.css.

Support for jQuery core 1.8 added: Impact on BB5 and iOS3

jQuery Mobile 1.2 now supports up to version jQuery core 1.8.2. However, there was an important change in jQuery core 1.8.x that removed a lot of old code for offset() in favor of the more modern getBoundingClientRect() and window.webkitConvertPointFromNodeToPage() methods. The one downside of this change is that Blackberry 5 and iOS 3 don’t support either of these methods, which broke widgets like the loader, popup and slider.

As of now, we’ve added in a small bit of code to detect if jQuery core 1.8+ is in use and if getBoundingClientRect() isn’t supported, we don’t enhance the page and keep it as simple HTML. That means that if you use 1.8.x with jQuery Mobile, BB5 and iOS3 will receive the C Grade experience (basic HTML). If you use version 1.7.x, these will be enhanced as before.

jQuery core 1.6.x: Support dropped

As a project, we generally support the two latest major versions of jQuery core. Now that 1.8 has been out for a while, we’re dropping support for 1.6.x in this release. If you use version 1.6.x, things should work fine now, but going forward, we will won’t actively test 1.6.x or fix issues that only occur with this version.

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.2, we’ve added a few notable A grade platforms into testing rotation: iOS 6, Android 4.1 (Jellybean), Tizen, Firefox for Android, and Kindle Fire HD.

Custom collapsible icons — Adds the ability to change the icon used for collapsible headers through data-* attributes and prototype options. Content of pages with fixed persistent toolbars higher than standard, now gets the right alignment. Thanks jakeboone02!

Grid

Listview

Add extra listview autodivider check(Issue: #4901) — If a listview was nested inside a normal list then the listviewcreate event for autodividers would also fire for the parent list causing an error as this list did not contain listview data. An extra check was added to ensure the parent list is actually a listview. Thanks marcins!

Navigation

Abstract backward movement in history(Issue: #4950) — “window.history.back” doesn’t work in phonegap applications after a page refresh, though it does work under hashchange/replacestate. The solution is to use their “navigator.app.backHistory” method along with a configuration option. The reasoning for the option is to prevent any corner cases popping up with existing phonegap applications. Forward history movement for the same usecase is _not_ addressed but remains an even lower priority.

Handle URLs with parentheses properly(Issue: #4849) — The regular expression used to parse the jqmData psuedo selector restricts the
use of parentheses which are valid in urls. This breaks data-ns-url selection.
The fix is to avoid the pseudo selector.

Phonegap

Popup

Add afteropen trigger to setTimeout with android fix — The select menu’s (now that they depend on popups) require that the first item is focused after they are open. The focus of the popup itself was deferred until after the trigger of afteropen which the select menu uses to focus its first item. As a result the focus was stolen from the select menu by the popup to the popup container.

Bind vclick handler to the document on Android — To implement click-on-screen-to-dismiss-popup one must bind the “vclick” handler to the document rather than the screen, in order to prevent unpleasantness on Android 4.0. WP7 nevertheless requires the code to remain as is, because handling the screen vclick after it has bubbled to the document causes text and inputs underneath the screen to handle and then swallow the event.

Hide fixed toolbars on Android ICS native browser when popups are opened(Issues: #4816#4844#4874) — When fixed toolbars were used on a page, the use of any position:fixed elements cause havoc with rendering of stacked elements in Android. In these situations, the popup would visually appear *under* the overlay but was still clickable so this was a display bug. This issues were addressed by adding conditional logic that will toggle the toolbars from position:fixed to position:absolute when the popup is opened and closed. The drawback to this fix is fixed toolbars appear to hide when a popup is open, but this workaround is only applied to Android 4.0 and will only been seen if there are fixed toolbars and popups with an overlay theme.

Remove default fade animation from popup overlays.(Issue: #4915) — The CSS-based fade in/out transition on the themed overlay causes similar visual stacking bugs as fixed toolbars in Chrome. This was addressed by removing the fade behavior on the overlay. Testing revealed that not animating the opacity of the overlay made the popup display significantly faster so this change is now applied across the board. The overlay now pops into place without a transition.

Slider

Bind to sliders vmouseup for refresh(Issue: #4756) — Browsers like Chrome provide an up and down arrow for range/number inputs but they don’t fire the change event until the control is blurred. We now bind to the mouseup event and check if the value has been altered. If it has, we refresh now the slider position to reflect the value change.

Platform support in 1.2.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.