jQuery Mobile: Data Attributes Cheat Sheet

# Button

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

Data-attribute & DescriptionValue
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 & DescriptionValue
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 & DescriptionValue
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 & DescriptionValue
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 & DescriptionValue
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 & DescriptionValue
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 & DescriptionValue
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 & DescriptionValue
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 & DescriptionValue
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 & DescriptionValue
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 & DescriptionValue
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 & DescriptionValue
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 & DescriptionValue
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 & DescriptionValue
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 & DescriptionValue
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 & DescriptionValue
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 & DescriptionValue
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 & DescriptionValue
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 & DescriptionValue
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 & DescriptionValue
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 & DescriptionValue
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)

Leave a Reply

Your email address will not be published. Required fields are marked *