HTML5的data-属性说明.doc

1、 1 / 14Data 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 w

2、ith 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-corners true | falsedata-icon home |

3、delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | searchdata-iconpos left | right | top | bottom | notextdata-iconshadow true | falsedata-inline true | falsedata-mini true | false - Compact sized versiondat

4、a-shadow true | falsedata-theme swatch letter (a-z)2 / 14Multiple 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/compa

5、ct 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-mini true | false - Compact sized versiondata-role none - Prevents auto-enhancement to use native controldata-theme swatch letter

6、 (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

7、for all the checkboxes that appear in the controlgroup. CollapsibleA heading and content wrapped in a container with the data-role=“collapsible“data-collapsed true | falsedata-collapsed-icon home | delete | plus | arrow-u | arrow-d | check | gear | 3 / 14grid | star | custom | arrow-r | arrow-l | mi

8、nus | refresh | forward | back | alert | info | searchdata-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 | searchdata-iconpos left | right | top

9、| bottomdata-inset true | falsedata-mini true | false - Compact sized versiondata-theme swatch letter (a-z)Collapsible setA 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 | cu

10、stom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | searchdata-content-theme swatch letter (a-z) - Sets all collapsibles in setdata-expanded-icon home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | 4 / 14forw

11、ard | back | alert | info | searchdata-iconpos left | right | top | bottom | notextdata-inset true | falsedata-mini true | false - Compact sized versiondata-theme swatch letter (a-z) - Sets all collapsibles in setContentContainer with data-role=“content“data-theme swatch letter (a-z)ControlgroupDIV

12、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 w

13、ith the data-role=“fieldcontain“, to improve label styling.data-mini true | false - Compact sized version for all items in the controlgroupdata-type horizontal | vertical - For horizontal or vertical item alignmentDialog5 / 14Container with data-role=“dialog“ or linked to with data-rel=“dialog“ on t

14、he anchor.data-close-btn-text string - Text for the close button, dialog onlydata-dom-cache true | falsedata-overlay-theme swatch letter (a-z) - Overlay theme when the page is opened in a dialogdata-theme swatch letter (a-z)data-title string - Title used when page is shownEnhancementContainer with d

15、ata-enhance=“false“ or data-ajax=“false“data-enhance true | falsedata-ajax true | 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.ignoreContent

16、Enabled 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.6 / 14Field containerContainer with data-role=“fieldcont

17、ain“ wrapped around label/form element pairFixed ToolbarContainer 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 toolbarsdata-fullscreen true | false - Setting toolbars over the pag

18、e-contentdata-tap-toggle true | false - Ability to toggle toolbar-visibility on user tap/clickdata-transition slide | fade | none - Show/hide-transition when a tap/click occursdata-update-page-padding true | false - Have the page top and bottom padding updated on resize, transition, “updatelayout“ e

19、vents (the framework always updates the padding on the “pageshow“ event).data-visible-on-page-show true | false - Toolbar-visibility when parent page is shown7 / 14Flip toggle switchSelect with data-role=“slider“ and two option elementdata-mini true | false - Compact sized versiondata-role none - Pr

20、events auto-enhancement to use native controldata-theme swatch letter (a-z) - Added to the form elementdata-track-theme swatch letter (a-z) - Added to the form elementFooterContainer with data-role=“footer“data-id string - Unique ID. Required for persistent footersdata-position fixeddata-fullscreen

21、true | false - Used in conjunction with fixed toolbarsdata-theme swatch letter (a-z)HeaderContainer with data-role=“header“data-id string - Unique ID. Required for persistent headersdata-position fixeddata-fullscreen true | false - Used in conjunction with fixed toolbarsdata-theme swatch letter (a-z

22、)Link8 / 14Links, including those with a data-role=“button“, and form submit buttons share these attributesdata-ajax true | falsedata-direction reverse - Reverse transition animation (only for page or dialog)data-dom-cache true | falsedata-prefetch true | falsedata-rel back - To move one step back i

23、n historydialog - To open link styled as dialog, not tracked in historyexternal - For linking to another domainpopup - For opening a popupdata-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | nonedata-position-to origin - Centers the popup over the link that ope

24、ns 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.9 / 14ListviewOL or UL with data-role=“listview“data-autodividers true | falsedata-count-theme swatch letter (a-z) - D

25、efault “c“data-divider-theme swatch letter (a-z) - Default “b“data-filter true | falsedata-filter-placeholder stringdata-filter-theme swatch letter (a-z)data-header-theme swatch letter (a-z)data-inset true | falsedata-split-icon home | delete | plus | arrow-u | arrow-d | check | gear | grid | star |

26、 custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | searchdata-split-theme swatch letter (a-z) - Default “b“data-theme swatch letter (a-z)Listview itemLI within a listviewdata-filtertext string - Filter by this value instead of inner textdata-icon home | delete | plus | a

27、rrow-u | arrow-d | check | gear | grid 10 / 14| star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search | falsedata-role list-dividerdata-theme swatch letter (a-z)The data-icon attribute is only applicable for a listview item if it contains a link.NavbarA number

28、of LIs wrapped in a container with data-role=“navbar“data-iconpos left | 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-them

29、e 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=“page“data-add-back-btn true | false - Auto add back button, header onlydata-back-btn-text stringdata-back-btn-theme swatch letter (a-z)data-close-btn-text string - Text for the close button, dialog only