I wrote an article titled What’s New in jQuery Mobile 1.2.0? that showed the new features and the changes made by the jQuery Mobile team in version 1.2.0 of their popular mobile development framework. Several days ago, the team announced the beta version of the 1.3.0 release. Lucky for us, it focuses on responsive web design, specifically two different responsive table modes, panels, and dual-handle range sliders. In this article, I’ll show you an overview of some of these new features.
In the 1.3.0 version of jQuery Mobile, there are two important additions: reflow table and column toggle table mode. Let’s have a closer look at both.
Reflow Table Mode
Let’s suppose that you have a table with many columns, and that you’re looking to display that data sensibly on a small screen. With basic responsive design techniques, you’d reduce the font and cause the data table to be difficult due to the very small font size. With this mode, the table is instead divided into chunks where each row becomes a new table and the columns are turned into rows. So, the new small tables will have as many rows as the previous column count, and it will display just two columns: one for the data labels (which were the old column headers), and one for the values.
To apply the reflow mode, all you need to do is to add the
data-role="table" attribute to the
<table> tag, since the
data-mode="reflow" attribute is the default behavior. To see the reflow mode in action, take a look at this example on the jQuery Mobile website.
Column Toggle Table Mode
This mode has a different approach compared to reflow table mode. In fact, this time you have the chance to hide one or more columns based on your needs, thanks to a button injected at the top of the table. Of course, this is not the entire solution, because if all the columns are shown, you’ll have the same limited width problem discussed before. To solve this issue, you can program a set of columns to hide themselves if a certain width threshold is reached. This is accomplished by using CSS media queries that manage columns based on the priority level. You can specify the columns that can be hidden or shown applying a
data-priority attribute, having values from 1 (highest) to 6 (lowest), to the table’s header (
<th>). If you don’t specify a priority, the column is persistent so it’s not available for hiding. This means that it’ll be visible at all the widths and won’t be available in the column chooser menu. Apart from specifying the columns’ priority attributes, you have to add the
data-role="table" and the
data-mode="columntoggle" attributes to the
To see the column toggle table mode in action, take a look at this example on the jQuery Mobile framework website.
data-role="panel" attribute to the container (usually a
<div>) that you want to transform into a panel.
Typically, your code will look like the following:
<div data-role="page"> <header data-role="header"> <h1>Your title</h1> </header> <div data-role="content"> <p>Open the panel: <a href="#panel">Panel</a></p> </div> <footer data-role="footer"> <h3>Copyright Aurelio De Rosa</h3> </footer> <div data-role="panel" id="panel"> <p>The content of the panel</p> </div> </div>
A demo of the panel widget can be seen looking at this page.
The new range slider is a very nice feature in JQM version 1.3.0. It allows you to create a slider that has two handles that you can move to fit the range for a given property. It’s very useful. For example, if you have a reservations’ website and you want to enable your users to select the price range to filter the results of a search, they can specify this exact range using the range slider. To have this widget, you just apply the
data-role="rangeslider" attribute to the container, usually a
<div>, consisting of two
An example of code that create a range slider is the following.
<div data-role="rangeslider"> <label for="range-1">Slider 1:</label> <input type="range" name="range-1" id="range-1" min="0" max="10" value="0" /> <label for="range-2">Slider 2:</label> <input type="range" name="range-2" id="range-2" min="0" max="10" value="10" /> </div>
In case you want to see a live demo, look at this page.
The listviews have been enhanced with a shiny new feature: auto-complete. The basic version uses local data. To have the auto-complete function, you simply add the
data-filter-reveal="true" attribute to your list. It will hide the list items when the search field is empty, and while the user writes, the matching elements are shown. However, the jQuery Mobile team warns against the use of this feature on large sets of data. Besides, if you want to use a remote source, you can use the
listviewbeforefilter event to dynamically populate the listview as the user types.
To have an idea of how this feature works, watch the demo illustrated in this page.
Some Minor Changes
Dialog Close Button Option
From now on, if the dialog has a header, jQuery Mobile will automatically add a “close” button at the left side of the header. If you want to place it in a more Windows-style position (on the right), you can add the
data-close-btn="right" to the dialog container. In case you don’t want the close button at all, you can add the
Popup Dismissible Option
Until the version 1.2.0, if you showed a popup, it could be hidden by clicking or tapping outside of the popup. If you didn’t like this behavior, you can now stop it by adding a
data-dismissible="false" attribute to the popup container. It should be obvious that, in this case, you must provide an alternative method to dismiss the popup, or it’ll stay there and create major frustrations for your users.
The jQuery Mobile team has added two new icons. They created an “edit” icon, represented by a pencil, that you can set by adding
data-icon="edit", and a “three bar” icon, that you can set by adding
data-icon="bars", which can be used with the new panel widget.
Clear Button Option
In this version of the framework, you can add the “clear” button (which is typically used for
<input type="search"> elements) to any input type, even types like
number. To achieve this goal, you have to add the
data-clear-btn="true" attribute to the element. You can also change the display text of the “clear” button using the
data-clear-btn-text="my new text" attribute.
I’ve shown some of the new features created by the jQuery Mobile team that you’ll see in the next release of the framework. Probably the most interesting new features are the panel widgets and the tables’ responsive mode, which will let you create better mobile interfaces and user experiences. However, keep in mind that these are not the only enhancements made, and you can study them in depth by reading the release update posted in the official website.
How to Simulate Mobile Devices with Device Mode in Chrome
By Craig Buckler,
Does your web app work in all devices? Testing is a huge job. Learn how to enable Chrome's useful device mode to emulate dozens of mobile devices.
How to Test Responsive Web Design Cross-Browser Compatibility
By Craig Buckler,
Craig introduces CSS options for setting up a responsive website, including media queries, Flexbox and Grid, and covers tools for testing cross-browser compatibility.
How to Create a QR Code Reader for Your Mobile Website
By Dmitri Lau, Beardscript,