2011-11-04 02:56:54 +00:00
<!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/" / >
< link rel = "stylesheet" href = "../_assets/css/jqm-docs.css" / >
< script src = "../../js/jquery.js" > < / script >
< script src = "../../experiments/themeswitcher/jquery.mobile.themeswitcher.js" > < / script >
< script src = "../_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" >
2011-11-04 03:09:32 +00:00
< h1 > Data Attributes< / h1 >
2011-11-04 02:56:54 +00:00
< a href = "../../" data-icon = "home" data-iconpos = "notext" data-direction = "reverse" class = "ui-btn-right jqm-home" > Home< / a >
< / div > <!-- /header -->
< div data-role = "content" data-theme = "c" >
2011-11-04 22:07:38 +00:00
2011-11-04 02:56:54 +00:00
< div class = "content-primary" >
2011-11-04 22:07:38 +00:00
2011-11-04 02:56:54 +00:00
< style >
table { width:100%; border-bottom:1px solid #ccc; }
th { text-align:left; width: 170px; }
2011-11-04 03:08:33 +00:00
th, td { vertical-align:top; border-top:1px solid #ccc; padding: 6px 10px 4px 0; }
2011-11-04 02:56:54 +00:00
< / style >
2011-11-04 22:07:38 +00:00
2011-11-04 02:56:54 +00:00
< h2 > < a href = "../buttons/buttons-types.html" > Button< / a > < / h2 >
2011-11-04 22:33:37 +00:00
< p > Links with < code > data-role="button"< / code > . Input-based buttons and button elements are auto-enhanced, no < code > data-role required< / code > < / p >
2011-11-04 02:56:54 +00:00
< table >
< tr >
< th > data-corners< / th >
2011-11-04 22:07:38 +00:00
< td > < strong > true< / strong > | false< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-icon< / th >
2011-11-04 22:07:38 +00:00
< 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 >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-iconpos< / th >
2011-11-04 22:07:38 +00:00
< td > < strong > left< / strong > | right | top | bottom | notext< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-iconshadow< / th >
2011-11-04 22:07:38 +00:00
< td > < strong > true< / strong > | false< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-inline< / th >
2011-11-04 22:07:38 +00:00
< td > true | < strong > false< / strong > < / td >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-shadow< / th >
2011-11-04 22:07:38 +00:00
< td > < strong > true< / strong > | false< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-theme< / th >
2011-11-04 22:07:38 +00:00
< td > swatch letter (a-z)< / td >
2011-11-04 02:56:54 +00:00
< / 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.< / p >
2011-11-04 22:07:38 +00:00
2011-11-04 02:56:54 +00:00
< h2 > < a href = "../toolbars/docs-footers.html" > Checkbox< / a > < / h2 >
2011-11-04 03:08:33 +00:00
< p > Pairs of labels and inputs with < code > type="checkbox"< / code > are auto-enhanced, no < code > data-role required< / code > < / p >
2011-11-04 02:56:54 +00:00
< table >
< tr >
< th > data-role< / th >
2011-11-04 22:07:38 +00:00
< td > none (prevents auto-enhancement to use native control)< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-theme< / th >
2011-11-04 22:07:38 +00:00
< td > swatch letter (a-z) - Added to the form element< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< / table >
< h2 > < a href = "../content/content-collapsible.html" > Collapsible< / a > < / h2 >
2011-11-04 22:33:37 +00:00
< p > A heading and content wrapped in a container with the < code > data-role="collapsible"< / code > < / p >
2011-11-04 02:56:54 +00:00
< table >
< tr >
< th > data-collapsed< / th >
2011-11-04 22:07:38 +00:00
< td > < strong > true< / strong > | false< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-content-theme< / th >
2011-11-04 22:07:38 +00:00
< td > swatch letter (a-z)< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-theme< / th >
2011-11-04 22:07:38 +00:00
< td > swatch letter (a-z)< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< / table >
2011-11-04 22:07:38 +00:00
2011-11-04 02:56:54 +00:00
< h2 > < a href = "../content/content-collapsible-set.html" > Collapsible set< / a > < / h2 >
2011-11-04 22:33:37 +00:00
< p > A number of collapsibles wrapped in a container with the < code > data-role="collapsible-set"< / code > < / p >
2011-11-04 02:56:54 +00:00
< table >
< tr >
< th > data-content-theme< / th >
2011-11-04 22:07:38 +00:00
< td > swatch letter (a-z) - Sets all collapsibles in set< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-theme< / th >
2011-11-04 22:07:38 +00:00
< td > swatch letter (a-z) - Sets all collapsibles in set< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< / table >
2011-11-04 22:07:38 +00:00
2011-11-04 02:56:54 +00:00
< 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 >
2011-11-04 22:07:38 +00:00
< td > swatch letter (a-z)< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< / table >
2011-11-04 22:07:38 +00:00
2011-11-04 02:56:54 +00:00
< h2 > < a href = "../toolbars/docs-footers.html" > Fieldcontainer< / a > < / h2 >
2011-11-04 22:33:37 +00:00
< p > Container with < code > data-role="fieldcontain"< / code > wrapped around label/form element pair< / p >
2011-11-04 02:56:54 +00:00
2011-11-04 03:19:13 +00:00
< h2 > < a href = "../forms/switch/" > Flip toggle switch< / a > < / h2 >
2011-11-04 02:56:54 +00:00
< p > Select with < code > data-role="slider"< / code > , two options only< / p >
< table >
< tr >
< th > data-role< / th >
2011-11-04 22:07:38 +00:00
< td > none (prevents auto-enhancement to use native control)< / td >
2011-11-04 03:19:13 +00:00
< / tr > data-track-theme
2011-11-04 02:56:54 +00:00
< tr >
< th > data-theme< / th >
2011-11-04 22:07:38 +00:00
< td > swatch letter (a-z) - Added to the form element< / td >
2011-11-04 02:56:54 +00:00
< / tr >
2011-11-04 03:19:13 +00:00
< tr >
< th > data-track-theme< / th >
2011-11-04 22:07:38 +00:00
< td > swatch letter (a-z) - Added to the form element< / td >
2011-11-04 03:19:13 +00:00
< / tr >
2011-11-04 02:56:54 +00:00
< / table >
2011-11-04 22:07:38 +00:00
2011-11-04 03:25:16 +00:00
< 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 >
2011-11-04 22:07:38 +00:00
< td > string (unique id, useful in persistent footers)< / td >
2011-11-04 03:25:16 +00:00
< / tr >
< tr >
< th > data-position< / th >
2011-11-04 22:07:38 +00:00
< td > fixed< / td >
2011-11-04 03:25:16 +00:00
< / tr >
< tr >
< th > data-theme< / th >
2011-11-04 22:07:38 +00:00
< td > swatch letter (a-z)< / td >
2011-11-04 03:25:16 +00:00
< / tr >
< / table >
2011-11-04 22:07:38 +00:00
2011-11-04 02:56:54 +00:00
< h2 > < a href = "../pages/toolbars/docs-headers.html" > Header< / a > < / h2 >
< p > Container with < code > data-role="header"< / code > < / p >
< table >
< tr >
< th > data-add-back-btn< / th >
2011-11-04 22:07:38 +00:00
< td > true | < strong > false< / strong > (auto add back button, header only)< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-back-btn-text< / th >
2011-11-04 22:07:38 +00:00
< td > string< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-back-btn-theme< / th >
2011-11-04 22:07:38 +00:00
< td > swatch letter (a-z)< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-position< / th >
2011-11-04 22:07:38 +00:00
< td > fixed< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-theme< / th >
2011-11-04 22:07:38 +00:00
< td > swatch letter (a-z)< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-title< / th >
2011-11-04 22:07:38 +00:00
< td > string (title used when page is shown)< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< / table >
2011-11-04 22:07:38 +00:00
2011-11-04 02:56:54 +00:00
< h2 > < a href = "../pages/page-links.html" > Link< / a > < / h2 >
2011-11-04 22:33:37 +00:00
< p > Links, including those with a < code > data-role="button"< / code > , and form submit buttons share these attributes< / p >
2011-11-04 02:56:54 +00:00
< table >
< tr >
< th > data-ajax< / th >
2011-11-04 22:07:38 +00:00
< td > < strong > true< / strong > | false< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-direction< / th >
2011-11-04 22:07:38 +00:00
< td > reverse (reverse page transition animation)< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-dom-cache< / th >
2011-11-04 22:07:38 +00:00
< td > true | < strong > false< / strong > < / td >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-prefetch< / th >
2011-11-04 22:07:38 +00:00
< td > true | < strong > false< / strong > < / td >
2011-11-04 02:56:54 +00:00
< / 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 / >
2011-11-04 22:07:38 +00:00
external (for linking to another domain)< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-transition< / th >
2011-11-04 22:07:38 +00:00
< td > < strong > slide< / strong > | slideup | slidedown | pop | fade | flip< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< / table >
2011-11-04 22:07:38 +00:00
2011-11-04 02:56:54 +00:00
< h2 > < a href = "../lists/docs-lists.html" > Listview< / a > < / h2 >
2011-11-04 22:33:37 +00:00
< p > OL or UL with < code > data-role="listview"< / code > < / p >
2011-11-04 02:56:54 +00:00
< table >
< tr >
< th > data-count-theme< / th >
2011-11-04 22:07:38 +00:00
< td > swatch letter (a-z)< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-dividertheme< / th >
2011-11-04 22:07:38 +00:00
< td > swatch letter (a-z)< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-filter< / th >
2011-11-04 22:07:38 +00:00
< td > true | < strong > false< / strong > < / td >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-filter-placeholder< / th >
2011-11-04 22:07:38 +00:00
< td > string< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-filter-theme< / th >
2011-11-04 22:07:38 +00:00
< td > swatch letter (a-z)< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-inset< / th >
2011-11-04 22:07:38 +00:00
< td > true | < strong > false< / strong > < / td >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-split-icon< / th >
2011-11-04 22:07:38 +00:00
< 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 >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-theme< / th >
2011-11-04 22:07:38 +00:00
< td > swatch letter (a-z)< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< / table >
2011-11-04 22:07:38 +00:00
2011-11-04 02:56:54 +00:00
< h2 > < a href = "../lists/docs-lists.html" > Listview item< / a > < / h2 >
2011-11-04 22:33:37 +00:00
< p > LI within a listview< / p >
2011-11-04 02:56:54 +00:00
< table >
< tr >
< th > data-icon< / th >
2011-11-04 22:07:38 +00:00
< 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 >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-role< / th >
2011-11-04 22:07:38 +00:00
< td > list-divider< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-theme< / th >
2011-11-04 22:07:38 +00:00
< td > swatch letter (a-z) - can also be set on individual LIs< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< / table >
2011-11-04 22:07:38 +00:00
2011-11-04 02:56:54 +00:00
< h2 > < a href = "../pages/page-anatomy.html" > Page< / a > < / h2 >
< p > Container with < code > data-role="page"< / code > or < code > "dialog"< / code > < / p >
< table >
< tr >
< th > data-close-btn-text< / th >
2011-11-04 22:07:38 +00:00
< td > string (text for the close button, dialog only)< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-dom-cache< / th >
2011-11-04 22:07:38 +00:00
< td > true | < strong > false< / strong > < / td >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-id< / th >
2011-11-04 22:07:38 +00:00
< td > string (unique id for the page)< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-fullscreen< / th >
2011-11-04 22:07:38 +00:00
< td > true | false (used in conjunction with fixed toolbars)< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-theme< / th >
2011-11-04 22:07:38 +00:00
< td > swatch letter (a-z)< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-title< / th >
2011-11-04 22:07:38 +00:00
< td > string (title used when page is shown)< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< / table >
2011-11-04 22:07:38 +00:00
2011-11-04 02:56:54 +00:00
< h2 > < a href = "../forms/radiobuttons/" > Radio button< / a > < / h2 >
2011-11-04 22:33:37 +00:00
< p > Pairs of labels and inputs with < code > type="radio"< / code > are auto-enhanced, no < code > data-role required< / code > < / p >
2011-11-04 02:56:54 +00:00
< table >
< tr >
< th > data-role< / th >
2011-11-04 22:07:38 +00:00
< td > none (prevents auto-enhancement to use native control)< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-theme< / th >
2011-11-04 22:07:38 +00:00
< td > swatch letter (a-z) - Added to the form element< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< / table >
2011-11-04 22:07:38 +00:00
2011-11-04 02:56:54 +00:00
< h2 > < a href = "../forms/slider/" > Select< / a > < / h2 >
2011-11-04 03:08:33 +00:00
< p > All < code > select< / code > form elements are auto-enhanced, no < code > data-role required< / code > < / p >
2011-11-04 02:56:54 +00:00
< table >
< tr >
< th > data-icon< / th >
2011-11-04 22:07:38 +00:00
< 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 >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-iconpos< / th >
2011-11-04 22:07:38 +00:00
< td > < strong > left< / strong > | right | top | bottom | notext< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-inline< / th >
2011-11-04 22:07:38 +00:00
< td > true | < strong > false< / strong > < / td >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-native-menu< / th >
2011-11-04 22:07:38 +00:00
< td > < strong > true< / strong > | false< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-placeholder< / th >
2011-11-04 22:07:38 +00:00
< td > true | false - Add to the Option< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-role< / th >
2011-11-04 22:07:38 +00:00
< td > none (prevents auto-enhancement to use native control)< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-theme< / th >
2011-11-04 22:07:38 +00:00
< td > swatch letter (a-z) - Added to the form element< / td >
2011-11-04 02:56:54 +00:00
< / 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 >
2011-11-04 22:07:38 +00:00
2011-11-04 02:56:54 +00:00
< h2 > < a href = "../forms/slider/" > Slider< / a > < / h2 >
2011-11-04 22:33:37 +00:00
< p > Inputs with < code > type="range"< / code > are auto-enhanced, no < code > data-role required< / code > < / p >
2011-11-04 02:56:54 +00:00
< table >
< tr >
< th > data-role< / th >
2011-11-04 22:07:38 +00:00
< td > none (prevents auto-enhancement to use native control)< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-theme< / th >
2011-11-04 22:07:38 +00:00
< td > swatch letter (a-z) - Added to the form element< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-track-theme< / th >
2011-11-04 22:07:38 +00:00
< td > swatch letter (a-z) - Added to the form element< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< / table >
2011-11-04 22:07:38 +00:00
2011-11-04 02:56:54 +00:00
< h2 > < a href = "../forms/textinputs/" > Text input & Textarea< / a > < / h2 >
2011-11-04 22:33:37 +00:00
< p > Input < code > type="text|number|search|etc."< / code > or < code > textarea< / code > elements are auto-enhanced, no < code > data-role required< / code > < / p >
2011-11-04 02:56:54 +00:00
< table >
< tr >
< th > data-role< / th >
2011-11-04 22:07:38 +00:00
< td > none (prevents auto-enhancement to use native control)< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< tr >
< th > data-theme< / th >
2011-11-04 22:07:38 +00:00
< td > swatch letter (a-z) - Added to the form element< / td >
2011-11-04 02:56:54 +00:00
< / tr >
< / table >
2011-11-04 22:07:38 +00:00
2011-11-04 02:56:54 +00:00
< / div > <!-- /content -->
2011-11-04 22:07:38 +00:00
2011-11-04 02:56:54 +00:00
< div class = "content-secondary" >
2011-11-04 22:07:38 +00:00
2011-11-04 02:56:54 +00:00
< div data-role = "collapsible" data-collapsed = "true" data-theme = "b" data-content-theme = "d" >
2011-11-04 22:07:38 +00:00
2011-11-04 02:56:54 +00:00
< h3 > More in this section< / h3 >
2011-11-04 22:07:38 +00:00
2011-11-04 02:56:54 +00:00
< ul data-role = "listview" data-theme = "c" data-dividertheme = "d" >
2011-11-04 22:07:38 +00:00
2011-11-04 02:56:54 +00:00
< 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 & Utilities< / a > < / li >
< li > < a href = "../../docs/api/mediahelpers.html" > Responsive layout< / 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 > © 2011 The jQuery Project< / p >
< / div >
2011-11-04 22:07:38 +00:00
2011-11-04 02:56:54 +00:00
< / div > <!-- /page -->
< / body >
< / html >
