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 LIs 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