HTML5的data-属性说明.doc

Data attribute referenceThe 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.ButtonLinks with data-role=button. Input-based buttons, links in toolbars and button elements are auto-enhanced, no data-role required.data-cornerstrue | falsedata-iconhome | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | searchdata-iconposleft | right | top | bottom | notextdata-iconshadowtrue | falsedata-inlinetrue | falsedata-minitrue | false - Compact sized versiondata-shadowtrue | falsedata-themeswatch 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. CheckboxPairs of labels and inputs with type=checkbox are auto-enhanced, no data-role requireddata-minitrue | false - Compact sized versiondata-rolenone - Prevents auto-enhancement to use native controldata-themeswatch letter (a-z) - Added to the form elementMultiple 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 version for all the checkboxes that appear in the controlgroup. CollapsibleA heading and content wrapped in a container with the data-role=collapsibledata-collapsedtrue | falsedata-collapsed-iconhome | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | searchdata-content-themeswatch letter (a-z)data-expanded-iconhome | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | searchdata-iconposleft | right | top | bottomdata-insettrue | falsedata-minitrue | false - Compact sized versiondata-themeswatch letter (a-z)Collapsible setA number of collapsibles wrapped in a container with the data-role=collapsible-setdata-collapsed-iconhome | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | searchdata-content-themeswatch letter (a-z) - Sets all collapsibles in setdata-expanded-iconhome | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | searchdata-iconposleft | right | top | bottom | notextdata-insettrue | falsedata-minitrue | false - Compact sized versiondata-themeswatch letter (a-z) - Sets all collapsibles in setContentContainer with data-role=contentdata-themeswatch letter (a-z)ControlgroupDIV 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-minitrue | false - Compact sized version for all items in the controlgroupdata-typehorizontal | vertical - For horizontal or vertical item alignmentDialogContainer with data-role=dialog or linked to with data-rel=dialog on the anchor.data-close-btn-textstring - Text for the close button, dialog onlydata-dom-cachetrue | falsedata-overlay-themeswatch letter (a-z) - Overlay theme when the page is opened in a dialogdata-themeswatch letter (a-z)data-titlestring - Title used when page is shownEnhancementContainer with data-enhance=false or data-ajax=falsedata-enhancetrue | falsedata-ajaxtrue | falseAny 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 frameworks navigation functionality when $.mobile.ignoreContentEnabled is set to true.Field containerContainer with data-role=fieldcontain wrapped around label/form element pairFixed ToolbarContainer with data-role=header or data-role=footer plus the attribute data-position=fixeddata-disable-page-zoomtrue | false - User-scaling-ability for pages with fixed toolbarsdata-fullscreentrue | false - Setting toolbars over the page-contentdata-tap-toggletrue | false - Ability to toggle toolbar-visibility on user tap/clickdata-transitionslide | fade | none - Show/hide-transition when a tap/click occursdata-update-page-paddingtrue | 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-showtrue | false - Toolbar-visibility when parent page is shownFlip toggle switchSelect with data-role=slider and two option elementdata-minitrue | false - Compact sized versiondata-rolenone - Prevents auto-enhancement to use native controldata-themeswatch letter (a-z) - Added to the form elementdata-track-themeswatch letter (a-z) - Added to the form elementFooterContainer with data-role=footerdata-idstring - Unique ID. Required for persistent footersdata-positionfixeddata-fullscreentrue | false - Used in conjunction with fixed toolbarsdata-themeswatch letter (a-z)HeaderContainer with data-role=headerdata-idstring - Unique ID. Required for persistent headersdata-positionfixeddata-fullscreentrue | false - Used in conjunction with fixed toolbarsdata-themeswatch letter (a-z)LinkLinks, including those with a data-role=button, and form submit buttons share these attributesdata-ajaxtrue | falsedata-directionreverse - Reverse transition animation (only for page or dialog)data-dom-cachetrue | falsedata-prefetchtrue | falsedata-relback - To move one step back in historydialog - To open link styled as dialog, not tracked in historyexternal - For linking to another domainpopup - For opening a popupdata-transitionfade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | nonedata-position-toorigin - Centers the popup over the link that opens itjQuery selector - Centers the popup over the specified elementwindow - Centers the popup in the windowNote: option only available when used with popups. See also: popup options.ListviewOL or UL with data-role=listviewdata-autodividerstrue | falsedata-count-themeswatch letter (a-z) - Default cdata-divider-themeswatch letter (a-z) - Default bdata-filtertrue | falsedata-filter-placeholderstringdata-filter-themeswatch letter (a-z)data-header-themeswatch letter (a-z)data-insettrue | falsedata-split-iconhome | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | searchdata-split-themeswatch letter (a-z) - Default bdata-themeswatch letter (a-z)Listview itemLI within a listviewdata-filtertextstring - Filter by this value instead of inner textdata-iconhome | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search | falsedata-rolelist-dividerdata-themeswatch letter (a-z)The data-icon attribute is only applicable for a listview item if it contains a link.NavbarA number of LIs wrapped in a container with data-role=navbardata-iconposleft | right | top | bottom | notextTo add icons to the navbar items, the data-icon attribute is used, specifying a standard mobile icon for each item.Navbars inherit the theme-swatch from their parent container. Setting the data-theme attribute to a navbar is not supported. The data-theme attribute can be set individually to the links inside a navbar.PageContainer with data-role=pagedata-add-back-btntrue | false - Auto add back button, header onlydata-back-btn-textstringdata-back-btn-themeswatch letter (a-z)data-close-btn-textstring - Text for the close button, dialog onlydata-dom-cachetrue | falsedata-fullscreentrue | false - Used in conjunction with fixed toolbars Deprecated in 1.1 - use on header and footer instead.data-overlay-themeswatch letter (a-z) - Overlay theme when the page is opened in a dialogdata-themeswatch letter (a-z) - Default cdata-titlestring - Title used when page is showndata-urlurl - Value for updating the URL, instead of the url used to request the pagePopupContainer with data-role=popupdata-cornerstrue | falsedata-overlay-themeswatch letter (a-z) - Default null (transparent background)data-shadowtrue | falsedata-themeswatch letter (a-z) | none - Default inherited, none sets the popup to transparentdata-tolerance30, 15, 30, 15 - Distance from the edges of the window (top, right, bottom, left)Anchor with a data-rel=popup opens the popupdata-position-toorigin - Centers the popup over the link that opens itjQuery selector - Centers the popup over the specified elementwindow - Centers the popup in the windowdata-relpopup - For opening a popupdata-transitionfade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none - The transition to be used when showing/hiding the popupRadio buttonPairs of labels and inputs with type=radio are auto-enhanced, no data-role requireddata-minitrue | false - Compact sized versiondata-rolenone - Prevents auto-enhancement to use native controldata-themeswatch letter (a-z) - Added to the form elementMultiple radion 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 radio buttons to sit side-by-side. Add the data-mini=true to get the mini/compact sized version for all the radio buttons that appear in the controlgroup. SelectAll select form elements are auto-enhanced, no data-role requireddata-iconhome | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search | false data-iconposleft | right | top | bottom | notextdata-inlinetrue | falsedata-minitrue | false