In association with heise online

21 February 2013, 15:28

jQuery Mobile gets responsive with version 1.3

  • Twitter
  • Facebook
  • submit to slashdot
  • StumbleUpon
  • submit to reddit

jQuery Mobile logo Responsive web design (RWD) has been the focus for the jQuery Mobile developers as they put together the new version, jQuery Mobile 1.3.0, of the touch-optimised mobile web framework. The developers say that they had been faced with designers asking whether they should use RWD or jQuery Mobile – the answer is "both" say the jQuery Mobile developers, and with 1.3, they have set out to educate users by adding responsive documentation and demos to explain key concepts. They have also added responsive tables, panels and grids to make it easier to build responsive sites and applications.

jQuery Mobile Panels
Zoom jQuery Mobile Panels
Source: jQuery
The new components include a revealable panel, which can be positioned to the left or right of content and display a menu. The new responsive tables can, on narrow devices, reflow the table content into a stacked label/value list. A column toggle can also let the table user control what is displayed. Grids, the cornerstone of many responsive designs are also available as components in jQuery Mobile 1.3. The responsive features use custom breakpoint classes which allow the developer to control how content should react to various screen shapes and resolutions.

Beyond the responsive content, jQuery Mobile 1.3 also comes with a new Range Slider, a dual-handled slider for collecting range values. Other changes include new navigation events and methods, support for page transitions in IE10/Windows Phone 8, new ways for list views to autocomplete, optional close buttons for dialogs, clear buttons and file support for input fields and improved fixed headers. There are also new icons, jQuery Mobile dual-headed sliders
Zoom jQuery Mobile's new dual-headed sliders
Source: jQuery
with switchable colours and removable disc backgrounds and a now-extendable Swipe event.

The developers are planning to use more CSS than JavaScript in jQuery Mobile 1.4 and have already started the process of removing some JS code and replacing it with appropriate CSS; changes have already saved 1K (gzipped) and they say to expect more savings in 1.4. jQuery Mobile now supports up to jQuery 1.9.1 and the developers are actively testing jQuery 2.0. Nested listviews have been deprecated and will go away in 1.4. New "A-grade" supported platforms include BlackBerry 10, IE10, Microsoft Surface RT, Windows Phone 7.8 and the 7" and 10" Kindle Fire HD.

To go with the 1.3 update, there are also new API docs and a new demos page. Further information – including download locations and CDN networks, supported platforms and a full change log for the MIT-licensed jQuery Mobile 1.3.0 – is available from the announcement page.


Print Version | Send by email | Permalink:

  • July's Community Calendar

The H Open

The H Security

The H Developer

The H Internet Toolkit