Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

667 lines (624 sloc) 24.405 kB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - Data Attribute Reference</title>
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<script src="../../js/jquery.js"></script>
<script src="../../docs/_assets/js/jqm-docs.js"></script>
<script src="../../js/"></script>
</head>
<body>
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="f">
<h1>Data Attributes</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
</div><!-- /header -->
<div data-role="content" data-theme="c">
<div class="content-primary">
<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="globalconfig.html"><code>ns</code> global option</a>.<p>
<style>
table { width:100%; border-bottom:1px solid #ccc; }
th { text-align:left; width: 170px; }
th, td { vertical-align:top; border-top:1px solid #ccc; padding: 6px 10px 4px 0; }
</style>
<h2><a href="../buttons/buttons-types.html">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>
<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 | 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>
<p>Multiple buttons can be wrapped in a container with a <code>data-role="controlgroup"</code> attribute for a vertically grouped set. Add the <code>data-type="horizontal"</code> attribute for the buttons to sit side-by-side. Add the <code>data-mini="true"</code> to get the mini/compact sized version for all the buttons that appear in the controlgroup. </p>
<h2><a href="../forms/checkboxes/">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>
<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>Multiple checkboxes can be wrapped in a container with a <code>data-role="controlgroup"</code> attribute for a vertically grouped set. Add the <code>data-type="horizontal"</code> attribute for the checkboxes to sit side-by-side. Add the <code>data-mini="true"</code> to get the mini/compact sized version for all the checkboxes that appear in the controlgroup. </p>
<h2><a href="../content/content-collapsible.html">Collapsible</a></h2>
<p>A heading and content wrapped in a container with the <code>data-role="collapsible"</code></p>
<table>
<tr>
<th>data-collapsed</th>
<td><strong>true</strong> | false</td>
</tr>
<tr>
<th>data-collapsed-icon</th>
<td>home | delete | <strong>plus</strong> | arrow-u | arrow-d | 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)</td>
</tr>
<tr>
<th>data-expanded-icon</th>
<td>home | delete | plus | arrow-u | arrow-d | 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>
<h2><a href="../content/content-collapsible-set.html">Collapsible set</a></h2>
<p>A number of collapsibles wrapped in a container with the <code>data-role="collapsible-set"</code></p>
<table>
<tr>
<th>data-collapsed-icon</th>
<td>home | delete | <strong>plus</strong> | arrow-u | arrow-d | 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 | 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>
<h2><a href="../pages/page-anatomy.html">Content</a></h2>
<p>Container with <code>data-role="content"</code></p>
<table>
<tr>
<th>data-theme</th>
<td>swatch letter (a-z)</td>
</tr>
</table>
<h2><a href="../buttons/buttons-grouped.html">Controlgroup</a></h2>
<p>DIV or FIELDSET container with <code>data-role="controlgroup"</code>. Visually integrate multiple button-styled inputs of a single type (<a href="../forms/checkboxes/">checkboxes</a>, <a href="../buttons/buttons-types.html">link-based buttons</a>, <a href="../forms/radiobuttons/">radio buttons</a>, <a href="../forms/selects/">selects</a>) into a group. For grouping form checkboxes and radio buttons, the <code>fieldset</code> container is recommended inside a div container with the <code>data-role="fieldcontain"</code>, to improve label styling.</p>
<table>
<tr>
<th>data-mini</th>
<td>true | <strong>false</strong> - Compact sized version for all items in the controlgroup</td>
</tr>
<tr>
<th>data-type</th>
<td>horizontal | <strong>vertical</strong> - For horizontal or vertical item alignment</td>
</tr>
</table>
<h2><a href="../pages/dialog/index.html">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>
<tr>
<th>data-close-btn-text</th>
<td>string - Text for the close button, dialog only</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>
<h2><a href="globalconfig.html">Enhancement</a></h2>
<p>Container with <code>data-enhance="false"</code> or <code>data-ajax="false"</code></p>
<table>
<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><a href="../forms/docs-forms.html">Field container</a></h2>
<p>Container with <code>data-role="fieldcontain"</code> wrapped around label/form element pair</p>
<h2><a href="../toolbars/bars-fixed.html">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>
<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>
<h2><a href="../forms/switch/">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>
<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>
<h2><a href="../toolbars/docs-footers.html">Footer</a></h2>
<p>Container with <code>data-role="footer"</code></p>
<table>
<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-fullscreen</th>
<td>true | <strong>false</strong> - Used in conjunction with fixed toolbars</td>
</tr>
<tr>
<th>data-theme</th>
<td>swatch letter (a-z)</td>
</tr>
</table>
<h2><a href="../toolbars/docs-headers.html">Header</a></h2>
<p>Container with <code>data-role="header"</code></p>
<table>
<tr>
<th>data-id</th>
<td>string - Unique ID. Required for persistent headers</td>
</tr>
<tr>
<th>data-position</th>
<td>fixed</td>
</tr>
<tr>
<th>data-fullscreen</th>
<td>true | <strong>false</strong> - Used in conjunction with fixed toolbars</td>
</tr>
<tr>
<th>data-theme</th>
<td>swatch letter (a-z)</td>
</tr>
</table>
<h2><a href="../pages/page-links.html">Link</a></h2>
<p>Links, including those with a <code>data-role="button"</code>, and form submit buttons share these attributes</p>
<table>
<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: popup <a href="../pages/popup/options.html">options</a>.</td>
</tr>
</table>
<h2><a href="../lists/docs-lists.html">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>
<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-inset</th>
<td>true | <strong>false</strong></td>
</tr>
<tr>
<th>data-split-icon</th>
<td>home | delete | plus | arrow-u | arrow-d | 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>
<h2><a href="../lists/docs-lists.html">Listview item</a></h2>
<p><code style="font-weight:normal;">LI</code> within a listview</p>
<table>
<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 | 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="../toolbars/docs-navbar.html">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>
<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="../pages/page-anatomy.html">Page</a></h2>
<p>Container with <code>data-role="page"</code></p>
<table>
<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</td>
</tr>
<tr>
<th>data-back-btn-theme</th>
<td>swatch letter (a-z)</td>
</tr>
<tr>
<th>data-close-btn-text</th>
<td>string - Text for the close button, dialog only</td>
</tr>
<tr>
<th>data-dom-cache</th>
<td>true | <strong>false</strong></td>
</tr>
<tr>
<th>data-fullscreen</th>
<td>true | <strong>false</strong> - Used in conjunction with fixed toolbars <p class="ui-body ui-body-e"><strong>Deprecated</strong> in 1.1 - use on header and footer instead.</p></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) - Default "c"</td>
</tr>
<tr>
<th>data-title</th>
<td>string - Title used when page is shown</td>
</tr>
<tr>
<th>data-url</th>
<td>url - Value for updating the URL, instead of the url used to request the page</td>
</tr>
</table>
<h2><a href="../pages/popup/">Popup</a></h2>
<p>Container with <code>data-role="popup"</code></p>
<table>
<tr>
<th>data-corners</th>
<td><strong>true</strong> | false</td>
</tr>
<tr>
<th>data-dismissable</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-overlay-theme</th>
<td>swatch letter (a-z) - Default "null" (transparent background)</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>
</table>
<p>Anchor with a <code>data-rel="popup"</code> opens the popup</p>
<table>
<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>
<h2><a href="../forms/radiobuttons/">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>
<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>Multiple radion buttons can be wrapped in a container with a <code>data-role="controlgroup"</code> attribute for a vertically grouped set. Add the <code>data-type="horizontal"</code> attribute for the radio buttons to sit side-by-side. Add the <code>data-mini="true"</code> to get the mini/compact sized version for all the radio buttons that appear in the controlgroup. </p>
<h2><a href="../forms/selects/">Select</a></h2>
<p>All <code>select</code> form elements are auto-enhanced, no <code>data-role</code> required</p>
<table>
<tr>
<th>data-icon</th>
<td>home | delete | plus | arrow-u | <strong>arrow-d</strong> | 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>
<p>Multiple selects can be wrapped in a fieldset with a <code>data-role="controlgroup"</code> attribute for a vertically grouped set. Add the <code>data-type="horizontal"</code> attribute for the selects to sit side-by-side.</p>
<h2><a href="../forms/slider/">Slider</a></h2>
<p>Inputs with <code>type="range"</code> are auto-enhanced, no <code>data-role</code> required</p>
<table>
<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>
<h2><a href="../forms/textinputs/">Text input &amp; Textarea</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>
<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>
</div><!--/content -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>More in this section</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">API</li>
<li><a href="../../docs/api/globalconfig.html">Configuring defaults</a></li>
<li><a href="../../docs/api/events.html">Events</a></li>
<li><a href="../../docs/api/methods.html">Methods &amp; Utilities</a></li>
<li data-theme="a"><a href="../../docs/api/data-attributes.html">Data attribute reference</a></li>
<li><a href="../../docs/api/themes.html">Theme framework</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p class="jqm-version"></p>
<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>
</div><!-- /page -->
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.