jQuery Mobile: Data Attributes Cheat Sheet

# Button

Use the ui-btn attribute instead of using data-role = "button" attribute.

Data-attribute & Description	Value
data-corners It defines whether the button should contain rounded corners or not.	true | false
data-icon It defines the icon of the button.	Default is no icon
data-iconpos It defines the position of the icon.	left | right | top | bottom
data-iconshadow It defines whether the icon of the button should contain shadow or not.	true | false
data-inline It defines whether the button should be inline or not.	true | false
data-mini It defines whether the button should display in a smaller size or regular size.	true | false
data-shadow It defines whether the button should contain shadow or not.	true | false
data-theme It displays the theme color for the button.	letter (a-z)

# Checkbox

Following table lists the checkbox elements used with type = "checkbox".

Data-attribute & Description	Value
data-mini It defines whether the checkbox should display in a smaller size or regular size.	true | false
data-role It stops the styling of checkboxes as buttons.	none
data-theme It displays the theme color for the checkbox.	letter (a-z)

# Collapsible

Following table lists, collapsible elements used with data-role = "collapsible" attribute.

Data-attribute & Description	Value
data-collapsed It indicates whether the content should be closed or expanded.	true | false
data-collapsed-cue-text It displays feedback for users with screen reader software.	Default is collapsing content
data-collapsed-icon It defines the icon of the collapsible button.	Default icon is “plus”
data-content-theme It displays the theme color for the collapsible content.	letter (a-z)
data-expanded-cue-text It displays feedback for users with screen reader software.	Default is expanding content
data-expanded-icon It displays the collapsible button when you expand the content.	Default icon is “minus”
data-iconpos It defines the position of the icon.	left | right | top | bottom
data-inset It defines whether the collapsible button should display with rounded corners and margin or not.	true | false
data-mini It defines whether the collapsible buttons should display in a smaller size or regular size.	true | false
data-theme It displays the theme color for the collapsible button.	letter (a-z)

# Collapsible Set

Following table lists the collapsible set elements used with the data-role = "collapsibleset" attribute.

Data-attribute & Description	Value
data-collapsed-icon It defines the icon of the collapsible button.	Default icon is “plus”
data-content-theme It displays the theme color for the collapsible content.	letter (a-z)
data-expanded-icon It displays the collapsible button when you expand the content.	Default icon is “minus”
data-iconpos It defines the position of the icon.	left | right | top | bottom
data-inset It defines whether the collapsible button should display with rounded corners and margin or not.	true | false
data-mini It defines whether the collapsible buttons should display in a smaller size or regular size.	true | false
data-theme It displays the theme color for the collapsible button.	letter (a-z)

# Control group

Following table lists Controlgroup elements used with data-role = "controlgroup" attribute

Data-attribute & Description	Value
data-exclude-invisible It defines whether to exclude invisible children in the assignment of rounded corners.	true | false
data-mini It defines whether the group should display in a smaller size or regular size.	true | false
data-theme It displays the theme color for the control group.	letter (a-z)
data-type It indicates whether the group should display in a horizontal or vertical format.	horizontal | vertical

# Dialog

Following table lists dialog elements used with data-dialog="true" attribute.

Data-attribute & Description	Value
data-close-btn It defines the position of the close button.	left | right | none
data-close-btn-text It defines the text for the close button.	text
data-corners It defines whether dialog should display with rounded corners or not.	true | false
data-dom-cache It indicates whether the DOM cache must clear or not for individual pages.	true | false
data-overlay-theme It defines the overlay color of the dialog page.	letter (a-z)
data-theme It defines the theme color of the dialog page.	letter (a-z)
data-title It defines the title of the dialog page.	text

# Enhancement

Following table lists enhancement elements used with data-enhance="false" or data-ajax = "false" attribute.

Data-attribute & Description	Value
data-enhance You can style the page by setting this attribute to “true”. You cannot style the page if it is set to “false”.	true | false
data-ajax It indicates whether pages must load from Ajax or not.	true | false

# Fixed Toolbar

Following table lists the toolbar elements used with data-position = "fixed" attribute.

Data-attribute & Description	Value
data-disable-page-zoom It defines whether the user is able to scale/zoom the page or not.	true | false
data-fullscreen It defines toolbars must be positioned at the top and/or bottom.	true | false
data-tap-toggle It indicates whether the user can toggle toolbar-visibility on taps or not.	true | false
data-transition It shows a transition effect when you tap or click the element.	slide | fade | none
data-update-page-padding It updates the padding of the page by using resize, transition, and update layout events.	true | false
data-visible-on-page-show It defines toolbar-visibility when the parent page is shown.	true | false

# Flip Toggle Switch

Following table lists the flip toggle elements used with data-role = "flipswitch" attribute −

Data-attribute & Description	Value
data-mini It defines whether the switch should display in a smaller size or regular size.	true | false
data-on-text It defines the “on” text on the flip switch.	Default is “on”
data-off-text It defines the “off” text on the flip switch.	Default is “off”

# Footer

The following table lists footer elements used with data-role="footer" attribute −

Data-attribute & Description	Value
data-id It defines the unique ID.	text
data-position It defines whether the footer should be positioned at the bottom or inline with page content.	inline | fixed
data-fullscreen It defines whether the footer should be positioned at the bottom and over the page content or not.	true | false
data-theme It defines the theme color of the footer.	letter (a-z)

# Header

Following table lists the header elements used with data-role = "header" attribute.

Data-attribute & Description	Value
data-id It defines the unique ID.	text
data-position It defines whether the header should be positioned at the bottom or inline with the page content.	inline | fixed
data-fullscreen It defines whether the header should be positioned at the bottom and over the page content or not.	true | false
data-theme It defines the theme color of the header.	letter (a-z)

# Inputs

Following table lists the input elements used with type = "text|search|etc" attribute.

Data-attribute & Description	Value
data-clear-btn It defines whether the input element should contain a clear button or not.	true | false
data-clear-btn-text It defines the text for the clear button.	text
data-mini It defines whether the input should display in a smaller size or regular size.	true | false
data-role It stops styling input or text areas as buttons.	none
data-theme It defines the theme color of the input element.	letter (a-z)

# Link

Data-attribute & Description	Value
data-ajax It indicates whether the pages must be loaded through Ajax or not.	true | false
data-direction It is used for reverse transition.	reverse
data-dom-cache It indicates whether jQuery DOM cache must be clear or not for pages.	true | false
data-prefetch It is used to prefetch the pages into DOM.	true | false
data-rel It specifies the behavior of the link.	back | dialog | external | popup
data-transition It defines the transition from one page to another.	fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none
data-position-to It defines the position of the popup boxes.	origin | jQuery selector | window

# List

Following table shows the list elements used with data-role = "listview" attribute.

Data-attribute & Description	Value
data-autodividers It divides the list automatically.	true | false
data-count-theme It defines the theme color of the count element.	letter (a-z)
data-divider-theme It defines the theme color for list dividers.	letter (a-z)
data-filter It is used to filter the list values in the search box.	true | false
data-filter-placeholder It defines some text inside the search box.	text
data-filter-theme It defines the theme color for the search filter.	letter (a-z)
data-icon It provides the icon for the list.	Default is no icon
data-inset It defines whether the list should display with rounded corners and margin or not.	true | false
data-split-icon It defines the icon for the split button.	The default icon is “arrow-r”
data-split-theme It defines the theme color for the split button.	letter (a-z)
data-theme It defines the theme color for the list.	letter (a-z)

# List Item

Following table shows list item elements used with data-role = "listview" attribute.

Data-attribute & Description	Value
data-filtertext It is used to filter the list values using the text in the search box.	text
data-icon It provides the icon for the list item.	Default is no icon
data-role It defines the divider for list items.	list-divider
data-theme It defines the theme color for the list item.	letter (a-z)

# Navbar

Following table lists the navbar elements used with data-role = "navbar" attribute.

Data-attribute & Description	Value
data-icon It provides the icon for the list item.	Default is no icon
data-iconpos It defines the position for the icon.	left | right | top | bottom | notext

# Page

Following table lists the page elements used with data-role = "page" attribute.

Data-attribute & Description	Value
data-dom-cache It indicates whether the DOM cache must clear or not for individual pages.	true | false
data-overlay-theme It defines the overlay color of the dialog pages.	letter (a-z)
data-theme It defines theme color for the page.	letter (a-z)
data-title It provides the title for the page.	Default is no icon
data-url It is used to updating the URL.	url

# Popup

Following table lists the popup elements used with data-role = "popup" attribute.

Data-attribute & Description	Value
data-corners It defines whether the popup should display with rounded corners and margin or not.	true | false
data-dismissibleIt defines the whether popup should be close by clicking outside or not.	true | false
data-history It defines whether popup should display the history of item when opened.	true | false
data-overlay-theme It defines the overlay color of the popup box.	letter (a-z)
data-shadow It displays the shadow for the popup box.	true | false
data-theme It defines theme color for the popup box.	letter (a-z)
data-tolerance It defines the edges of the window.	30, 15, 30, 15

# Radio Button

Following table lists the radio button elements used with type = "radio" attribute.

Data-attribute & Description	Value
data-mini It defines whether the button should display in a smaller size or regular size.	true | false
data-role It stops the styling of radio buttons as enhanced buttons.	none
data-theme It defines the theme color for the radio button.	letter (a-z)

# Select

Data-attribute & Description	Value
data-icon It provides the icon for the select element.	Default is “arrow-d”
data-iconpos It defines the position of the icon.	left | right | top | bottom
data-inline It defines whether the button should be inline or not.	true | false
data-mini It defines whether select should display in a smaller size or regular size.	true | false
data-native-menu It use a custom menu when it has been set to false.	true | false
data-overlay-theme It defines the overlay color for the custom select menu.	letter (a-z)
data-placeholder It is used to set an option element of non-native selection.	true | false
data-role It stops the styling of select elements as buttons.	none
data-theme It displays the theme color for the select elements.	letter (a-z)

# Slider

Following table lists the slider elements used with type = "range" attribute.

Data-attribute & Description	Value
data-highlight It highlights the slider.	true | false
data-mini It defines whether the slider should display in a smaller size or regular size.	true | false
data-role It stops the styling of slider controls like buttons.	none
data-theme It displays the theme color for the slider control.	letter (a-z)
data-track-theme It displays the theme color for the slider track.	letter (a-z)