jQuery Mobile: Data-role

This entry is part 6 of 73 in the series jQuery Mobile

The jQuery Mobile framework uses HTML5 data- attributes to allow for initialization and configuration of widgets.

Example widgets are:

  1. button,
  2. page,
  3. header and
  4. footer etc.

In the previous example, we already have some of these attributes for the data-role.

<div data-role='page'>
    <div data-role='header'><h1>My Mobile App</h1></div>
    <div data-role='content'>
        <p>Look at the button!</p>
        <a href='#' data-role='button'>I am a button</a>
The attribute definitions
  • The data-role=’page’ is the page displayed in the browser
  • The data-role=’header’ creates a toolbar at the top of the page
  • The data-role=’content’ where the main content of the page is located
  • The data-role=’button’ defines a button

The full data attributes are defined in this page.

Series Navigation<< jQuery Mobile: First simple button example
jQuery Mobile: Link to a page >>