What’s New in jQuery Mobile 1.2.0?

Share this article

A highly anticipated new version of jQuery Mobile was recently released. Let’s have a look at what’s been added and changed in this 1.2.0 version. Throughout the code samples, you’ll learn also how to handle these new features and harness them to improve your mobile apps.

jQuery Mobile is a lightweight, useful, and easy-to-learn mobile framework defined by a unified user interface system that works across all popular mobile device platforms. I must admit that as soon as I started to study and use it, I fell in love. I’ll focus on the new features of the latest version, but in case you don’t know what jQuery Mobile is or if you need a starting point, I advise you to read Hello jQuery Mobile and Building a Staff Directory on jQuery Mobile.

Keep in mind that the newest version also solves a lot of bugs from the previous one. If you need a complete list of the changes, refer to the official change log for 1.2.0. Please note that I’ll use the term “virtual page” to emphasize the difference between a jQuery Mobile page and a physical page — a file like index.html or page.php.

Compatibilities

The first thing to highlight is that jQuery Mobile 1.2.0 increased device compatibility. Actually, most of these operating systems or browsers already worked with the version 1.1, but jQuery Mobile now has an unrivaled “‘A’ grade” compatibility. “A” grade means full, enhanced experience with Ajax-based animated page transitions. If you need more information about what those grades are, you can read Mobile Graded Browser Support.
The complete list of fully compatible mobile operating systems includes: iOS 6, Android 4.1, Tizen, Firefox for Android, and Kindle Fire HD. Now, you’re probably puzzled by Tizen. It’s an open-source operating system created by the Linux Foundation. To be more accurate, I’ll to cite their “About” page:

Tizen is an open source, standards-based software platform supported by leading mobile operators, device manufacturers, and silicon suppliers for multiple device categories, including smartphones, tablets, netbooks, in-vehicle infotainment devices, smart TVs, and more. Tizen offers an innovative operating system, applications, and a user experience that consumers can take from device to device.

As you may know, jQuery Mobile relies on the jQuery library. The new version of jQuery Mobile added the support for the latest jQuery version, the 1.8 branch and — on the other end of software modernization — the jQuery team dropped the support for the 1.6 branch. However, if you still use that old version, your code should work as before, but be aware that if bugs are found that affect just this older 1.6 version, they won’t be fixed.

Popups

Popups are one of the new features introduced in the latest version of jQuery Mobile. They allow you to put any content like menus, widgets, or images inside a container that floats above the current page. It’s very easy to create one. In fact, all you have to do is to follow the structure of a classic jQuery Mobile virtual page and replace the data-role="page" with data-role="popup". To call a popup widget, just like a dialog, you have to place a link pointing to the ID of the popup and add data-rel="popup". The following is an example of how to call a popup.

<a href="#helloPopup" data-rel="popup">Basic Popup</a>

And this is how it resembles a basic popup.

<div data-role="popup" id="helloPopup">
  <header data-role="header">
    <h1>Popup</h1>
  </header>
  <div data-role="content">
    <p>Hello! I'm a brand new popup widget.</p>
    <a href="#" title="Go back" data-role="button" data-rel="back">Close</a>
  </div>
</div>

Like almost every other feature, the popup widget has a lot of useful options like theme to set the color scheme for the popup contents, corners to determine if the popup has rounded corners, and probably the most interesting, positionTo, which allows you to determine where to render the popup. The possible values are:

  • origin, the default, which means centered based on the element that called the popup; 
  • window, centered in the current window;
  • a jQuery selector, centered among the given element.

One of the main differences between popups and dialogs is that while a dialog must be an external page and a physical file, a popup is placed in the same file and within the same virtual page that will call it.

I must admit that this dialog constraint made me waste a lot of time when I started with jQuery Mobile. In fact, at that time I wasn’t using the popup widget, and I felt that having a physical file was a waste of disk space. Citing the documentation:

Any page can be presented as a modal dialog by adding the data-rel=”dialog” attribute to the page anchor link.

Although the documentation examples always show a link to a physical file, they don’t specify that it must be a physical file. However, thanks to the new popup widget, you’ll never have to build additional external files or run in this issue again.

Lists

In this new jQuery Mobile version, lists are rendered, altered, and manipulated much more easily. Let’s take a closer look.

Listview Autodividers

The jQuery Mobile team has introduced a new list attribute that will absolutely thrill you. The attribute is data-autodividers, and it greatly improves the readability of your lists by adding alphabetical list dividers. The great news is that this attribute can work together with the data-filter to further improve your apps. So, if you employ both techniques on your list and a user types a string into the input box to filter data, the dividers will change accordingly. Of course, they still remain independent from each other. To start using this new attribute, your list view should resemble to the following.

<ul data-role="listview" data-autodividers="true" data-filter="true">
  <li><a href="#">Audero.it</a></li>
  <li><a href="#">Aurelio De Rosa</a></li>
  <li><a href="#">BuildMobile.com</a></li>
</ul>

To see in action a full example, please refer to the its demo page on the jQuery Mobile website.

Collapsible Lists

From this release onward, you’ll have collapsible lists at your disposal. Lists within lists are displayed when the parent list is tapped. Being lists, you can use all of the attributes that you already know such as data-inset, data-filter, and the previous-explained data-autodividers. You’ll now be able to show a single collapsible element or create an accordion. In case you aren’t familiar with accordions, they are sets of collapsible elements that you can create by wrapping several collapsed elements with a tag having attribute data-role="collapsible-set".

Read-only Lists

In jQuery Mobile, lists are very easy to read due to the readability enhancement made by the framework. Although they’re mainly used to list links, lists are also used to display read-only list items. In this 1.2.0 version, an aesthetic style modification now renders read-only list items using a flat background color to give the user a visual understanding that they aren’t clickable. You can see an example of this change by looking at the read-only list demo.

Deprecated Methods and Properties of the Page Loading Widget

In this version, several methods and properties of the page loading widget have been deprecated. In jQuery Mobile, you used to configure it using $.mobile properties like loadingMessage, loadingMessageTextVisible, and loadingMessageTheme. Now, they should be set using properties text, textVisible, and theme of the $.mobile.loader.prototype.options object respectively. So, the following configuration:

$.mobile.loadingMessage = "Please wait...";
$.mobile.loadingMessageTextVisible = true;
$.mobile.loadingMessageTheme = "e";

should be changed in this way:

$.mobile.loader.prototype.options.text = "Please wait...";
$.mobile.loader.prototype.options.textVisible = true;
$.mobile.loader.prototype.options.theme = "e";

Other changes have been implemented within the methods to show or hide the page loading widget. In fact, before the 1.2.0 version, developers used the $.mobile.showPageLoadingMsg() and the $.mobile.hidePageLoadingMsg() methods. They are now deprecated, so you should use $.mobile.loading("show") and $.mobile.loading("hide") instead if at all possible. Please note that using this new method, you also gain the option to overwrite the global configuration in favor of one specified passing a configuration object when you call those methods. An example of a call to show the widget using a local configuration is below.

// Show the widget using theme swatch "e",
// a custom message and setting the text visible
$.mobile.loading(
   "show",
  {
    theme: "e",
    text: "foo",
    textVisible: true
  }
);

Conclusion

Throughout this article, you’ve seen the new version’s features created by the jQuery Mobile team, including popups, minor list style improvements, and several deprecated methods and properties. Thanks to the expanded device compatibilities, you can spread even more your own applications among a greater array of operating systems and markets.

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.

jQuerymobilemobile web discussionmobile web tutorials
Share this article
Read Next
Leveraging Progressive Web Apps (PWAs) for Enhanced Mobile User Engagement
Leveraging Progressive Web Apps (PWAs) for Enhanced Mobile User Engagement
SitePoint Sponsors
10 Artificial Intelligence APIs for Developers
10 Artificial Intelligence APIs for Developers
SitePoint Sponsors
The Ultimate Guide to Navigating SQL Server With SQLCMD
The Ultimate Guide to Navigating SQL Server With SQLCMD
Nisarg Upadhyay
Retrieval-augmented Generation: Revolution or Overpromise?
Retrieval-augmented Generation: Revolution or Overpromise?
Kateryna ReshetiloOlexandr Moklyak
How to Deploy Apache Airflow on Vultr Using Anaconda
How to Deploy Apache Airflow on Vultr Using Anaconda
Vultr
Cloud Native: How Ampere Is Improving Nightly Arm64 Builds
Cloud Native: How Ampere Is Improving Nightly Arm64 Builds
Dave NearyAaron Williams
How to Create Content in WordPress with AI
How to Create Content in WordPress with AI
Çağdaş Dağ
A Beginner’s Guide to Setting Up a Project in Laravel
A Beginner’s Guide to Setting Up a Project in Laravel
Claudio Ribeiro
Enhancing DevSecOps Workflows with Generative AI: A Comprehensive Guide
Enhancing DevSecOps Workflows with Generative AI: A Comprehensive Guide
Gitlab
Creating Fluid Typography with the CSS clamp() Function
Creating Fluid Typography with the CSS clamp() Function
Daine Mawer
Comparing Full Stack and Headless CMS Platforms
Comparing Full Stack and Headless CMS Platforms
Vultr
7 Easy Ways to Make a Magento 2 Website Faster
7 Easy Ways to Make a Magento 2 Website Faster
Konstantin Gerasimov
Powerful React Form Builders to Consider in 2024
Powerful React Form Builders to Consider in 2024
Femi Akinyemi
Quick Tip: How to Animate Text Gradients and Patterns in CSS
Quick Tip: How to Animate Text Gradients and Patterns in CSS
Ralph Mason
Sending Email Using Node.js
Sending Email Using Node.js
Craig Buckler
Creating a Navbar in React
Creating a Navbar in React
Vidura Senevirathne
A Complete Guide to CSS Logical Properties, with Cheat Sheet
A Complete Guide to CSS Logical Properties, with Cheat Sheet
Ralph Mason
Using JSON Web Tokens with Node.js
Using JSON Web Tokens with Node.js
Lakindu Hewawasam
How to Build a Simple Web Server with Node.js
How to Build a Simple Web Server with Node.js
Chameera Dulanga
Building a Digital Fortress: How to Strengthen DNS Against DDoS Attacks?
Building a Digital Fortress: How to Strengthen DNS Against DDoS Attacks?
Beloslava Petrova
Crafting Interactive Scatter Plots with Plotly
Crafting Interactive Scatter Plots with Plotly
Binara Prabhanga
GenAI: How to Reduce Cost with Prompt Compression Techniques
GenAI: How to Reduce Cost with Prompt Compression Techniques
Suvoraj Biswas
How to Use jQuery’s ajax() Function for Asynchronous HTTP Requests
How to Use jQuery’s ajax() Function for Asynchronous HTTP Requests
Aurelio De RosaMaria Antonietta Perna
Quick Tip: How to Align Column Rows with CSS Subgrid
Quick Tip: How to Align Column Rows with CSS Subgrid
Ralph Mason
15 Top Web Design Tools & Resources To Try in 2024
15 Top Web Design Tools & Resources To Try in 2024
SitePoint Sponsors
7 Simple Rules for Better Data Visualization
7 Simple Rules for Better Data Visualization
Mariia Merkulova
Cloudways Autonomous: Fully-Managed Scalable WordPress Hosting
Cloudways Autonomous: Fully-Managed Scalable WordPress Hosting
SitePoint Team
Best Programming Language for AI
Best Programming Language for AI
Lucero del Alba
Quick Tip: How to Add Gradient Effects and Patterns to Text
Quick Tip: How to Add Gradient Effects and Patterns to Text
Ralph Mason
Logging Made Easy: A Beginner’s Guide to Winston in Node.js
Logging Made Easy: A Beginner’s Guide to Winston in Node.js
Vultr
How to Optimize Website Content for Featured Snippets
How to Optimize Website Content for Featured Snippets
Dipen Visavadiya
Psychology and UX: Decoding the Science Behind User Clicks
Psychology and UX: Decoding the Science Behind User Clicks
Tanya Kumari
Build a Full-stack App with Node.js and htmx
Build a Full-stack App with Node.js and htmx
James Hibbard
Digital Transformation with AI: The Benefits and Challenges
Digital Transformation with AI: The Benefits and Challenges
Priyanka Prajapat
Quick Tip: Creating a Date Picker in React
Quick Tip: Creating a Date Picker in React
Dianne Pena
How to Create Interactive Animations Using React Spring
How to Create Interactive Animations Using React Spring
Yemi Ojedapo
10 Reasons to Love Google Docs
10 Reasons to Love Google Docs
Joshua KrausZain Zaidi
How to Use Magento 2 for International Ecommerce Success
How to Use Magento 2 for International Ecommerce Success
Mitul Patel
5 Exciting New JavaScript Features in 2024
5 Exciting New JavaScript Features in 2024
Olivia GibsonDarren Jones
Tools and Strategies for Efficient Web Project Management
Tools and Strategies for Efficient Web Project Management
Juliet Ofoegbu
Choosing the Best WordPress CRM Plugin for Your Business
Choosing the Best WordPress CRM Plugin for Your Business
Neve Wilkinson
ChatGPT Plugins for Marketing Success
ChatGPT Plugins for Marketing Success
Neil Jordan
Managing Static Files in Django: A Comprehensive Guide
Managing Static Files in Django: A Comprehensive Guide
Kabaki Antony
The Ultimate Guide to Choosing the Best React Website Builder
The Ultimate Guide to Choosing the Best React Website Builder
Dianne Pena
Exploring the Creative Power of CSS Filters and Blending
Exploring the Creative Power of CSS Filters and Blending
Joan Ayebola
How to Use WebSockets in Node.js to Create Real-time Apps
How to Use WebSockets in Node.js to Create Real-time Apps
Craig Buckler
Best Node.js Framework Choices for Modern App Development
Best Node.js Framework Choices for Modern App Development
Dianne Pena
SaaS Boilerplates: What They Are, And 10 of the Best
SaaS Boilerplates: What They Are, And 10 of the Best
Zain Zaidi
Understanding Cookies and Sessions in React
Understanding Cookies and Sessions in React
Blessing Ene Anyebe
Enhanced Internationalization (i18n) in Next.js 14
Enhanced Internationalization (i18n) in Next.js 14
Emmanuel Onyeyaforo
Essential React Native Performance Tips and Tricks
Essential React Native Performance Tips and Tricks
Shaik Mukthahar
How to Use Server-sent Events in Node.js
How to Use Server-sent Events in Node.js
Craig Buckler
Five Simple Ways to Boost a WooCommerce Site’s Performance
Five Simple Ways to Boost a WooCommerce Site’s Performance
Palash Ghosh
Elevate Your Online Store with Top WooCommerce Plugins
Elevate Your Online Store with Top WooCommerce Plugins
Dianne Pena
Unleash Your Website’s Potential: Top 5 SEO Tools of 2024
Unleash Your Website’s Potential: Top 5 SEO Tools of 2024
Dianne Pena
How to Build a Chat Interface using Gradio & Vultr Cloud GPU
How to Build a Chat Interface using Gradio & Vultr Cloud GPU
Vultr
Enhance Your React Apps with ShadCn Utilities and Components
Enhance Your React Apps with ShadCn Utilities and Components
David Jaja
10 Best Create React App Alternatives for Different Use Cases
10 Best Create React App Alternatives for Different Use Cases
Zain Zaidi
Control Lazy Load, Infinite Scroll and Animations in React
Control Lazy Load, Infinite Scroll and Animations in React
Blessing Ene Anyebe
Building a Research Assistant Tool with AI and JavaScript
Building a Research Assistant Tool with AI and JavaScript
Mahmud Adeleye
Understanding React useEffect
Understanding React useEffect
Dianne Pena
Web Design Trends to Watch in 2024
Web Design Trends to Watch in 2024
Juliet Ofoegbu
Building a 3D Card Flip Animation with CSS Houdini
Building a 3D Card Flip Animation with CSS Houdini
Fred Zugs
How to Use ChatGPT in an Unavailable Country
How to Use ChatGPT in an Unavailable Country
Dianne Pena
An Introduction to Node.js Multithreading
An Introduction to Node.js Multithreading
Craig Buckler
How to Boost WordPress Security and Protect Your SEO Ranking
How to Boost WordPress Security and Protect Your SEO Ranking
Jaya Iyer
Understanding How ChatGPT Maintains Context
Understanding How ChatGPT Maintains Context
Dianne Pena
Building Interactive Data Visualizations with D3.js and React
Building Interactive Data Visualizations with D3.js and React
Oluwabusayo Jacobs
JavaScript vs Python: Which One Should You Learn First?
JavaScript vs Python: Which One Should You Learn First?
Olivia GibsonDarren Jones
13 Best Books, Courses and Communities for Learning React
13 Best Books, Courses and Communities for Learning React
Zain Zaidi
5 jQuery.each() Function Examples
5 jQuery.each() Function Examples
Florian RapplJames Hibbard
Implementing User Authentication in React Apps with Appwrite
Implementing User Authentication in React Apps with Appwrite
Yemi Ojedapo
AI-Powered Search Engine With Milvus Vector Database on Vultr
AI-Powered Search Engine With Milvus Vector Database on Vultr
Vultr
Understanding Signals in Django
Understanding Signals in Django
Kabaki Antony
Why React Icons May Be the Only Icon Library You Need
Why React Icons May Be the Only Icon Library You Need
Zain Zaidi
View Transitions in Astro
View Transitions in Astro
Tamas Piros
Getting Started with Content Collections in Astro
Getting Started with Content Collections in Astro
Tamas Piros
What Does the Java Virtual Machine Do All Day?
What Does the Java Virtual Machine Do All Day?
Peter Kessler
Become a Freelance Web Developer on Fiverr: Ultimate Guide
Become a Freelance Web Developer on Fiverr: Ultimate Guide
Mayank Singh
Layouts in Astro
Layouts in Astro
Tamas Piros
.NET 8: Blazor Render Modes Explained
.NET 8: Blazor Render Modes Explained
Peter De Tender
Mastering Node CSV
Mastering Node CSV
Dianne Pena
A Beginner’s Guide to SvelteKit
A Beginner’s Guide to SvelteKit
Erik KückelheimSimon Holthausen
Brighten Up Your Astro Site with KwesForms and Rive
Brighten Up Your Astro Site with KwesForms and Rive
Paul Scanlon
Which Programming Language Should I Learn First in 2024?
Which Programming Language Should I Learn First in 2024?
Joel Falconer
Managing PHP Versions with Laravel Herd
Managing PHP Versions with Laravel Herd
Dianne Pena
Accelerating the Cloud: The Final Steps
Accelerating the Cloud: The Final Steps
Dave Neary
An Alphebetized List of MIME Types
An Alphebetized List of MIME Types
Dianne Pena
The Best PHP Frameworks for 2024
The Best PHP Frameworks for 2024
Claudio Ribeiro
11 Best WordPress Themes for Developers & Designers in 2024
11 Best WordPress Themes for Developers & Designers in 2024
SitePoint Sponsors
Top 10 Best WordPress AI Plugins of 2024
Top 10 Best WordPress AI Plugins of 2024
Dianne Pena
20+ Tools for Node.js Development in 2024
20+ Tools for Node.js Development in 2024
Dianne Pena
The Best Figma Plugins to Enhance Your Design Workflow in 2024
The Best Figma Plugins to Enhance Your Design Workflow in 2024
Dianne Pena
Harnessing the Power of Zenserp for Advanced Search Engine Parsing
Harnessing the Power of Zenserp for Advanced Search Engine Parsing
Christopher Collins
Build Your Own AI Tools in Python Using the OpenAI API
Build Your Own AI Tools in Python Using the OpenAI API
Zain Zaidi
The Best React Chart Libraries for Data Visualization in 2024
The Best React Chart Libraries for Data Visualization in 2024
Dianne Pena
7 Free AI Logo Generators to Get Started
7 Free AI Logo Generators to Get Started
Zain Zaidi
Turn Your Vue App into an Offline-ready Progressive Web App
Turn Your Vue App into an Offline-ready Progressive Web App
Imran Alam
Clean Architecture: Theming with Tailwind and CSS Variables
Clean Architecture: Theming with Tailwind and CSS Variables
Emmanuel Onyeyaforo
How to Analyze Large Text Datasets with LangChain and Python
How to Analyze Large Text Datasets with LangChain and Python
Matt Nikonorov
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form