Data Attribute

Home

Button

Links with data-role="button" or input-based buttons, or button elements

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

Checkbox

Pairs of labels and inputs with type="checkbox"

data-role none (prevents auto-enhancement to use native control)
data-theme swatch letter (a-z) - Added to the form element

Collapsible

Wrap a heading and content in a container with the data-role="collapsible"

data-collapsed true | false
data-content-theme swatch letter (a-z)
data-theme swatch letter (a-z)

Collapsible set

Wrap a number of collapsibles in a container with the data-role="collapsible-set"

data-content-theme swatch letter (a-z) - Sets all collapsibles in set
data-theme swatch letter (a-z) - Sets all collapsibles in set

Content

Container with data-role="content"

data-theme swatch letter (a-z)

Footer

Container with data-role="footer"

data-id string (unique id, useful in persistent footers)
data-position fixed
data-theme swatch letter (a-z)

Fieldcontainer

Container around label/form element with data-role="fieldcontain"

Flip Switch

Select with data-role="slider", two options only

data-role none (prevents auto-enhancement to use native control)
data-theme swatch letter (a-z) - Added to the form element

Header

Container with data-role="header"

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-position fixed
data-theme swatch letter (a-z)
data-title string (title used when page is shown)

Link

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

Listview

OL or UL with data-role="listview"

data-count-theme swatch letter (a-z)
data-dividertheme 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-theme swatch letter (a-z)

Listview item

LI within a listview

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

Page

Container with data-role="page" or "dialog"

data-close-btn-text string (text for the close button, dialog only)
data-dom-cache true | false
data-id string (unique id for the page)
data-fullscreen true | false (used in conjunction with fixed toolbars)
data-theme swatch letter (a-z)
data-title string (title used when page is shown)

Radio button

Pairs of labels and inputs with type="radio"

data-role none (prevents auto-enhancement to use native control)
data-theme swatch letter (a-z) - Added to the form element

Select

A select form element

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-native-menu true | false
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.

Slider

Input type="range"

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

Text input & Textarea

Input type="text|number|search|etc." or a textarea

data-role none (prevents auto-enhancement to use native control)
data-theme swatch letter (a-z) - Added to the form element