jQuery Mobile: Up and Running

Utilities

jQuery Mobile provides lot of utilities for managing our application from JavaScript. Utilities are provided by methods and read-only attributes that will allow us to create better experiences from JavaScript.

Data-* Utilities

When using jQuery Mobile, it’s common to manipulate data-* custom attributes extensively. For example, if we are trying to get a collection of buttons on the page, we can use jQuery:

var buttons = $("a[data-role=button"]);

jQuery Mobile adds a new jQuery Mobile filter called jqmData that also applies a namespace if we are using one. It’s safer and easy to change the previous code with:

var buttons = $("a:jqmData(role='button')");

jqmData and jqmRemoveData should also be used instead of the typical jQuery functions data and removeData on a jQuery collection object, for example:

$("a").jqmRemoveData("transition");
$("#button1").jqmData("theme", "a");

Page Utilities

If we need to access the current page, jQuery Mobile provides the $.mobile.activePage attribute that is automatically linked to the current visible data-role="page" element. This property is linked to the jQuery DOM object (usually a div element):

var currentPageId = $.mobile.activePage.id;

We can access the current page container (usually the body element) with the $.mobile.pageContainer attribute.

The most useful utility on the framework is the $.mobile.changePage method. It allows us to transition to another page as if the user clicked a link. We can use this method to show both internal and external ...