4.4 Data attribute reference
การอ้างอิง Data attribute
jQuery Mobile framework จะใช้ HTML5 data- attributes โดยอนุญาตให้ใช้ตัวย่อ
และองค์ประกอบของ markup-based ใน widget
โดยแอตทริบิวต์เหล่านี้จะเป็นตัวเลือกที่สมบูรณ์ซึ่งเรียกปลั๊กอินเองและผ่าน options ที่สนับสนุนได้
ในทันที เพื่อหลีกเลี่ยงการตั้งชื่อที่เกิดความขัดแย้งกับปลั๊กอินอื่น ๆ หรือ frameworks ที่ยังใช้ data- attributes โดยจะปรับเปลี่ยน ns global option เพื่อกำหนดค่าของ namespace
Button
การเชื่อมโยงโดยใช้ data-role="button" Input-based buttons ลิงค์ใน toolbars และ button elements จะถูกเพิ่มโดยอัตโนมัติ โดยไม่ต้องใช้ data-role
ในกรณีที่มีปุ่มหลายปุ่มสามารถถูกครอบด้วย attributeที่ชื่อว่า data-role="controlgroup" เพื่อจัดกลุ่มในแนวตั้ง และเพิ่มattribute ที่ชื่อว่า data-type="horizontal" เพื่อจัดในแนวนอน และเพิ่ม data-mini="true" เพื่อทำให้ปุ่มทั้งหมดที่ปรากฏใน controlgroup มีขนาดเล็กกะทัดรัด
| 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) |
Checkbox
labels และ input สามารถเรียกใช้ ด้วย type="checkbox" โดยทั้งสองจะถูกเพิ่มโดยอัตโนมัติ โดยไม่ต้องใช้ data-role
ในกรณีที่มีCheckboxหลายอันสามารถถูกครอบด้วย attributeที่ชื่อว่า data-role="controlgroup" เพื่อจัดกลุ่มในแนวตั้ง และเพิ่มattribute ที่ชื่อว่า data-type="horizontal" เพื่อจัดในแนวนอน และเพิ่ม data-mini="true" เพื่อทำให้Checkboxทั้งหมดที่ปรากฏใน controlgroup มีขนาดเล็กกะทัดรัด
| 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 |
Collapsible
พื้นที่ในส่วนของ head และเนื้อหา(content) สามารถถูกครอบด้วย 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
หมายเลขของ collapsible จะครอบด้วย 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
พื้นที่ของเนื้อหาจะถูกครอบด้วย data-role="content"
| data-theme | swatch letter (a-z) |
|---|
Controlgroup
การครอบด้วย data-role="controlgroup"ภายในพื้นที่ DIV หรือ FIELDSETการgroup ปุ่มหลายๆปุ่มที่หลากหลาย style จาก checkboxes, link-based buttons, radio buttons และ selects ได้ โดยการ group checkboxes และ radio buttons ภายในพื้นที่ div จะถูกครอบด้วย data-role="fieldcontain" เพื่อปรับปรุง style ของ lable
| data-mini | true | false - Compact sized version for all items in the controlgroup |
|---|---|
| data-type | horizontal | vertical - For horizontal or vertical item alignment |
Dialog
พื้นที่จะถูกครอบด้วย data-role="dialog" หรือ เชื่อมโยง ด้วย data-rel="dialog"
| 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
พื้นที่จะถูกครอบด้วย data-enhance="false" หรือ data-ajax="false"
DOM elementsใดๆ ภายใน data-enhance="false" จะรักษา elementsด้วย data-role="page|dialog" โดยจะละเว้นในระหว่างเริ่มต้นการเพิ่มประสิทธิภาพ และจะตั้งค่าก่อนที่จะเพิ่มประสิทธิภาพ ซึ่งจะสร้าง $.mobile.ignoreContentEnabled ให้ภายหลัง เช่นการผูก mobileinit
link หรือ form element ใดๆ ภายในพื้นที่ data-ajax="false" framework จะละเว้น เมื่อ $.mobile.ignoreContentEnabled ถูกตั้งค่าเป็น true
| data-enhance | true | false |
|---|---|
| data-ajax | true | false |
Field container
พื้นที่ label/form element จะถูกครอบด้วย data-role="fieldcontain"Fixed Toolbar
พื้นที่จะถูกครอบด้วย data-role="header" หรือ data-role="footer" และเพิ่ม 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
เลือกด้วย data-role="slider" และ two option element
| 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 |
| data-track-theme | swatch letter (a-z) - Added to the form element |
Footer
พื้นที่จะถูกครอบด้วย data-role="footer"
| data-id | string - Unique ID. Required for persistent footers |
|---|---|
| data-position | fixed |
| data-fullscreen | true | false - Used in conjunction with fixed toolbars |
| data-theme | swatch letter (a-z) |
Header
พื้นที่จะถูกครอบด้วย data-role="header"
| data-id | string - Unique ID. Required for persistent headers |
|---|---|
| data-position | fixed |
| data-fullscreen | true | false - Used in conjunction with fixed toolbars |
| data-theme | swatch letter (a-z) |
Link
การเชื่อมโยง including ด้วย data-role="button" และ form submit buttons จะ share attributes เหล่านี้
| data-ajax | true | false |
|---|---|
| data-direction | reverse - Reverse transition animation (only for page or dialog) |
| data-dom-cache | true | false |
| data-prefetch | true | false |
| data-rel | back - To move one step back in history dialog - To open link styled as dialog, not tracked in history external - For linking to another domain popup - For opening a popup |
| data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none |
| data-position-to | origin - Centers the popup over the link that opens it jQuery selector - Centers the popup over the specified element window - Centers the popup in the window |
Listview
OL หรือ UL จะถูกครอบด้วย data-role="listview"
| data-autodividers | true | false | |
|---|---|---|
| data-count-theme | swatch letter (a-z) - Default "c" | |
| data-divider-theme | swatch letter (a-z) - Default "b" | |
| data-filter | true | false | |
| data-filter-placeholder | string | |
| data-filter-theme | swatch letter (a-z) | |
| data-header-theme | swatch letter (a-z) | |
| 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 | false | |
| data-inset | true | false | |
| data-split-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-split-theme | swatch letter (a-z) - Default "b" | |
| data-theme | swatch letter (a-z) |
Listview item
LI ภายใน listviewattribute data-icon จะใช้ได้เฉพาะกับ ListView ที่มีการเชื่อมโยงเท่านั้น
| data-filtertext | string - Filter by this value instead of inner text |
|---|---|
| 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 | false |
| data-role | list-divider |
| data-theme | swatch letter (a-z) |
Navbar
หลายเลขของ LIs ครอบคลุมพื้นที่ด้วย data-role="navbar"
การเพิ่มไอคอนไปยัง navbar items และ attribute data-icon ถูกนำมาใช้ เพื่อระบุมาตรฐานของ icon สำหรับมือถือของแต่ละรายการ
Navbars จะสืบทอด theme-swatch จาก parent container โดย navbar จะไม่รองรับการกำหนดจากattribute data-theme ซึ่ง สามารถกำหนด attribute data-theme ได้เฉพาะ link ภายใน navbar
| data-iconpos | left | right | top | bottom | notext |
|---|
Page
พื้นที่จะถูกครอบด้วย data-role="page"
| data-add-back-btn | true | false - Auto add back button, header only |
|---|---|
| data-back-btn-text | string |
| data-back-btn-theme | swatch letter (a-z) |
| data-close-btn-text | string - Text for the close button, dialog only |
| data-dom-cache | true | false |
| data-fullscreen | true | false - Used in conjunction with fixed toolbars Deprecated in 1.1 - use on header and footer instead. |
| data-overlay-theme | swatch letter (a-z) - Overlay theme when the page is opened in a dialog |
| data-theme | swatch letter (a-z) - Default "c" |
| data-title | string - Title used when page is shown |
| data-url | url - Value for updating the URL, instead of the url used to request the page |
Popup
พื้นที่จะถูกครอบด้วย data-role="popup"
| data-corners | true | false |
|---|---|
| data-overlay-theme | swatch letter (a-z) - Default "null" (transparent background) |
| data-shadow | true | false |
| data-theme | swatch letter (a-z) | none - Default inherited, "none" sets the popup to transparent |
| data-tolerance | 30, 15, 30, 15 - Distance from the edges of the window (top, right, bottom, left) |
Anchor ด้วย data-rel="popup" เพื่อเปิด popup
| data-position-to | origin - Centers the popup over the link that opens it jQuery selector - Centers the popup over the specified element window - Centers the popup in the window |
|---|---|
| data-rel | popup - For opening a popup |
| data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none - The transition to be used when showing/hiding the popup |
Radio button
labels และ input สามารถเรียกใช้ ด้วย type="radio" โดยทั้งสองจะถูกเพิ่มโดยอัตโนมัติ โดยไม่ต้องใช้ data-role
ในกรณีที่มี radio button เยอะๆ สามารถครอบด้วย attributeที่ชื่อว่า data-role="controlgroup" เพื่อจัดกลุ่มในแนวตั้ง และเพิ่มattribute ที่ชื่อว่า data-type="horizontal" เพื่อจัดในแนวนอน และเพิ่ม data-mini="true" เพื่อทำให้radio buttonทั้งหมดที่ปรากฏใน controlgroup มีขนาดเล็กกระทัดรัด
| 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 |
Select
เลือกทั้งหมด จาก element โดยจะถูกเพิ่มโดยอัตโนมัติ โดยไม่ต้องใช้ data-role
ในกรณีที่ต้องเลือกเยอะๆ สามารถครอบด้วย attributeที่ชื่อว่า data-role="controlgroup" ภายใน fieldset เพื่อจัดกลุ่มในแนวตั้งและเพิ่มattribute ที่ชื่อว่า data-type="horizontal" เพื่อจัดในแนวนอน
| 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 | false |
|---|---|
| data-iconpos | left | right | top | bottom | notext |
| data-inline | true | false |
| data-mini | true | false - Compact sized version |
| data-native-menu | true | false |
| data-overlay-theme | swatch letter (a-z) - Overlay theme for non-native selects |
| data-placeholder | true | false - Can be set on option element of a non-native select |
| data-role | none - Prevents auto-enhancement to use native control |
| data-theme | swatch letter (a-z) - Added to the form element |
Slider
ใส่ type="range" โดยจะถูกเพิ่มโดยอัตโนมัติ โดยไม่ต้องใช้ data-role
| data-highlight | true | false - Adds an active state fill on track to handle |
|---|---|
| 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 |
| data-track-theme | swatch letter (a-z) - Added to the form element |
Text input & Textarea
ใส่ type="text|number|search|etc." หรือ textarea elements โดยจะถูกเพิ่มโดยอัตโนมัติ โดยไม่ต้องใช้ data-role
| 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 |