The jQuery Mobile framework uses HTML5 data- attributes to allow for markup-based initialization and configuration of widgets. These attributes are completely optional; calling plugins manually and passing options directly is also supported. To avoid naming conflicts with other plugins or frameworks that also use data- attributes, set a custom namespace by modifying the ns global option.
Links with data-role="button". Input-based buttons and button elements are auto-enhanced, no data-role required
| data-corners | true | false |
|---|---|
| data-icon | home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search |
| data-iconpos | left | right | top | bottom | notext |
| data-iconshadow | true | false |
| data-inline | true | false |
| data-mini | true | false - Compact sized version |
| data-shadow | true | false |
| data-theme | swatch letter (a-z) |
Multiple buttons can be wrapped in a container with a data-role="controlgroup" attribute for a vertically grouped set. Add the data-type="horizontal" attribute for the buttons to sit side-by-side.
Pairs of labels and inputs with type="checkbox" are auto-enhanced, no data-role required
| data-mini | true | false - Compact sized version |
|---|---|
| data-role | none (prevents auto-enhancement to use native control) |
| data-theme | swatch letter (a-z) - Added to the form element |
A heading and content wrapped in a container with the data-role="collapsible"
| data-collapsed | true | false |
|---|---|
| data-content-theme | swatch letter (a-z) |
| data-iconpos | left | right | top | bottom | notext |
| data-mini | true | false - Compact sized version |
| data-theme | swatch letter (a-z) |
A number of collapsibles wrapped in a container with the data-role="collapsible-set"
| data-content-theme | swatch letter (a-z) - Sets all collapsibles in set |
|---|---|
| data-iconpos | left | right | top | bottom | notext |
| data-mini | true | false - Compact sized version |
| data-theme | swatch letter (a-z) - Sets all collapsibles in set |
Container with data-role="content"
| data-theme | swatch letter (a-z) |
|---|
Page with data-role="page" linked to with data-rel="dialog" on the anchor.
| data-close-btn-text | string (text for the close button, dialog only) |
|---|---|
| data-dom-cache | true | false |
| data-overlay-theme | swatch letter (a-z) - overlay theme when the page is opened in a dialog |
| data-theme | swatch letter (a-z) |
| data-title | string (title used when page is shown) |
Container with data-enhance="false" or data-ajax="false"
| data-enhance | true | false |
|---|---|
| data-ajax | true | false |
Any DOM elements inside a data-enhance="false" container, save for data-role="page|dialog" elements, will be ignored during initial enhancement and subsequent create events provided that the $.mobile.ignoreContentEnabled flag is set prior to the enhancement (eg in a mobileinit binding).
Any link or form elements inside data-enhance="false" containers will be ignored by the framework's navigation functionality when $.mobile.ignoreContentEnabled is set to true.
Container with data-role="fieldcontain" wrapped around label/form element pair
Select with data-role="slider", two options only
| data-mini | true | false - Compact sized version |
|---|---|
| data-role | none (prevents auto-enhancement to use native control) |
| data-theme | swatch letter (a-z) - Added to the form element |
| data-track-theme | swatch letter (a-z) - Added to the form element |
Container with data-role="footer"
| data-id | string (unique id, useful in persistent footers) |
|---|---|
| data-position | fixed |
| data-fullscreen | true (used in conjunction with fixed toolbars) |
| data-theme | swatch letter (a-z) |
Container with data-role="header"
| data-position | fixed |
|---|---|
| data-fullscreen | true (used in conjunction with fixed toolbars) |
| data-theme | swatch letter (a-z) |
Links, including those with a data-role="button", and form submit buttons share these attributes
| data-ajax | true | false |
|---|---|
| data-direction | reverse (reverse page transition animation) |
| data-dom-cache | true | false |
| data-prefetch | true | false |
| data-rel | back (to move one step back in history) dialog (to open link styled as dialog, not tracked in history) external (for linking to another domain) |
| data-transition | slide | slideup | slidedown | pop | fade | flip |
OL or UL with data-role="listview"
| data-count-theme | swatch letter (a-z) | |
|---|---|---|
| data-divider-theme | swatch letter (a-z) | |
| data-filter | true | false | |
| data-filter-placeholder | string | |
| data-filter-theme | swatch letter (a-z) | |
| data-inset | true | false | |
| data-split-icon | home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search | |
| data-split-theme | swatch letter (a-z) | |
| data-theme | swatch letter (a-z) |
LI within a listview
| data-filtertext | string (filter by this value instead of inner text) |
|---|---|
| data-icon | home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search |
| data-role | list-divider |
| data-theme | swatch letter (a-z) - can also be set on individual LIs |
A number of LIs wrapped in a container with data-role="navbar"
| data-icon | home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search |
|---|---|
| data-iconpos | left | right | top | bottom | notext |
| data-theme | swatch letter (a-z) - can also be set on individual LIs |
Container with data-role="page"
| data-add-back-btn | true | false (auto add back button, header only) |
|---|---|
| data-back-btn-text | string |
| data-back-btn-theme | swatch letter (a-z) |
| data-close-btn-text | string (text for the close button, dialog only) |
| data-dom-cache | true | false |
| data-fullscreen | true (used in conjunction with fixed toolbars) |
| data-overlay-theme | swatch letter (a-z) - overlay theme when the page is opened in a dialog |
| data-theme | swatch letter (a-z) |
| data-title | string (title used when page is shown) |
Pairs of labels and inputs with type="radio" are auto-enhanced, no data-role required
| data-mini | true | false - Compact sized version |
|---|---|
| data-role | none (prevents auto-enhancement to use native control) |
| data-theme | swatch letter (a-z) - Added to the form element |
All select form elements are auto-enhanced, no data-role required
| data-icon | home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search |
|---|---|
| data-iconpos | left | right | top | bottom | notext |
| data-inline | true | false |
| data-mini | true | false - Compact sized version |
| data-native-menu | true | false |
| data-overlay-theme | swatch letter (a-z) - overlay theme for non-native selects |
| data-placeholder | true | false - Add to the Option |
| data-role | none (prevents auto-enhancement to use native control) |
| data-theme | swatch letter (a-z) - Added to the form element |
Multiple selects can be wrapped in a fieldset with a data-role="controlgroup" attribute for a vertically grouped set. Add the data-type="horizontal" attribute for the selects to sit side-by-side.
Inputs with type="range" are auto-enhanced, no data-role required
| data-highlight | true | false - Adds an active state fill on track to handle |
|---|---|
| data-mini | true | false - Compact sized version |
| data-role | none (prevents auto-enhancement to use native control) |
| data-theme | swatch letter (a-z) - Added to the form element |
| data-track-theme | swatch letter (a-z) - Added to the form element |
Input type="text|number|search|etc." or textarea elements are auto-enhanced, no data-role required
| data-mini | true | false - Compact sized version |
|---|---|
| data-role | none (prevents auto-enhancement to use native control) |
| data-theme | swatch letter (a-z) - Added to the form element |