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


WasmCon 2023 Sessions Now Online
01/03/2024

The recorded session of the premier conference for technical developers and users interested in exploring the potential of WebAssembly are now online.



We Built A Software Engineer
20/03/2024

One of the most worrying things about being a programmer today is the threat from AI. It has gone so far that NVIDA CEO Jensen Huang proclaims that you really shouldn't start training as a programmer  [ ... ]


More News

 

raspberry pi books

 

Comments




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

Last Updated ( Friday, 12 May 2017 )