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, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.

 

Banner


GitHub Introduces Code Scanning
26/03/2024

GitHub has announced a public beta of a code scanner that automatically fixes problems. The new feature was announced back in November, but has now moved to public beta status.  



Quantum Computers Really Are A One Trick Pony
17/03/2024

Google is offering $5 million if you can think up a use for a quantum computer. Wait, I thought quantum computers were the next big thing, a revolution! Surely we know what they can do?


More News

 

raspberry pi books

 

Comments




or email your comment to: comments@i-programmer.info

Last Updated ( Friday, 12 May 2017 )