Announcing jQuery Mobile 1.3.0 Beta
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
Demos & docs | Key changes | Download & CDN
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.
We’ve built some cool demos showing how you can customize these basic table tools to make a comparison chart or present complex financial data with grouped headers and more.
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.
Grid API docs >
Responsive grids >
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.
Navigate API: Event and Method
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.
Fixed header improvements & extension
Fixed toolbars are tricky business with all the browser bugginess. Since 1.2, we’ve closed 37 fixed toolbar issues including the 1px jitter when scrolling, Android 2.x transition bugs, on-screen keyboard and input focus bugs, and iOS next/prev form controls causing the fixed header revealing itself.
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.
We’ve also been building some real-world swipe demos like the swipe page nav and the swipe listview item to delete.
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.
Download
CDN-Hosted JavaScript:
- Uncompressed: jquery.mobile-1.3.0-beta.1.js (useful for debugging)
- Minified and Gzipped: jquery.mobile-1.3.0-beta.1.min.js (24KB, ready to deploy)
CDN-Hosted CSS:
- Uncompressed with Default theme: jquery.mobile-1.3.0-beta.1.css (useful for debugging)
- Minified and Gzipped with Default theme: jquery.mobile-1.3.0-beta.1.min.css (7KB, ready to deploy)
- Uncompressed structure without a theme: jquery.mobile-1.3.0-beta.1.css (useful for theme development)
- Minified and Gzipped structure without a theme: jquery.mobile-1.3.0-beta.1.min.css (6KB, ready to deploy)
Copy-and-Paste Snippet for CDN-hosted files (recommended):
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" /> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js"></script>
ZIP File: If you want to host the files yourself you can download a zip of all the files:
- Zip File: jquery.mobile-1.3.0-beta.1.zip (JavaScript, CSS, and images)
Microsoft CDN hosted jQuery Mobile files:
Fork jQuery Mobile on GitHub
https://github.com/jquery/jquery-mobile
Great work team. Massive update.
Great News Thanks!!
Thanks guys for your hard work
JQuery Mobile has made my development so much faster for mobile and touch devices. I’m looking forward to the many enhancements 1.3 offers.
Finally the panels, thanks !
This is a refreshing update to jQuery Mobile. I can’t wait to test out some of the features in this release!
Panels, searchable docs, responsive grids. Keep up the good work.
very good
Excelent work! Responsive tables and grids!!!!!!!! Great!!!!
loving it guys, nice one.
…yeah! nicely done!
Looking great!
Sounds like some great improvements on an already excellent framework. Good stuff.
Thank you very much. I use JQM in a lot of projects and it works great.
Very good work team. Special thanks to responsive Tables and responsive Grid. We’ll update our mobile CRM solution with the new release as soon as possible. Already in test with beta version Thanks Thanks Thanks
Thanks guys for your hard work !
Very good update & summary. I’m excited to try the panel & responsive tables!
thanks team for all the continued hard work..great stuff being added all the time!
Excellent work. Thank you very much!
With the “Panel widget”, it’s like you were reading my mind. Thank you!
Unfortunately, I’ve replaced JQM 1.2 with this beta in my app and things started to go wrong.
The first think I’ve noticed was misplaced icons in the search filter of a list view, header buttons, container group icon and so on..
Try to replace the CSS…
Thanks a lot. Will give it a shot.
Thanks for all the hard work guys! One question about panels, will there be independent scroll within panel? Thanks again!
very good
very happy to the data-dismissible option of the popups. responsive design features are also a great addition.
Panels seem great, but it’s sad it’s limited to left/right. Top/bottom panels could be usefull for things like simulate android menu.
Looks awesome! I can’t wait to see the final version! Keep up the good work… you’re making my life easier 🙂
Can’t wait to try tables and the others widgets. Thanks!
Nice! Transitions were the biggest thing I was wrestling with. Although they are still not perfect, they look lots better on most of the test devices I have…
Thanks a lot! thanks for keep working for this great and very helpfull project.
Hello, congratulations for the update, great job!.
One question, I see no way to put two panels on the same page, this is possible?.
thanks
I wish the CDN’s SSL was correct. It’s throwing an error domain mismatch.
amazing! gonna test new features this weekend! 8)
Great to see such progress on taking cross-platform mobile web to the next level!
Please provide source map files for the minified version like jQuery does since 1.9 RC1:
http://blog.jquery.com/2013/01/09/jquery-1-9-rc1-and-migrate-rc1-released/
i do appreciate your hard works and love the results.
thanks guys
Excellent Update!
Well, One question.
If there are several items such as one thumbnail, title, description, 5 stars,post time in one line(for example, in listview) , How can I construct it using Jquery Mobile?
Please help me.
Regards.
I’m trying to run the beta version with jquery 1.9.0 and I’m getting the following error when scrolling the page: a.event.handle is undefined
“A navigate event that normalizes the URL alteration events hashchange/popstate” <– this is causing my search functionality to crash. Can I disable it somehow?
I’m using version 1.30, I would like to report an error
clicking on a search field the header and footer disappear even if you set header with value data-tap-toggle=”false”
Thanks
one other error i found it seem that data-role=”panel” data-display=”overlay” put some margin top and left in the page
Awesomeness!!!
Any chance on getting SCSS as an out of the box option?
oh! i can’t wait!
Wow, amazing! I have a big project, and the pannels are exactly what I need! Thank you so much for your work!
I’m very happy beacause jQM support Table
tnx a lot to all of you sir
При возникновении ошибки в FireFox
[Exception…
“Not enough arguments” nsresult: “0x80570001
(NS_ERROR_XPC_NOT_ENOUGH_ARGS)” location: “JS frame :: …/jquery.mobile-1.3.0-beta.1/jquery.mobile.js
:: transform3dTest :: line 1195” data: no]
исправьте строку “ret = window.getComputedStyle(el).getPropertyValue(transforms[ t ]);”
на “ret = window.getComputedStyle(el,”).getPropertyValue(transforms[ t ]);”
функция window.getComputedStyle требует второй параметр
Fantastic stuff!! How about an option to auto open panel on page load ?
It doesen’t work on default android browser (testet with HTC Wildfire S and Xperia X10), as well as version 1.2. The resolution has changed.
Superb!
Well done!
in nexus 7 list arrows shift to right side how to solve that problem because other devices work perfect . i am using 1.3.0-beta jq