What to Expect From jQuery Mobile 1.3.0

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.

Tables

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 <table> tag. To see the column toggle table mode in action, take a look at this example on the jQuery Mobile framework website.

Panels

If you’ve ever seen the Google+ app on Android, you may have noticed the nice panel that is shown once you click on the Google icon at the top-left of the screen. From this release onward, you can easily implement a panel like that for your website or application (using Cordova, as you might have learned in Build a Location-Based Mobile App With HTML5 and Javascript). This new widget gives you a lot of options: you can position it on the left (the default) or the right of your page, and you also have up to three ways to show it. The default method is “reveal,” but you also have the “push” and the “overlay” animations at your disposal. The panel can be closed by swiping, tapping onto the page, or hitting the Esc key on the keyboard. To create a panel you simply add the 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.

Range Slider

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 elements. 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.

Auto-Complete Listview

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 data-close-btn="none" attribute.

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.

New Icons

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 text and 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.

Conclusion

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.

Frequently Asked Questions (FAQs) about jQuery Mobile 1.3.0