What to Expect From jQuery Mobile 1.3.0

Share this article

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

What are the new features in jQuery Mobile 1.3.0?

jQuery Mobile 1.3.0 introduces several new features and enhancements. It includes improved responsive design capabilities, new widgets, and a new panel widget for creating responsive menus and sidebars. It also introduces dual handle range sliders, responsive tables, and a new navigate event and method for managing URL history and transitions.

How does the new panel widget work in jQuery Mobile 1.3.0?

The new panel widget in jQuery Mobile 1.3.0 allows you to create responsive menus and sidebars. It can be positioned on the left or right side of the screen and can be set to display upon a swipe or a button click. The panel can be customized with different themes and can be set to dismiss when the user clicks outside of it.

What are the improvements in responsive design in jQuery Mobile 1.3.0?

jQuery Mobile 1.3.0 has made significant improvements in responsive design. It now supports more flexible grids, allowing for more complex and flexible layouts. It also introduces responsive tables, which automatically adjust to the screen size, making it easier to display data on smaller screens.

How does the new dual handle range slider work in jQuery Mobile 1.3.0?

The new dual handle range slider in jQuery Mobile 1.3.0 allows users to select a range of values by dragging two handles. This is particularly useful for applications that require users to specify a range, such as price ranges in e-commerce sites.

How does the new navigate event and method work in jQuery Mobile 1.3.0?

The new navigate event and method in jQuery Mobile 1.3.0 provide a unified way of managing URL history and transitions. This allows developers to handle URL changes in a consistent way across different platforms and devices.

How can I customize the theme in jQuery Mobile 1.3.0?

jQuery Mobile 1.3.0 allows you to customize the theme using the ThemeRoller tool. You can change the color scheme, font size, and other design elements to match your brand or personal style.

How does the new search input work in jQuery Mobile 1.3.0?

The new search input in jQuery Mobile 1.3.0 provides a user-friendly way to add search functionality to your mobile web applications. It includes a clear button that appears when the user starts typing, allowing them to easily clear the input field.

How can I use the new table reflow mode in jQuery Mobile 1.3.0?

The new table reflow mode in jQuery Mobile 1.3.0 allows tables to reflow for smaller screens. This means that the table rows become individual entities that stack vertically, making it easier to read and interact with the table on smaller screens.

How can I use the new select menu in jQuery Mobile 1.3.0?

The new select menu in jQuery Mobile 1.3.0 provides a user-friendly way to present a list of options to the user. It supports optgroup elements, allowing you to group related options together.

How can I use the new form elements in jQuery Mobile 1.3.0?

jQuery Mobile 1.3.0 introduces several new form elements, including range sliders, flip switches, and mini form elements. These new elements provide a more intuitive and user-friendly way to gather input from users.

Aurelio De RosaAurelio De Rosa
View Author

I'm a (full-stack) web and app developer with more than 5 years' experience programming for the web using HTML, CSS, Sass, JavaScript, and PHP. I'm an expert of JavaScript and HTML5 APIs but my interests include web security, accessibility, performance, and SEO. I'm also a regular writer for several networks, speaker, and author of the books jQuery in Action, third edition and Instant jQuery Selectors.

jQuerymobile web discussionResponsive Design
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form