Pop-up widgetry comes to JQuery Mobile 1.2.0
The highlight of the just released update to the HTML5-based user interface framework for mobile devices, jQuery Mobile 1.2.0, is a new popup widget designed to make it easy to float a menu, tooltips, forms or lightboxes, over other content. The new Popups in 1.2.0 can be made to appear by invoking a link and, once visible, clicking outside them, hitting back or pressing escape will close them. The markup for a basic popup is simple with a popup being defined as a
div with a
<div data-role="popup" id="popupBasic">
<p>This is a completely basic popup.<p>
Creating that popup needs only a link with a
data-rel attribute set:
<a href="#popupBasic" data-rel="popup">Open Popup</a>
The visual design of popups is a simple unpadded box themed to the containing page with rounded corner style and drop shadow. It is simple to drop a listview into them to create a popup menu for example.
Other enhancements to the Mobile page template include the addition of collapsible lists with customisable collapsible icons, automatically addable list dividers and a flat visual style for read-only lists. Control group buttons are now more finger-friendly (but the old smaller style is still available), toolbar buttons are now "mini" by default, form elements use as much width as is possible now, and touch and virtual mouse events are now available as standalone components.
jQuery Mobile 1.2.0 has also added support for jQuery core 1.8, though if this is used on iOS3 or Blackberry5 devices, it will result in a degraded experience. jQuery core 1.6 support has been dropped. A number of new devices have been added to the "A grade" supported lists; iOS 6, Android 4.1 (Jelly Bean), Tizen, Firefox for Android and Kindle Fire HD.
The full change log for 1.2 is available in the announcement. The MIT licensed jQuery Mobile 1.2.0 is available to download with an alpha version of the download builder allowing the creation of custom editions of the framework.