Announcing jQuery Mobile 1.2.0 Alpha

Posted on by

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

Demos & docs | Key changes | Change log | Download & CDN | Supported Platforms

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.

Here is the basic markup you need: a link and popup container.

<a href="#popupBasic" data-rel="popup">Open Popup</a>

<div data-role="popup" id="popupBasic">
	<p>This is a completely basic popup.<p>
</div>

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 panel by tweaking styles and working with the API.

Check out the popup docs for more on the options, methods, and events APIs.

Collapsible Lists

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.

Listview Autodividers

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

Read-only Listview

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.

We now use the same padding for both read-only and linked list items.

Controlgroup Icon Buttons: Easier to Tap

Controlgroup Icon Buttons

When icon-only buttons were used in controlgroups, they were simply too small to be finger-friendly so in 1.2, we’ve improved the design to increase the padding around the icons to make them easier to tap.

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

Form widths

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 alpha or latest in the version dropdown of the download builder tool.

Support for jQuery 1.7.2 (and soon 1.8)

jQuery Mobile 1.2 now supports versions 1.6.4, 1.7.1, and 1.7.2 of jQuery core. We recommend that you use 1.7.2 to take advantage of all the improvements in the latest release. We’re working on fully testing 1.8 and hope to support that soon.

Supported Platforms: Always Expanding

Form widths

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: Android 4.1 (Jellybean), Tizen, Firefox for Android.

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.2.0 Alpha 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 (template here). If all goes well, we hope to release the final build in about 2 weeks.

Change Log

Button

1.2.0-A1
Added padding for icon-only buttons in controlgroup (Issue: #1998)

1.2.0-A1
Adjusted CSS selector for fullsize button in toolbar (Issue: #4619)
– The search input clear button now gets the correct padding when placed in a header or footer.

1.1.2
Link buttons still enhanced in data-enhance=”false” container 
– Link buttons in data-enhance="false" containers now don’t get auto-enhanced.

1.2.0-A1
Make button elements default to mini in header and footer (Issue: #3998)
– All buttons, regardless of markup, are now mini by default in toolbars. This was an implicit behavior in 1.0, but now we automatically make buttons the mini size unless explicitly set to full size when in toolbars to make this work as expected.

1.1.2
Make sure that a disabled select button gets a disabled look on IE/WP 

1.1.2
Only set margin left/right for buttons that are immediate children 
– Avoid margin override of buttons that are part of other widgets.

1.1.2
Rewrote code that adds class ui-submit (Issue: #4642)
– Submit button in header renders correctly now.

CSS

1.2.0-A1
Outline style “auto” for browsers that don’t support box-shadow so it is the same as outline on regular links 

CheckboxRadio

1.2.0-A1
Filter for first label. Fixes label conflict issue (Issue: #3879)
– Fixes the double label issue which was raised if checkboxes or radios had associated more than one label.

Collapsible

1.2.0-A1
Added inset option for Collapsible / Collapsible sets. Adjusted CSS for inset collapsible (removed -8px margin) and added CSS for non-inset collapsibles. (Issue: #3976)
– Collapsibles and Collapsible-Sets now have a new inset option to remove all margins and give them a non-inset listview look.

1.2.0-A1
Added rule that prevents double borders in a serie of individual collapsibles 
– To avoid double borders (top and bottom) in a serie of standalone collapsibles a CSS rule was added that can be easily overwritten if collapsibles with different swatches are used.

1.2.0-A1
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!

1.2.0-A1
Made non-inset listviews exactly fit inside ui-collapsible-content. 

1.2.0-A1
Make sure the collapsibles inherit a theme if nothing is set 
– Collapsibles now show the right hover/button-up/button-down styling.

CollapsibleSet

1.1.2
Changed the refresh function so it first removes data object “collapsible-last” for each item before setting it on the last one. (Issue: #4645)
– Programmatically added collapsibles to a set now get the right corner-bottom styling.

1.1.2
Fix for the corner styling of legends as heading in a collapsible set 
– Legends now can also be used for Collapsible headers

1.2.0-A1
Make sure only one collapsible in a set is expanded at the same time. 
– Improved collapsible set functionality.

Dialog

1.1.2
The rules for dialog sections should only apply to immediate children (Issue: #4699)
– Additional fix for dialog CSS for extended support the new jQuery Mobile download builder tool.

Events

1.1.2
Increased the scrollSupressionThreshold from 10 to 30 pixels (Issue: #2107)
– Change to make the swipe tolerances more forgiving so it doesn’t interfere with scrolling.

Form

1.2.0-A1
Full width forms (Issue: #3301)
– The width of fieldcontainers has been changed from 60% to 78% so the form will be full width now.

Listview

1.1.2
Add a class to set border-bottom on the last LI. Fixes missing border on filtered lists and on browsers that don’t support :last-child (Issue: #4614)

1.1.2
Added support for start attribute on numbered listviews (Issue: #4613)

1.1.2
Fix for inset lists with autodividers didn’t get corner styling 
– Autodividers in inset lists now get the correct corner styling.

1.1.2
Fix for read-only list numbering on browsers that don’t support CSS pseudo classes 

1.2.0-A1
Improved border styling of listview inside collapsible content 
– Improved CSS for listviews and listview filter items inside collapsible content.

1.2.0-A1
Merge branch ‘townxelliot-autodividers’ 
– New Listview option Autodividers. Thanks townxelliot!

1.2.0-A1
New styling for read-only lists (Issue: #4347)
– Adding theming support and new styling for read only lists.

Navbar

1.2.0-A1
Set margin to 0 to avoid the top/bottom margin of .ui-mini being applied 

Navigation

1.2.0-A1
Handle the case where the initial URL contains a non-path hash that points to a non-existing page 

1.2.0-A1
When showing a dialog, do not append dialogHashKey if the URL already contains it (Issue: #2656)

Page

1.2.0-A1
Header buttons: Added “button” to the selector (Issue: #4638)
– Manual added header buttons now placed in the same line as the title.

Select

1.2.0-A1
Add ui-btn-down- to initially focused menu item to make tab selection consistent 

1.1.2
Fix for an issue on Opera Mini where the enhanced select button was visible through the semi-transparent native select 

1.1.2
Set margin 0 for the selectmenu header (Issue: #4699)
– Custom selects now get the proper top-margin when used in a dialog.

Slider

1.1.2
Avoid regression by setting all margins of the slider handle (Issue: #4720)
– Fixes a layout problem of sliders and flip swichtes in controlgroups.

1.2.0-A1
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.

1.2.0-A1
Stop the call structure for slider updates earlier on disabled inputs (Issues: #3058 #4770)
– Improved behavior for disabled sliders.

1.2.0-A1
Support slidestart and slidestop events (Issue: #1589)
– Sliders now support slidestart and slidestop events

Textinput

1.1.2
added conditional call to disable() to the create function to make sure disabled elements get class ui-disabled (Issues: #4636 #4637)
– The ui-disabled class will now be added correctly to disabled textinputs.

Toolbar

1.2.0-A1
Fix for fixed persistent toolbar padding issues (Issues: #4176 #4219)
– Content of pages with fixed persistent toolbars higher than standard, now gets the right alignment. Thanks MauriceG!

Download

CDN-Hosted JavaScript:

CDN-Hosted CSS:

Copy-and-Paste Snippet for CDN-hosted files (recommended):

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.js"></script>

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

Microsoft CDN hosted jQuery Mobile files:

Fork jQuery Mobile on GitHub
https://github.com/jquery/jquery-mobile

Platform support in 1.2.0 Alpha

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.

A-grade – Full enhanced experience with Ajax-based animated page transitions.

  • Apple iOS 3.2-5.1 – Tested on the original iPad (4.3 / 5.0), iPad 2 (4.3), iPad 3 (5.1), original iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), 4 (4.3 / 5.0), and 4S (5.1)
  • Android 2.1-2.3 – Tested on the HTC Incredible (2.2), original Droid (2.2), HTC Aria (2.1), Google Nexus S (2.3). Functional on 1.5 & 1.6 but performance may be sluggish, tested on Google G1 (1.5)
  • Android 3.1 (Honeycomb)  – Tested on the Samsung Galaxy Tab 10.1 and Motorola XOOM
  • Android 4.0 (ICS)  – Tested on a Galaxy Nexus. Note: transition performance can be poor on upgraded devices
  • Android 4.1 (Jelly Bean)  – Tested on a Galaxy Nexus and Galaxy 7
  • Windows Phone 7-7.5 – Tested on the HTC Surround (7.0) HTC Trophy (7.5), LG-E900 (7.5), Nokia Lumia 800
  • Blackberry 6.0 – Tested on the Torch 9800 and Style 9670
  • Blackberry 7 – Tested on BlackBerry® Torch 9810
  • Blackberry Playbook (1.0-2.0) – Tested on PlayBook
  • Palm WebOS (1.4-2.0) – Tested on the Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0)
  • Palm WebOS 3.0 – Tested on HP TouchPad
  • Firefox Mobile (12 Beta) – Tested on Android 2.3 device
  • Chrome for Android – Tested on Android 4.0, 4.1 device
  • Skyfire 4.1 – Tested on Android 2.3 device
  • Opera Mobile 11.5-12: Tested on Android 2.3
  • Meego 1.2 – Tested on Nokia 950 and N9
  • Tizen (pre-release) – Tested on early hardware
  • Samsung Bada 2.0 – Tested on a Samsung Wave 3, Dolphin browser
  • UC Browser – Tested on Android 2.3 device
  • Kindle 3 and Fire – Tested on the built-in WebKit browser for each
  • Nook Color 1.4.1 – Tested on original Nook Color, not Nook Tablet
  • Chrome Desktop 11-21 – Tested on OS X 10.7 and Windows 7
  • Safari Desktop 4-5 – Tested on OS X 10.7 and Windows 7
  • Firefox Desktop 4-13 – Tested on OS X 10.7 and Windows 7
  • Internet Explorer 7-9 – Tested on Windows XP, Vista and 7
  • Opera Desktop 10-12 – Tested on OS X 10.7 and Windows 7

B-grade – Enhanced experience except without Ajax navigation features.

  • Blackberry 5.0: Tested on the Storm 2 9550, Bold 9770
  • Opera Mini (5.0-6.5) – Tested on iOS 3.2/4.3 and Android 2.3
  • Nokia Symbian^3 – Tested on Nokia N8 (Symbian^3), C7 (Symbian^3), also works on N97 (Symbian^1)

C-grade – Basic, non-enhanced HTML experience that is still functional

  • Blackberry 4.x – Tested on the Curve 8330
  • Windows Mobile – Tested on the HTC Leo (WinMo 5.2)
  • All older smartphone platforms and featurephones – Any device that doesn’t support media queries will receive the basic, C grade experience

31 thoughts on “Announcing jQuery Mobile 1.2.0 Alpha

  1. Alex T. on said:

    good job, but you guys might need htc desire hd, with android 2.3.5, they have alot of issues regarding forms and fixed position problem

  2. futbolapp on said:

    Any progress on the Builder? As much as I love JQM, the big file size and parsing times keep my app slow.

  3. Vijendra Patil on said:

    awsome, this is really nice. But I would like to have few more features such as momentum based scrolling, available in Sencha or Kendo UI.

    Nice to have is the Chart feature, (Dataviz feature of Kendo)

  4. Vijendra Patil on said:

    Hi,

    When is the final version of JQM 1.2 is about to release? Please let us know.

  5. Hugh Anderson on said:

    The most important feature is still lacking. There needs to be a consistent “refresh” api for all jQuery Mobile widgets. It is simply too cumbersome to have to call different methods on every kind of widget when I dynamically insert content into pages. I should be able to call “refresh” on ANY AND ALL jQuery mobile widgets so that they can regenerate after content has been dynamically inserted. This is my number one gripe with jQuery Mobile. It seems so obvious that all widgets should have a consistent API.

  6. Akash Budhia on said:

    WOW, Looks like the Jquery Mobile was working on “My Set of Problems”. Thanks Team 🙂

  7. Simon Canil on said:

    text-align: centre; now does’t seem to work for aligning a button controll group in the centre of the page??

  8. youtube on said:

    Is this the full change log? Been trying to work out if the bug (feature) added in 1.1 that effected iOS and made .attr(‘href’) return just ‘#’ had been changed? I think it was in commit bdc5d50 linked to issue #3777 but frankly GitHub does not make it clear if that is part of 1.2?

  9. Reto Laemmler on said:

    Happy to see the progress. When will you guys support chaining of dialogs? At http://www.rememberthename.ch I provide a flashcard game where I alternate 2 pages and chain them for a set of people. With popups I could provide a cinema like experience.

  10. Lists inside collapsible do not really solve the purpose of “Collapsible lists”

    At-least in my case I need to show few pieces of information within the
    main list before they click on it to see more options. In a collapsible
    we can only show a couple of words with the same text size while what I
    need is to show some formatted text in the list (similar to that shown
    in Lists – > Content Formatting samples.

  11. Form elements width adjustments in fieldcontainers is a great move but hey, sometimes labels are more than a word and need a little more than 20%…
    How about such situations???? (wrap is ugly).

  12. 辉 张 on said:

    I have one question!
    I want to use popup widget like window.alert . (like demo dialog in popup that you provide)
    but the popup will be close when the screen(it has class like this class=”ui-popup-screen fade ui-body-a in”) of popup is clicked.
    So, I think it must has one option to decide whether the click event of the screen will be binded.

  13. 辉 张 on said:

    i think that it must has a method “open” for dialog widget like popup widget.
    $.mobile.dialog(‘open’, options);

  14. Antoni on said:

    Hola,

    Las versiones 1.1.1 y 1.2.0 con un “window.setTimeout(“refresh_data()”, 3000);” no funcionan bien (el refresco es un poco aleatorio), en la versión 1.0.1 si!

    Salduos

  15. Kim Ras on said:

    Good stuff.. Looking forward to use the popups..
    One thing I ran into was that the Horizontal Button groups no longer is centered.. I have been using 1.1.0 ant that worked for me..
    I will continue trying out this alpha..
    Thanks again
    Kim

  16. Jason Huggins on said:

    i have a playbook issue, it doesn’t happen on any other browser/android/ios, after a $.mobile.changepage, in my on(‘pageinit” …) i want to set the a default dropdown value and I run selectmenu(“refresh”, true) to update the GUI, but only on playbook i receive a javascript error and it breaks the page
    “TypeError: Result of expression ‘span.text( text ).addClass’ [undefined] is not a function.”
    jquery.mobile-1.2.0-alpha.1.js:8035

    more info here if you have a resolution:
    http://stackoverflow.com/questions/12115801/jquery-mobile-in-playbook-select-selectmenurefresh-true-breaks-on-add

  17. Moinkhan Pathan on said:

    Hello JQM,

    I am your big fan since beginning, and I follow your all versions…but this time its not working for me..1.2.0 alpha has great CSS..but the changePage event is not working properly for me..In my app I am trying to change the page(which is same page with different url param)…it succesfully loads the new âge..but within a second it disappeares and old page comes again…

    without having solution to this..I cant use this beautiful discovery…:( 🙁 🙁

  18. Craig L on said:

    1.2 = Great stuff! Is anyone having issues though with popups where if you launch one in response to a button tap, that if you tap quickly, the popup disappears straight after it has loaded? If I long tap (long enough for the ‘hover’ styling to show completely) the popup stays open as expected. Happens to me on android 4.0.4 using chrome and the built-in browser (on samsung galaxy s3), does not happen to me on chrome (desktop). I suspect it is to do with the ‘close if tap away from the popup’ feature closing it in response to some delayed event. I can work around with a setTimeout call, but its a bit of a hack…

  19. “…release the final build in about 2 weeks.”
    One month later, what’s happening? Are there so many blockers that the new version can’t be released?

  20. Federico Navarrete on said:

    I think, footer fixed is not working in
    Windows Phone because, I’m using Windows Phone emulator and in landscape mode you have a big problem because it has 35px, I think between the end of the buttons and the end of the emulator :S.

  21. Rob Caldecott on said:

    How can we use the same popup on different pages? As far as I can tell the popup content needs to be in a div with the same parent as the link that opens it. This means I can’t share a popup dialog on different pages of my apps.

  22. Adriano Ruiz on said:

    In SAFARi, When loading pages via Ajax using the $.mobile.changePage() method, jQuery mobile seems to duplicate some of the HTML elements. I get multiple dialog divs. This is especially annoying because you get multiple elements with the same ID. This issue is similar to Issue 548. I’m using 1.1.1
    The first time you enter the page works fine, when going to a page and back to previous. So everything bug thanks