Data Attributes
Data attribute reference
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.
Button
Links with data-role="button"
. Input-based buttons, links in toolbars and button elements are auto-enhanced, no data-role
required.
data-corners | true | false |
---|---|
data-icon | home | delete | plus | arrow-u | arrow-d | carat-l | carat-t | carat-r | carat-b | 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 Deprecated as of 1.4.0 and will be removed in 1.5.0. |
data-inline | true | false |
data-mini | true | false - Compact sized version |
data-shadow | true | false |
data-theme | swatch letter (a-z) |
Checkbox
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 |
Collapsible
A heading and content wrapped in a container with the data-role="collapsible"
data-collapsed | true | false |
---|---|
data-collapse-cue-text | string - Text used to provide audible feedback for users with screen reader software. Default: " click to collapse contents" |
data-collapsed-icon | home | delete | plus | arrow-u | arrow-d | carat-l | carat-t | carat-r | carat-b | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search | false |
data-content-theme | swatch letter (a-z) |
data-expand-cue-text | string - Text used to provide audible feedback for users with screen reader software. Default: " click to expand contents" |
data-expanded-icon | home | delete | plus | arrow-u | arrow-d | carat-l | carat-t | carat-r | carat-b| check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search |
data-iconpos | left | right | top | bottom |
data-inset | true | false |
data-mini | true | false - Compact sized version |
data-theme | swatch letter (a-z) |
Collapsible set
A number of collapsibles wrapped in a container with the data-role="collapsibleset"
data-collapsed-icon | home | delete | plus | arrow-u | arrow-d | carat-l | carat-t | carat-r | carat-b| check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search |
---|---|
data-content-theme | swatch letter (a-z) - Sets all collapsibles in set |
data-expanded-icon | home | delete | plus | arrow-u | arrow-d | carat-l | carat-t | carat-r | carat-b| check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search |
data-iconpos | left | right | top | bottom | notext |
data-inset | true | false |
data-mini | true | false - Compact sized version |
data-theme | swatch letter (a-z) - Sets all collapsibles in set |
Content
Note: Deprecated as of 1.4.0 and will be removed in 1.5.0.
Container with data-role="content"
data-theme | swatch letter (a-z) |
---|
Controlgroup
DIV or FIELDSET container with data-role="controlgroup"
. Visually integrate multiple button-styled elements.
data-exclude-invisible | true | false - Sets whether to exclude invisible children in the assignment of rounded corners |
---|---|
data-mini | true | false - Compact sized version for all items in the controlgroup |
data-theme | swatch letter (a-z) |
data-type | horizontal | vertical - For horizontal or vertical item alignment |
Dialog
Container with data-role="dialog"
or linked to with data-rel="dialog"
on the anchor.
data-close-btn | left | right | none |
---|---|
data-close-btn-text | string - Text for the close button, dialog only. Default: "close" |
data-corners | true | false |
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 |
Enhancement
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 element inside data-ajax="false"
containers will be ignored by the framework's navigation functionality when $.mobile.ignoreContentEnabled
is set to true.
Field container
Container with data-role="fieldcontain"
wrapped around label/form element pair
Note: data-role="fieldcontain"
is deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0. Add class ui-field-contain
instead.
Flip toggle switch
Select with data-role="slider"
and two option
element
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 |
Link
Links, including those with a data-role="button"
, and form submit buttons share these attributes
data-ajax | true | false |
---|---|
data-direction | reverse - Reverse transition animation (only for page or dialog) |
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 popup - For opening a popup |
data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none |
data-position-to |
origin - Centers the popup over the link that opens it jQuery selector - Centers the popup over the specified element window - Centers the popup in the window Note: option only available when used with popups. See also: options. |
Listview
OL
or UL
with data-role="listview"
data-autodividers | true | false |
---|---|
data-count-theme | swatch letter (a-z) - Default "null", inherited from parent Deprecated as of 1.4.0 and will be removed in 1.5.0. |
data-divider-theme | swatch letter (a-z) - Default "null", inherited from parent |
data-filter | true | false |
data-filter-placeholder | string |
data-filter-theme | swatch letter (a-z) |
data-header-theme | swatch letter (a-z) |
data-icon | home | delete | plus | arrow-u | arrow-d | carat-l | carat-t | carat-r | carat-b| check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search | false |
data-inset | true | false |
data-split-icon | home | delete | plus | arrow-u | arrow-d | carat-l | carat-t | carat-r | carat-b| check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search |
data-split-theme | swatch letter (a-z) - Default "null", inherited from parent |
data-theme | swatch letter (a-z) |
Listview item
LI
within a listview
data-filtertext | string - Filter by this value instead of inner text |
---|---|
data-icon | home | delete | plus | arrow-u | arrow-d | carat-l | carat-t | carat-r | carat-b| check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search | false |
data-role | list-divider |
data-theme | swatch letter (a-z) |
The data-icon
attribute is only applicable for a listview item if it contains a link.
Navbar
A number of LI
s wrapped in a container with data-role="navbar"
data-iconpos | left | right | top | bottom | notext |
---|
To add icons to the navbar items, the data-icon
attribute is used, specifying a standard mobile icon for each item.
Navbars inherit the theme-swatch from their parent container. Setting the data-theme
attribute to a navbar is not supported. The data-theme
attribute can be set individually to the links inside a navbar.
Page
Container with data-role="page"
data-dom-cache | true | false |
---|---|
data-overlay-theme | swatch letter (a-z) - Overlay theme when the page is opened as a dialog |
data-theme | swatch letter (a-z) - Default "a" |
data-title | string - Title used when page is shown |
data-url | url - Value for updating the URL, instead of the url used to request the page. The value of this attribute should not be URI-encoded. If your path or filename contains apostrophes or quotation marks, use entity encoding in the value, rather than URL encoding. For example, data-url="/path/to/"Devil's Advocate".html"
|
Popup
Container with data-role="popup"
data-corners | true | false |
---|---|
data-dismissible | true | false - If set to false prevents popup closing by clicking outside of the popup or pressing the Escape key |
data-history | true | false - Sets whether the popup creates a browser history item when it opens. If set to false, it will not create a history item, and will thus not be closeable via the browser's "Back" button. |
data-overlay-theme | swatch letter (a-z) - Default "null" (transparent background) |
data-position-to | origin | window | selector - "origin" indicates that the popup is to be centered over the link that opens it. "window" indicates that it is to be centered in the browser window. If you give a jQuery selector, it will be centered over the first element returned by the selector, if that element is visible. Otherwise, it will be centered in the browser window. |
data-shadow | true | false |
data-theme | swatch letter (a-z) | none - Default inherited, "none" sets the popup to transparent |
data-tolerance | 30,15,30,15 - Distance from the edges of the window (top, right, bottom, left) |
data-transition | none | transition - The transition to use when making the popup appear/disappear. |
Anchor with a data-rel="popup"
opens the popup
data-position-to |
origin - Centers the popup over the link that opens it jQuery selector - Centers the popup over the specified element window - Centers the popup in the window |
---|---|
data-rel | popup - For opening a popup |
data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none - The transition to be used when showing/hiding the popup |
Radio button
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 |
Selectmenu
All select
form elements are auto-enhanced, no data-role
required
data-divider-theme | swatch letter (a-z) - Default "b" - Only applicable if optgroup support is used in non-native selects |
---|---|
data-icon | home | delete | plus | arrow-u | arrow-d | carat-l | carat-t | carat-r | carat-b | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search | false |
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 - Can be set on option element of a non-native select |
data-role | none - Prevents auto-enhancement to use native control |
data-theme | swatch letter (a-z) - Added to the form element |
Slider
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 |
Textinput
Input type="text|number|search|etc."
or textarea
elements are auto-enhanced, no data-role
required
data-clear-btn | true | false - Adds a clear button |
---|---|
data-clear-btn-text | string - Text for the close button. Default: "clear text" |
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 |
Toolbar
Container with data-role="header"
or data-role="footer"
data-add-back-btn | true | false - Auto add back button, header only |
---|---|
data-back-btn-text | string - Header only |
data-back-btn-theme | swatch letter (a-z) - Header only |
data-id | string - Unique ID. Required for persistent footers |
data-position | fixed |
data-theme | swatch letter (a-z) |
Fixed toolbar
Container with data-role="header"
or data-role="footer"
plus the attribute data-position="fixed"
data-disable-page-zoom | true | false - User-scaling-ability for pages with fixed toolbars |
---|---|
data-fullscreen | true | false - Setting toolbars over the page-content |
data-tap-toggle | true | false - Ability to toggle toolbar-visibility on user tap/click |
data-transition | slide | fade | none - Transition used when showing/hiding the toolbar |
data-update-page-padding | true | false - Have the page top and bottom padding updated on resize, transition, "updatelayout" events (the framework always updates the padding on the "pageshow" event). |
data-visible-on-page-show | true | false - Toolbar-visibility when parent page is shown |
Please login to continue.