HTML5标签120版本.docx

1、HTML5标签120版本To avoid naming conflicts with other plugins or frameworks that also use data- attributes1、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-

2、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 （紧凑版本的大小）data-shadowtrue | falsedata-themeswatch let

3、ter (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=horizontalattribute 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

4、 controlgroup. 2、CheckboxPairs of labels and inputs with type=checkbox are auto-enhanced, no data-role requireddata-minitrue | false （ Compact sized version）data-rolenone （ Prevents auto-enhancement to use native control）data-themeswatch letter (a-z) （Added to the form element）Multiple checkboxes ca

5、n 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. 3、Coll

6、apsibleA 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-the

7、meswatch 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 versi

8、ondata-themeswatch letter (a-z)4、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 |

9、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 | notextdat

10、a-insettrue | falsedata-minitrue | false - Compact sized versiondata-themeswatch letter (a-z) - Sets all collapsibles in set5、ContentContainer with data-role=contentdata-themeswatch letter (a-z)6、ControlgroupDIV or FIELDSET container with data-role=controlgroup. Visually integrate multiple button-st

11、yled 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 s

12、ized version for all items in the controlgroupdata-typehorizontal | vertical - For horizontal or vertical item alignment7、DialogContainer with data-role=dialog or linked to with data-rel=dialog on the anchor.data-close-btn-textstring （Text for the close button, dialog only）data-dom-cachetrue | false

13、data-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 shown）8、EnhancementContainer with data-enhance=false or data-ajax=falsedata-enhancetrue | falsedata-ajaxtrue | falseAny DOM elements inside

14、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

15、=false containers will be ignored by the frameworks navigation functionality when $.mobile.ignoreContentEnabled is set to true.9、Field containerContainer with data-role=fieldcontain wrapped around label/form element pair10、Fixed ToolbarContainer with data-role=header or data-role=footer plus the att

16、ribute data-position=fixeddata-disable-page-zoomtrue | false （User-scaling-ability for pages with fixed toolbars）data-fullscreentrue | false （Setting toolbars over the page-content）data-tap-toggletrue | false （Ability to toggle toolbar-visibility on user tap/click）data-transitionslide | fade | none

17、（Show/hide-transition when a tap/click occurs）data-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 p

18、arent page is shown）11、Flip toggle switchSelect with data-role=slider and two option elementdata-minitrue | false - Compact sized versiondata-rolenone （Prevents auto-enhancement to use native control）data-themeswatch letter (a-z) - Added to the form elementdata-track-themeswatch letter (a-z) - Added

19、 to the form element12、FooterContainer with data-role=footerdata-idstring （Unique ID. Required for persistent footers）data-positionfixeddata-fullscreentrue | false（Used in conjunction with fixed toolbars）data-themeswatch letter (a-z)13、HeaderContainer with data-role=headerdata-idstring （Unique ID. R

20、equired for persistent headers）data-positionfixeddata-fullscreentrue | false - Used in conjunction with fixed toolbarsdata-themeswatch letter (a-z)14、LinkLinks, including those with a data-role=button, and form submit buttons share these attributesdata-ajaxtrue | falsedata-directionreverse （Reverse

21、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

22、 | 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

23、: popup options.15、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 lett

24、er (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)16、Listview itemLI wit

25、hin 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 (

26、a-z)The data-icon attribute is only applicable for a listview item if it contains a link.17、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 mobil

27、e 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.18、PageContainer with data-role=pagedata-add-back-btntrue | false - Auto add

28、 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 instea

29、d. 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 page19、PopupContainer with data-role=p

30、opupAnchor with a data-rel=popup opens the 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 （Distan

31、ce from the edges of the window (top, right, bottom, left)）data-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 whe