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