Data attribute reference
The jQuery Mobile framework uses HTML5 data- 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 data- attributes, set a custom namespace by modifying the ns global option.
Button
Links with data-role="button". Input-based buttons, links in toolbars and button elements are auto-enhanced, no data-role required.
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-mini | true | false - Compact sized version |
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. Add the data-mini="true" to get the mini/compact sized version for all the buttons that appear in the controlgroup.
Checkbox
Pairs of labels and inputs with type="checkbox" are auto-enhanced, no data-role required
data-mini | true | false - Compact sized version |
data-role | none - Prevents auto-enhancement to use native control |
data-theme | swatch letter (a-z) - Added to the form element |
Multiple checkboxes 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 checkboxes to sit side-by-side. Add the data-mini="true" to get the mini/compact sized v
ersion for all the checkboxes that appear in the controlgroup.
Collapsible
A heading and content wrapped in a container with the data-role="collapsible"
data-collapsed | true | false |
data-collapsed-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-content-theme | swatch letter (a-z) |
data-expanded-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 |
data-inset | true | false |
data-mini | true | false - Compact sized version |
data-theme | swatch letter (a-z) |
Collapsible set
A number of collapsibles wrapped in a container with the data-role="collapsible-set"
data-collapsed-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-content-theme | swatch letter (a-z) - Sets all collapsibles in set |
data-expanded-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-inset | true | false |
data-mini | true | false - Compact sized version |
data-theme | swatch letter (a-z) - Sets all collapsibles in set |
Content
Container with data-role="content"
data-theme | swatch letter (a-z) |
Controlgroup
DIV or FIELDSET container with data-role="controlgroup". Visually integrate multiple button-styled inputs of a single type (checkboxes, link-based buttons, radio buttons, selects) into a group. For grouping form checkboxes and radio buttons, the fieldset container is recommended inside a div container with the data-role="fieldcontain", to improve label styling.
data-mini | true | false - Compact sized version for all items in the controlgroup |
data-type | horizontal | vertical - For horizontal or vertical item alignment |
Dialog
Container with data-role="dialog" or linked to with data-rel="dialog" on the anchor.
data-close-btn-text | string - Text for the close button, dialog only |
data-dom-cache | true | false |
data-overlay-theme | swatch letter (a-z) - Overlay theme when the page is opened in a dialog |
data-theme | swatch letter (a-z) |
data-title | string - Title used when page is shown |
Enhancement
Container with data-enhance="false" or data-ajax="false"
data-enhance | true | false |
data-ajax | true | false |
Any DOM elements inside a data-enhance="false" container, save for data-role="page|dialog" elements, will be ignored during initial enhancement and subsequent create events provided that the $.mobile.ignoreContentEnabled flag is set prior to the enhancement (eg in a mobileinit binding).
Any link or form element inside data-ajax="false" containers will be ignored by the framework's navigation functionality when $.mobile.ignoreContentEnabled is set to true.
Field container
Container with data-role="fieldcontain" wrapped around label/form element pair
Fixed Toolbar
Container with data-role="header" or data-role="footer" plus the attribute data-position="fixed"
data-disable-page-zoom | true | false - User-scaling-ability for pages with fixed toolbars |
data-fullscreen | true | false - Setting toolbars over the page-content |
data-tap-toggle | true | false - Ability to toggle toolbar-visibility on user tap/click |
data-transition | slide | fade | none - Show/hide-transition when a tap/click occurs |
data-update-page-padding | true | false - Have the page top and bottom padding updated on resize, transition, "updatelayout" events (the framework always updates the padding on the "pageshow" event). |
data-visible-on-page-show | true | false - Toolbar-visibility when parent page is shown |
Flip toggle switch
发表评论