JQuery Mobile 1.3 For Responsive Web Design
Written by Ian Elliot   
Tuesday, 12 February 2013

The jQuery Mobile team has announced the first release candidate for 1.3.0. It features a new panel widget, dual handle range sliders, and two different responsive table modes.

jQuery Mobile conforms to the idea of responsive web design (RWD) in that it has been designed to work on all devices and platforms - not just mobile phones but also tablets and desktop browsers.

The focus in jQuery Mobile 1.3 is on educating its community on RWD and with this in mind it has responsive documentation and demos that explain key RWD concepts as well as new widgets like responsive tables, panels and grids.

According to Todd Parker, writing on the jQuery Mobile blog:

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.

Version 1.3 introduces a new widget for panels that open to reveal a menu, form or other content. They can be positioned on the left or right of the screen and be placed flexibly in the HTML source order. The widget provides three different ways to open a panel:  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.

This example has a left nav panel and right panel with a form:

jqm13panel

 

A widget for a dual handle range slider has been added in response to popular request:

jqm13rangeslid

 

Responsive grids are the essential to responsive design and jQuery 1.3 has detailed instructions on how to create your own media queries to adjust grids at various breakpoints. It also provides a preset 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.

 

Two different responsive table modes are included in  jQuery 1.3:

  • Reflow table mode which swaps to a stacked label/data style presentation at narrow screen widths. This mode is best for situations where the content length is fairly long and comparing data across rows in a table is less critical.
  • Column toggle table mode which hides columns at narrower page widths according to a priority 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.

The jQuery team has also been re-factoring its AJAX nav system to make is easier to use and more consistent across browsers. Version 1.3 has a new Navigate event and method and has a listview reveal feature to make autocomplete with local data easy.

 

jquerymobile

More Information

jQuery Mobile 1.3.0 RC1 Released

Announcing jQuery Mobile 1.3.0 Beta

Introduction to Responsive Web Design

Related Articles

jQuery Mobile 1.2 Released

jQuery Mobile 1.1

jQuery For Mobile

 

To be informed about new articles on I Programmer, install the I Programmer Toolbar, subscribe to the RSS feed, follow us on, Twitter, Facebook, Google+ or Linkedin,  or sign up for our weekly newsletter.

blog comments powered by Disqus

 

Banner


Intel RealSense Webinars
19/08/2014

Intel's second webinar about its latest RealSense Technology takes place tomorrow August 20th. And if you missed the first one it is now available online.



Application Insights SDK Moves To Azure
10/09/2014

Microsoft has a new SDK for finding out what users are doing with your apps. The Application Insights SDK is in preview and confusingly it already has an "old version".


More News

Last Updated ( Tuesday, 12 February 2013 )
 
 

   
RSS feed of news items only
I Programmer News
Copyright © 2014 i-programmer.info. All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.