data-attribute.html

<script>{
	"title": "Data Attributes",
	"excerpt": "A list of the data-attributes used by jQuery Mobile.",
	"termSlugs": {
		"category": [ "reference" ]
	}
}
</script>

<h2>Data attribute reference</h2>
<p>The jQuery Mobile framework uses HTML5 <code>data-</code> 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 <code>data-</code> attributes, set a custom namespace by modifying the <a href="global-config"><code>ns</code> global option</a>.</p>

<h2><a href="../button/">Button</a></h2>
<p>Links with <code>data-role="button"</code>. Input-based buttons, links in toolbars and button elements are auto-enhanced, no <code>data-role</code> required.</p>
<table class="column-headers">
	<tr>
		<th>data-corners</th>
		<td><strong>true</strong> | false</td>
	</tr>
	<tr>
		<th>data-icon</th>
		<td>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</td>
	</tr>
	<tr>
		<th>data-iconpos</th>
		<td><strong>left</strong> | right | top | bottom | notext</td>
	</tr>
	<tr>
		<th>data-iconshadow</th>
		<td><strong>true</strong> | false</td>
	</tr>
	<tr>
		<th>data-inline</th>
		<td>true | <strong>false</strong></td>
	</tr>
	<tr>
		<th>data-mini</th>
		<td>true | <strong>false</strong> - Compact sized version</td>
	</tr>
	<tr>
		<th>data-shadow</th>
		<td><strong>true</strong> | false</td>
	</tr>
	<tr>
		<th>data-theme</th>
		<td>swatch letter (a-z)</td>
	</tr>
</table>

<h2><a href="../checkboxradio/">Checkbox</a></h2>
<p>Pairs of labels and inputs with <code>type="checkbox"</code> are auto-enhanced, no <code>data-role</code> required</p>
<table class="column-headers">
	<tr>
		<th>data-mini</th>
		<td>true | <strong>false</strong> - Compact sized version</td>
	</tr>
	<tr>
		<th>data-role</th>
		<td>none - Prevents auto-enhancement to use native control</td>
	</tr>
	<tr>
		<th>data-theme</th>
		<td>swatch letter (a-z) - Added to the form element</td>
	</tr>
</table>

<h2><a href="../collapsible/">Collapsible</a></h2>
<p>A heading and content wrapped in a container with the <code>data-role="collapsible"</code></p>
<table class="column-headers">
	<tr>
		<th>data-collapsed</th>
		<td><strong>true</strong> | false</td>
	</tr>
	<tr>
		<th>data-collapse-cue-text</th>
		<td>string - Text used to provide audible feedback for users with screen reader software. Default: " click to collapse contents"</td>
	</tr>
	<tr>
		<th>data-collapsed-icon</th>
		<td>home | delete | <strong>plus</strong> | 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</td>
	</tr>
	<tr>
		<th>data-content-theme</th>
		<td>swatch letter (a-z)</td>
	</tr>
	<tr>
		<th>data-expand-cue-text</th>
		<td>string - Text used to provide audible feedback for users with screen reader software. Default: " click to expand contents"</td>
	</tr>
	<tr>
		<th>data-expanded-icon</th>
		<td>home | delete | plus | arrow-u | arrow-d | carat-l | carat-t | carat-r | carat-b| check | gear | grid | star | custom | arrow-r | arrow-l | <strong>minus</strong> | refresh | forward | back | alert | info | search</td>
	</tr>
	<tr>
		<th>data-iconpos</th>
		<td><strong>left</strong> | right | top | bottom</td>
	</tr>
	<tr>
		<th>data-inset</th>
		<td><strong>true</strong> | false</td>
	</tr>
	<tr>
		<th>data-mini</th>
		<td>true | <strong>false</strong> - Compact sized version</td>
	</tr>
	<tr>
		<th>data-theme</th>
		<td>swatch letter (a-z)</td>
	</tr>
</table>
<p></p>

<h2><a href="../collapsibleset/">Collapsible set</a></h2>
<p>A number of collapsibles wrapped in a container with the <code>data-role="collapsibleset"</code></p>
<table class="column-headers">
	<tr>
		<th>data-collapsed-icon</th>
		<td>home | delete | <strong>plus</strong> | 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</td>
	</tr>
	<tr>
		<th>data-content-theme</th>
		<td>swatch letter (a-z) - Sets all collapsibles in set</td>
	</tr>
	<tr>
		<th>data-expanded-icon</th>
		<td>home | delete | plus | arrow-u | arrow-d | carat-l | carat-t | carat-r | carat-b| check | gear | grid | star | custom | arrow-r | arrow-l | <strong>minus</strong> | refresh | forward | back | alert | info | search</td>
	</tr>
	<tr>
		<th>data-iconpos</th>
		<td><strong>left</strong> | right | top | bottom |  notext</td>
	</tr>
	<tr>
		<th>data-inset</th>
		<td><strong>true</strong> | false</td>
	</tr>
	<tr>
		<th>data-mini</th>
		<td>true | <strong>false</strong> - Compact sized version</td>
	</tr>
	<tr>
		<th>data-theme</th>
		<td>swatch letter (a-z) - Sets all collapsibles in set</td>
	</tr>
</table>
<p></p>

<h2>Content</h2>
<p><strong>Deprecated as of 1.4.0 and will be removed in 1.5.0.</strong></p>
<p>Container with <code>data-role="content"</code></p>
<table class="column-headers">
	<tr>
		<th>data-theme</th>
		<td><strong>Deprecated as of 1.4.0 and will be removed in 1.5.0.</strong> swatch letter (a-z)</td>
	</tr>
</table>
<p></p>

<h2><a href="../controlgroup/">Controlgroup</a></h2>
<p>DIV or FIELDSET container with <code>data-role="controlgroup"</code>. Visually integrate multiple button-styled elements.</p>
<table class="column-headers">
	<tr>
		<th>data-exclude-invisible</th>
		<td><strong>true</strong> | false - Sets whether to exclude invisible children in the assignment of rounded corners</td>
	</tr>
	<tr>
		<th>data-mini</th>
		<td>true | <strong>false</strong> - Compact sized version for all items in the controlgroup</td>
	</tr>
	<tr>
		<th>data-theme</th>
		<td>swatch letter (a-z)</td>
	</tr>
	<tr>
		<th>data-type</th>
		<td>horizontal | <strong>vertical</strong> - For horizontal or vertical item alignment</td>
	</tr>
</table>
<p></p>

<h2><a href="../dialog/">Dialog</a></h2>
<p>Container with <code>data-role="dialog"</code> or linked to with <code>data-rel="dialog"</code> on the anchor.</p>
<table class="column-headers">
	<tr>
		<th>data-close-btn</th>
		<td><strong>left</strong> | right | none</td>
	</tr>
	<tr>
		<th>data-close-btn-text</th>
		<td>string - Text for the close button, dialog only. Default: <strong>"close"</strong></td>
	</tr>
	<tr>
		<th>data-corners</th>
		<td><strong>true</strong> | false</td>
	</tr>
	<tr>
		<th>data-dom-cache</th>
		<td>true | <strong>false</strong></td>
	</tr>
	<tr>
		<th>data-overlay-theme</th>
		<td>swatch letter (a-z) - Overlay theme when the page is opened in a dialog</td>
	</tr>
	<tr>
		<th>data-theme</th>
		<td>swatch letter (a-z)</td>
	</tr>
	<tr>
		<th>data-title</th>
		<td>string - Title used when page is shown</td>
	</tr>
</table>
<p></p>

<h2><a href="global-config">Enhancement</a></h2>
<p>Container with <code>data-enhance="false"</code> or <code>data-ajax="false"</code></p>
<table class="column-headers">
	<tr>
		<th>data-enhance</th>
		<td><strong>true</strong> | false</td>
	</tr>
	<tr>
		<th>data-ajax</th>
		<td><strong>true</strong> | false</td>
	</tr>
</table>
<p>Any DOM elements inside a <code>data-enhance="false"</code> container, save for <code>data-role="page|dialog"</code> elements, will be ignored during initial enhancement and subsequent <code>create</code> events provided that the <code>$.mobile.ignoreContentEnabled</code> flag is set prior to the enhancement (eg in a <code>mobileinit</code> binding).</p>

<p>Any link or form element inside <code>data-ajax="false"</code> containers will be ignored by the framework's navigation functionality when <code>$.mobile.ignoreContentEnabled</code> is set to true.</p>

<h2>Field container</h2>
<p>Container with <code>data-role="fieldcontain"</code> wrapped around label/form element pair</p>
<p><strong>Note: <code>data-role="fieldcontain"</code> is deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0. Add class <code>ui-field-contain</code> instead.</strong></p>

<h2><a href="../flipswitch/">Flip toggle switch</a></h2>
<p>Select with <code>data-role="slider"</code> and two <code style="font-weight:normal;">option</code> element</p>
<table class="column-headers">
	<tr>
		<th>data-mini</th>
		<td>true | <strong>false</strong> - Compact sized version</td>
	</tr>
	<tr>
		<th>data-role</th>
		<td>none - Prevents auto-enhancement to use native control</td>
	</tr>
	<tr>
		<th>data-theme</th>
		<td>swatch letter (a-z) - Added to the form element</td>
	</tr>
	<tr>
		<th>data-track-theme</th>
		<td>swatch letter (a-z) - Added to the form element</td>
	</tr>
</table>
<p></p>

<h2>Link</h2>
<p>Links, including those with a <code>data-role="button"</code>, and form submit buttons share these attributes</p>
<table class="column-headers">
	<tr>
		<th>data-ajax</th>
		<td><strong>true</strong> | false</td>
	</tr>
	<tr>
		<th>data-direction</th>
		<td>reverse - Reverse transition animation (only for page or dialog)</td>
	</tr>
	<tr>
		<th>data-dom-cache</th>
		<td>true | <strong>false</strong></td>
	</tr>
	<tr>
		<th>data-prefetch</th>
		<td>true | <strong>false</strong></td>
	</tr>
	<tr>
		<th>data-rel</th>
		<td>back - To move one step back in history<br />
			dialog - To open link styled as dialog, not tracked in history<br />
			external - For linking to another domain<br />
			popup - For opening a popup</td>
	</tr>
	<tr>
		<th>data-transition</th>
		<td><strong>fade</strong> | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none</td>
	</tr>
	<tr>
		<th>data-position-to</th>
		<td><strong>origin</strong> - Centers the popup over the link that opens it<br />
			jQuery selector - Centers the popup over the specified element<br />
			window - Centers the popup in the window<br />
			<u>Note:</u> option only available when used with popups. See also: <a href="../popup/"> options</a>.</td>
	</tr>
</table>
<p></p>

<h2><a href="../listview/">Listview</a></h2>
<p><code style="font-weight:normal;">OL</code> or <code style="font-weight:normal;">UL</code> with <code>data-role="listview"</code></p>
<table class="column-headers">
	<tr>
		<th>data-autodividers</th>
		<td>true | <strong>false</strong></td>
	</tr>
	<tr>
		<th>data-count-theme</th>
		<td>swatch letter (a-z) - Default "c"</td>
	</tr>
	<tr>
		<th>data-divider-theme</th>
		<td>swatch letter (a-z) - Default "b"</td>
	</tr>
	<tr>
		<th>data-filter</th>
		<td>true | <strong>false</strong></td>
	</tr>
	<tr>
		<th>data-filter-placeholder</th>
		<td>string</td>
	</tr>
	<tr>
		<th>data-filter-theme</th>
		<td>swatch letter (a-z)</td>
	</tr>
	<tr>
		<th>data-header-theme</th>
		<td>swatch letter (a-z)</td>
	</tr>
	<tr>
		<th>data-icon</th>
		<td>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</td>
	</tr>
	<tr>
		<th>data-inset</th>
		<td>true | <strong>false</strong></td>
	</tr>
	<tr>
		<th>data-split-icon</th>
		<td>home | delete | plus | arrow-u | arrow-d | carat-l | carat-t | carat-r | carat-b| check | gear | grid | star | custom | <strong>arrow-r</strong> | arrow-l | minus | refresh | forward | back | alert | info | search</td>
	</tr>
	<tr>
		<th>data-split-theme</th>
		<td>swatch letter (a-z) - Default "b"</td>
	</tr>
	<tr>
		<th>data-theme</th>
		<td>swatch letter (a-z)</td>
	</tr>
</table>
<p></p>

<h2><a href="../listview/">Listview item</a></h2>
<p><code style="font-weight:normal;">LI</code> within a listview</p>
<table class="column-headers">
	<tr>
		<th>data-filtertext</th>
		<td>string - Filter by this value instead of inner text</td>
	</tr>
	<tr>
		<th>data-icon</th>
		<td>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</td>
	</tr>
	<tr>
		<th>data-role</th>
		<td>list-divider</td>
	</tr>
	<tr>
		<th>data-theme</th>
		<td>swatch letter (a-z)</td>
	</tr>
</table>
<p>The <code>data-icon</code> attribute is only applicable for a listview item if it contains a link.</p>

<h2><a href="../navbar/">Navbar</a></h2>
<p>A number of <code style="font-weight:normal;">LI</code>s wrapped in a container with <code>data-role="navbar"</code></p>
<table class="column-headers">
	<tr>
		<th>data-iconpos</th>
		<td>left | right | <strong>top</strong> | bottom |  notext</td>
	</tr>
</table>
<p>To add icons to the navbar items, the <code>data-icon</code> attribute is used, specifying a standard mobile icon for each item.</p>
<p>Navbars inherit the theme-swatch from their parent container. Setting the <code>data-theme</code> attribute to a navbar is not supported. The <code>data-theme</code> attribute can be set individually to the links inside a navbar.</p>

<h2><a href="../page/">Page</a></h2>
<p>Container with <code>data-role="page"</code></p>
<table class="column-headers">
	<tr>
		<th>data-dom-cache</th>
		<td>true | <strong>false</strong></td>
	</tr>
	<tr>
		<th>data-overlay-theme</th>
		<td>swatch letter (a-z) - Overlay theme when the page is opened as a dialog</td>
	</tr>
	<tr>
		<th>data-theme</th>
		<td>swatch letter (a-z) - Default "a"</td>
	</tr>
	<tr>
		<th>data-title</th>
		<td>string - Title used when page is shown</td>
	</tr>
	<tr>
		<th id="page-data-url">data-url</th>
		<td>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, <code style="white-space: nowrap;">data-url="/path/to/<b>&amp;quot;</b>Devil<b>&amp;apos;</b>s Advocate<b>&amp;quot;</b>.html"</code></td>
	</tr>
</table>
<p></p>

<h2><a href="../popup/">Popup</a></h2>
<p>Container with <code>data-role="popup"</code></p>
<table class="column-headers">
	<tr>
		<th>data-corners</th>
		<td><strong>true</strong> | false</td>
	</tr>
	<tr>
		<th>data-dismissible</th>
		<td><strong>true</strong> | false - If set to false prevents popup closing by clicking outside of the popup or pressing the Escape key</td>
	</tr>
	<tr>
		<th>data-history</th>
		<td><strong>true</strong> | 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.</td>
	</tr>

	<tr>
		<th>data-overlay-theme</th>
		<td>swatch letter (a-z) - Default "null" (transparent background)</td>
	</tr>
	<tr>
		<th>data-position-to</th>
		<td><strong>origin</strong> | 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.</td>
	</tr>
	<tr>
		<th>data-shadow</th>
		<td><strong>true</strong> | false</td>
	</tr>
	<tr>
		<th>data-theme</th>
		<td>swatch letter (a-z) | none - Default inherited, "none" sets the popup to transparent</td>
	</tr>
	<tr>
		<th>data-tolerance</th>
		<td><strong>30,15,30,15</strong> - Distance from the edges of the window (top, right, bottom, left)</td>
	</tr>
	<tr>
		<th>data-transition</th>
		<td><strong>none</strong> | transition - The transition to use when making the popup appear/disappear.</td>
	</tr>
</table>
<p>Anchor with a <code>data-rel="popup"</code> opens the popup</p>
<table class="column-headers">
	<tr>
		<th>data-position-to</th>
		<td><strong>origin</strong> - Centers the popup over the link that opens it<br />
			jQuery selector - Centers the popup over the specified element<br />
			window - Centers the popup in the window</td>
	</tr>
	<tr>
		<th>data-rel</th>
		<td>popup - For opening a popup</td>
	</tr>
	<tr>
		<th>data-transition</th>
		<td>fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | <strong>none</strong> - The transition to be used when showing/hiding the popup</td>
	</tr>
</table>
<p></p>

<h2><a href="../checkboxradio/">Radio button</a></h2>
<p>Pairs of labels and inputs with <code>type="radio"</code> are auto-enhanced, no <code>data-role</code> required</p>
<table class="column-headers">
	<tr>
		<th>data-mini</th>
		<td>true | <strong>false</strong> - Compact sized version</td>
	</tr>
	<tr>
		<th>data-role</th>
		<td>none - Prevents auto-enhancement to use native control</td>
	</tr>
	<tr>
		<th>data-theme</th>
		<td>swatch letter (a-z) - Added to the form element</td>
	</tr>
</table>

<h2><a href="../selectmenu/">Selectmenu</a></h2>
<p>All <code>select</code> form elements are auto-enhanced, no <code>data-role</code> required</p>
<table class="column-headers">
	<tr>
		<th>data-divider-theme</th>
		<td>swatch letter (a-z) - Default "b" - Only applicable if <code>optgroup</code> support is used in non-native selects</td>
	</tr>
	<tr>
		<th>data-icon</th>
		<td>home | delete | plus | arrow-u | <strong>arrow-d</strong> | 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 </td>
	</tr>
	<tr>
		<th>data-iconpos</th>
		<td>left | <strong>right</strong> | top | bottom |  notext</td>
	</tr>
	<tr>
		<th>data-inline</th>
		<td>true | <strong>false</strong></td>
	</tr>
	<tr>
		<th>data-mini</th>
		<td>true | <strong>false</strong> - Compact sized version</td>
	</tr>
	<tr>
		<th>data-native-menu</th>
		<td><strong>true</strong> | false</td>
	</tr>
	<tr>
		<th>data-overlay-theme</th>
		<td>swatch letter (a-z) - Overlay theme for non-native selects</td>
	</tr>
	<tr>
		<th>data-placeholder</th>
		<td>true | <strong>false</strong> - Can be set on <code style="font-weight:normal;">option</code> element of a non-native select</td>
	</tr>
	<tr>
		<th>data-role</th>
		<td>none - Prevents auto-enhancement to use native control</td>
	</tr>
	<tr>
		<th>data-theme</th>
		<td>swatch letter (a-z) - Added to the form element</td>
	</tr>
</table>

<h2><a href="../slider/">Slider</a></h2>
<p>Inputs with <code>type="range"</code> are auto-enhanced, no <code>data-role</code> required</p>
<table class="column-headers">
	<tr>
		<th>data-highlight</th>
		<td>true | <strong>false</strong> - Adds an active state fill on track to handle</td>
	</tr>
	<tr>
		<th>data-mini</th>
		<td>true | <strong>false</strong> - Compact sized version</td>
	</tr>
	<tr>
		<th>data-role</th>
		<td>none - Prevents auto-enhancement to use native control</td>
	</tr>
	<tr>
		<th>data-theme</th>
		<td>swatch letter (a-z) - Added to the form element</td>
	</tr>
	<tr>
		<th>data-track-theme</th>
		<td>swatch letter (a-z) - Added to the form element</td>
	</tr>
</table>
<p></p>

<h2><a href="../textinput/">Textinput</a></h2>
<p>Input <code>type="text|number|search|etc."</code> or <code>textarea</code> elements are auto-enhanced, no <code>data-role</code> required</p>
<table class="column-headers">
	<tr>
		<th>data-clear-btn</th>
		<td>true | <strong>false</strong> - Adds a clear button</td>
	</tr>
	<tr>
		<th>data-clear-btn-text</th>
		<td>string - Text for the close button. Default: <strong>"clear text"</strong></td>
	</tr>
	<tr>
		<th>data-mini</th>
		<td>true | <strong>false</strong> - Compact sized version</td>
	</tr>
	<tr>
		<th>data-role</th>
		<td>none - Prevents auto-enhancement to use native control</td>
	</tr>
	<tr>
		<th>data-theme</th>
		<td>swatch letter (a-z) - Added to the form element</td>
	</tr>
</table>
<p></p>

<h2><a href="../toolbar/">Toolbar</a></h2>
<p>Container with <code>data-role="header"</code> or <code>data-role="footer"</code></p>
<table class="column-headers">
	<tr>
		<th>data-add-back-btn</th>
		<td>true | <strong>false</strong> - Auto add back button, header only</td>
	</tr>
	<tr>
		<th>data-back-btn-text</th>
		<td>string - Header only</td>
	</tr>
	<tr>
		<th>data-back-btn-theme</th>
		<td>swatch letter (a-z) - Header only</td>
	</tr>
	<tr>
		<th>data-id</th>
		<td>string - Unique ID. Required for persistent footers</td>
	</tr>
	<tr>
		<th>data-position</th>
		<td>fixed</td>
	</tr>
	<tr>
		<th>data-theme</th>
		<td>swatch letter (a-z)</td>
	</tr>
</table>
<p></p>

<h2><a href="../toolbar/">Fixed toolbar</a></h2>
<p>Container with <code>data-role="header"</code> or <code>data-role="footer"</code> plus the attribute <code>data-position="fixed"</code></p>
<table class="column-headers">
	<tr>
		<th>data-disable-page-zoom</th>
		<td><strong>true</strong> | false - User-scaling-ability for pages with fixed toolbars</td>
	</tr>
	<tr>
		<th>data-fullscreen</th>
		<td>true | <strong>false</strong> - Setting toolbars <u>over</u> the page-content</td>
	</tr>
	<tr>
		<th>data-tap-toggle</th>
		<td><strong>true</strong> | false - Ability to toggle toolbar-visibility on user tap/click</td>
	</tr>
	<tr>
		<th>data-transition</th>
		<td><strong>slide</strong> | fade | none - Show/hide-transition when a tap/click occurs</td>
	</tr>
	<tr>
		<th>data-update-page-padding</th>
		<td><strong>true</strong> | false - Have the page top and bottom padding updated on resize, transition, "updatelayout" events (the framework always updates the padding on the "pageshow" event).</td>
	</tr>
	<tr>
		<th>data-visible-on-page-show</th>
		<td><strong>true</strong> | false - Toolbar-visibility when parent page is shown</td>
	</tr>
</table>