A Guide to jQuery Mobile Custom Data Attributes

Let’s start the exploration of the custom data attributes with the most important one: data-role.

Designating an Element’s Role

The data-role attribute assigns the role that an HTML element plays in the jQuery Mobile framework. Page blocks have a data-role of page; a page block’s main content is in a <div> that has a data-role of content, and so on. Table 6.1 lists the data-role values and describes their meaning.