jQuery Mobile Data 屬性
jQuery Data 屬性
jQuery Mobile 使用 HTML5 data-* 屬性為移動(dòng)設(shè)備創(chuàng)建“對(duì)觸摸友好的”美觀的外觀。
在下面的參考列表中，粗體值規(guī)定默認(rèn)值。
Button
帶有 data-role="button" 的超鏈接。工具欄中的按鈕元素和鏈接以及輸入字段會(huì)被自動(dòng)設(shè)置按鈕的樣式，無(wú)需 data-role="button"。
| Data 屬性 | 值 | 描述 |
|---|---|---|
| data-corners | true | false | 規(guī)定按鈕是否有圓角。 |
| data-icon | Icons Reference | 規(guī)定按鈕的圖標(biāo)。默認(rèn)是沒(méi)有圖標(biāo)。 |
| data-iconpos | left | right | top | bottom | notext | 規(guī)定圖標(biāo)的位置。 |
| data-iconshadow | true | false | 規(guī)定按鈕圖標(biāo)是否有陰影。 |
| data-inline | true | false | 規(guī)定按鈕是否是行內(nèi)的。 |
| data-mini | true | false | 規(guī)定按鈕是小型的還是常規(guī)尺寸的。 |
| data-shadow | true | false | 規(guī)定按鈕是否有陰影。 |
| data-theme | letter (a-z) | 規(guī)定按鈕的主題顏色。 |
提示：如需組合多個(gè)按鈕，請(qǐng)使用帶有 data-role="controlgroup" 以及 data-type="horizontal|vertical" 屬性的容器，來(lái)規(guī)定水平還是垂直組合按鈕。
Checkbox
label 和 type="checkbox" 的 input 是成對(duì)的。會(huì)被自動(dòng)設(shè)置為按鈕的樣式，無(wú)需 data-role。
| Data 屬性 | 值 | 描述 |
|---|---|---|
| data-mini | true | false | 規(guī)定復(fù)選框是小型的還是常規(guī)尺寸的。 |
| data-role | none | 防止 jQuery Mobile 將復(fù)選框設(shè)置為按鈕的樣式。 |
| data-theme | letter (a-z) | 規(guī)定復(fù)選框的主題顏色。 |
提示：如需組合多個(gè)復(fù)選框，請(qǐng)使用 data-role="controlgroup" 以及 data-type="horizontal|vertical"，來(lái)規(guī)定水平還是垂直組合復(fù)選框。
Collapsible
標(biāo)題元素，其后是位于帶有 data-role="collapsible" 屬性的容器中的任意 HTML 標(biāo)記。
| Data 屬性 | 值 | 描述 |
|---|---|---|
| data-collapsed | true | false | 規(guī)定內(nèi)容是否應(yīng)該關(guān)閉或展開。 |
| data-collapsed-icon | Icons Reference | 規(guī)定可折疊按鈕的圖標(biāo)。默認(rèn)是 "plus"。 |
| data-content-theme | letter (a-z) | 規(guī)定可折疊內(nèi)容的主題顏色。同時(shí)會(huì)向可折疊內(nèi)容添加圓角。 |
| data-expanded-icon | Icons Reference | 規(guī)定內(nèi)容被展開時(shí)的可折疊按鈕的圖標(biāo)。默認(rèn)是“減號(hào)”。 |
| data-iconpos | left | right | top | bottom | 規(guī)定圖標(biāo)的位置。 |
| data-inset | true | false | 規(guī)定可折疊按鈕是否擁有圓角和外邊距的樣式。 |
| data-mini | true | false | 規(guī)定可折疊按鈕是小型的還是常規(guī)尺寸的。 |
| data-theme | letter (a-z) | 規(guī)定可折疊按鈕的主題顏色。 |
Collapsible Set
帶有 data-role="collapsible-set" 屬性的容器中的可折疊內(nèi)容塊。
| Data 屬性 | 值 | 描述 |
|---|---|---|
| data-collapsed-icon | Icons Reference | 規(guī)定可折疊按鈕的圖標(biāo)。默認(rèn)是“加號(hào)”。 |
| data-content-theme | letter (a-z) | 規(guī)定可折疊內(nèi)容的主題顏色。 |
| data-expanded-icon | Icons Reference | 規(guī)定內(nèi)容被展開時(shí)的可折疊按鈕的圖標(biāo)。默認(rèn)是“減號(hào)”。 |
| data-iconpos | left | right | top | bottom | notext | 規(guī)定圖標(biāo)的位置。 |
| data-inset | true | false | 規(guī)定 collapsibles 是否擁有圓角和外邊距的樣式。 |
| data-mini | true | false | 規(guī)定可折疊按鈕是小型的還是常規(guī)尺寸的。 |
| data-theme | letter (a-z) | 規(guī)定可折疊集合的主題顏色。 |
Content
帶有 data-role="content" 屬性的容器。
| Data 屬性 | 值 | 描述 |
|---|---|---|
| data-theme | letter (a-z) | 規(guī)定內(nèi)容的主題顏色。默認(rèn)是 "c"。 |
Controlgroup
帶有 data-role="controlgroup" 屬性的 <div> or <fieldset> 容器。組合多個(gè)按鈕樣式的單一類型 input（基于鏈接的按鈕、單選按鈕、復(fù)選框、選擇菜單）。
| Data 屬性 | 值 | 描述 |
|---|---|---|
| data-mini | true | false | 規(guī)定組合是小型的還是常規(guī)尺寸的。 |
| data-type | horizontal | vertical | 規(guī)定組合水平還是垂直顯示。 |
Dialog
data-role="dialog" 的容器或者 data-rel="dialog" 的鏈接。
| Data 屬性 | 值 | 描述 |
|---|---|---|
| data-close-btn-text | sometext | 規(guī)定僅用于對(duì)話框的關(guān)閉按鈕的文本。 |
| data-dom-cache | true | false | 規(guī)定是否為個(gè)別頁(yè)面清除 jQuery DOM 緩存（如果設(shè)置 true，則需要注意對(duì) DOM 的管理，并全面測(cè)試所有移動(dòng)設(shè)備）。 |
| data-overlay-theme | letter (a-z) | 規(guī)定對(duì)話頁(yè)面的疊加（背景）色。 |
| data-theme | letter (a-z) | 規(guī)定對(duì)話頁(yè)的主題顏色。 |
| data-title | sometext | 規(guī)定對(duì)話頁(yè)的標(biāo)題。 |
Enhancement
帶有 data-enhance="false" 或 data-ajax="false" 屬性的容器。
| Data 屬性 | 值 | 描述 |
|---|---|---|
| data-enhance | true | false | 如果設(shè)置為 "true"，, (default) jQuery Mobile 會(huì)自動(dòng)為頁(yè)面添加樣式，使其更適合移動(dòng)設(shè)備。如果設(shè)置為 "false"，則框架不會(huì)設(shè)置頁(yè)面的樣式。 |
| data-ajax | true | false | 規(guī)定是否通過(guò) AJAX 來(lái)加載頁(yè)面。 |
注釋：data-enhance="false" 比如結(jié)合 $.mobile.ignoreContentEnabled=true" 使用，以阻止 jQuery Mobile 自動(dòng)添加頁(yè)面樣式。
當(dāng) $.mobile.ignoreContentEnabled 設(shè)置為 true 時(shí)，data-ajax="false" 的容器中的任何鏈接或表單元素，將被框架的導(dǎo)航功能忽略。
Fieldcontainer
包裝 label/form 元素對(duì)的 data-role="fieldcontain" 的容器。
Fixed Toolbar
帶有 data-role="header" 或 data-role="footer" 屬性以及 data-position="fixed" 屬性的容器。
| Data 屬性 | 值 | 描述 |
|---|---|---|
| data-disable-page-zoom | true | false | 規(guī)定用戶是否有能力縮放頁(yè)面。 |
| data-fullscreen | true | false | 規(guī)定工具欄始終位于頂部以及/或者底部。 |
| data-tap-toggle | true | false | 規(guī)定用戶是否有能力通過(guò)點(diǎn)擊/敲擊來(lái)切換工具欄的可見(jiàn)性。 |
| data-transition | slide | fade | none | 規(guī)定當(dāng)敲擊/點(diǎn)擊發(fā)生時(shí)的過(guò)渡效果。 |
| data-update-page-padding | true | false | 規(guī)定當(dāng)發(fā)生 resize、transition 以及 "updatelayout" 事件時(shí)更新頁(yè)面上下內(nèi)邊距（jQuery Mobile 總是在 "pageshow" 事件發(fā)生時(shí)更新內(nèi)邊距） |
| data-visible-on-page-show | true | false | 規(guī)定在顯示父頁(yè)面時(shí)的工具欄可見(jiàn)性。 |
Flip Toggle Switch
帶有 data-role="slider" 屬性的一個(gè) <select> 元素以及兩個(gè) <option> 元素。
| Data 屬性 | 值 | 描述 |
|---|---|---|
| data-mini | true | false | 規(guī)定開關(guān)是小型的還是常規(guī)尺寸的。 |
| data-role | none | 防止 jQuery Mobile 將切換開關(guān)設(shè)置為按鈕樣式。 |
| data-theme | letter (a-z) | 規(guī)定切換開關(guān)的主題顏色。 |
| data-track-theme | letter (a-z) | 規(guī)定軌道的主題顏色。 |
Footer
帶有 data-role="footer" 屬性的容器。
| Data 屬性 | 值 | 描述 |
|---|---|---|
| data-id | sometext | 規(guī)定唯一 ID。對(duì)于 persistent footers 是必需的。 |
| data-position | inline | fixed | 規(guī)定頁(yè)腳與頁(yè)面內(nèi)容是行內(nèi)關(guān)系，還是保留在底部。 |
| data-fullscreen | true | false | 規(guī)定頁(yè)面是否始終位于底部并覆蓋頁(yè)面內(nèi)容 (slightly see-through)。 |
| data-theme | letter (a-z) | 規(guī)定頁(yè)腳的主題顏色。默認(rèn)是 "a"。 |
注釋：如需啟用 fullscreen 定位，請(qǐng)使用 data-position="fixed"，然后為該元素添加 data-fullscreen 屬性。
Header
data-role="header" 的容器。
| Data 屬性 | 值 | 描述 |
|---|---|---|
| data-id | sometext | 規(guī)定唯一 ID。對(duì)于 persistent headers 是必需的。 |
| data-position | inline | fixed | 規(guī)定頁(yè)眉與頁(yè)面內(nèi)容是行內(nèi)關(guān)系，還是保留在頂部。 |
| data-fullscreen | true | false | 規(guī)定頁(yè)面是否始終位于頂部并覆蓋頁(yè)面內(nèi)容 (slightly see-through)。 |
| data-theme | letter (a-z) | 規(guī)定頁(yè)眉的主題顏色。默認(rèn)是 "a"。 |
注釋：如需啟用 fullscreen 定位，請(qǐng)使用 data-position="fixed"，然后為該元素添加 data-fullscreen 屬性。
Link
所有鏈接，包括 data-role="button" 的鏈接以及表單提交按鈕。
| Data 屬性 | 值 | 描述 |
|---|---|---|
| data-ajax | true | false | 規(guī)定是否通過(guò) AJAX 來(lái)加載頁(yè)面，以改進(jìn)用戶體驗(yàn)和過(guò)渡。如果設(shè)置為 false，則 jQuery Mobile 將進(jìn)行普通的頁(yè)面請(qǐng)求。 |
| data-direction | reverse | 反轉(zhuǎn)過(guò)渡動(dòng)畫（僅用于頁(yè)面或?qū)υ挘?/td> |
| data-dom-cache | true | false | 規(guī)定是否清除個(gè)別頁(yè)面的 jQuery DOM 緩存（如果設(shè)置為 true，則您需要注意對(duì) DOM 的管理，并全面測(cè)試所有移動(dòng)設(shè)備）。 |
| data-prefetch | true | false | 規(guī)定是否把頁(yè)面預(yù)取到 DOM 中，以使其在用戶訪問(wèn)時(shí)可用。 |
| data-rel | back | dialog | external | popup | 規(guī)定有關(guān)鏈接如何行為的選項(xiàng)。 Back - 在歷史記錄中向后移動(dòng)一步。 Dialog - 將頁(yè)面作為對(duì)話來(lái)打開，不在歷史中記錄。 External - 鏈接到另一域。 opens - 打開彈出窗口。 |
| data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none | 規(guī)定如何從一頁(yè)過(guò)渡到下一頁(yè)。參加 jQuery Mobile 過(guò)渡。 |
| data-position-to | origin | jQuery selector | window | 規(guī)定彈出框的位置。 Origin - 默認(rèn)。在打開它的鏈接上彈出。 jQuery selector - 在指定元素上彈出。 Window - 在窗口屏幕中間彈出。 |
List
帶有 data-role="listview" 屬性的 <ol> 或 <ul>。
| Data 屬性 | 值 | 描述 |
|---|---|---|
| data-autodividers | true | false | 規(guī)定是否自動(dòng)分隔列表項(xiàng)。 |
| data-count-theme | letter (a-z) | 規(guī)定計(jì)數(shù)泡沫的主題顏色。默認(rèn)是 "c"。 |
| data-divider-theme | letter (a-z) | 規(guī)定列表分隔符的主題顏色。默認(rèn)是 "b"。 |
| data-filter | true | false | 規(guī)定是否在列表中添加搜索框。 |
| data-filter-placeholder | sometext | 規(guī)定搜索框中的文本。默認(rèn)是 "Filter items..."。 |
| data-filter-theme | letter (a-z) | 規(guī)定搜索過(guò)濾程序的主題顏色。默認(rèn)是 "c"。 |
| data-icon | Icons Reference | 規(guī)定列表的圖標(biāo)。 |
| data-inset | true | false | 規(guī)定是否為列表添加圓角和外邊距樣式。 |
| data-split-icon | Icons Reference | 規(guī)定劃分按鈕的圖標(biāo)。默認(rèn)是 "arrow-r"。 |
| data-split-theme | letter (a-z) | 規(guī)定劃分按鈕的主題顏色。默認(rèn)是 "b"。 |
| data-theme | letter (a-z) | 規(guī)定列表的主題顏色。 |
List item
帶有 data-role="listview" 屬性的 <ol> 或 <ul> 中的 <li>。
| Data 屬性 | 值 | 描述 |
|---|---|---|
| data-filtertext | sometext | 規(guī)定在過(guò)濾元素時(shí)搜索的文本。該文本而不是實(shí)際的列表項(xiàng)文本將會(huì)被搜索。 |
| data-icon | Icons Reference | 規(guī)定列表項(xiàng)的圖標(biāo)。 |
| data-role | list-divider | 規(guī)定列表項(xiàng)的分隔符。 |
| data-theme | letter (a-z) | 規(guī)定列表項(xiàng)的主題顏色。 |
注釋：data-icon 屬性僅適用于含有鏈接的列表項(xiàng)。
Navbar
帶有 data-role="navbar" 屬性的容器內(nèi)部的 <li> 元素。
| Data 屬性 | 值 | 描述 |
|---|---|---|
| data-icon | Icons Reference | 規(guī)定列表項(xiàng)的圖標(biāo)。 |
| data-iconpos | left | right | top | bottom | notext | 規(guī)定圖標(biāo)的位置。 |
提示：導(dǎo)航欄從其父容器繼承 theme-swatch。向?qū)Ш綑谠O(shè)置 data-theme 屬性是不可行的�？梢詥为�(dú)向 navbar 中的每個(gè)鏈接設(shè)置 data-theme 屬性。
Page
帶有 data-role="page" 屬性的容器。
| Data 屬性 | 值 | 描述 |
|---|---|---|
| data-add-back-btn | true | false | 自動(dòng)添加后退按鈕，僅用于頁(yè)眉。 |
| data-back-btn-text | sometext | 規(guī)定后退按鈕的文本。 |
| data-back-btn-theme | letter (a-z) | 規(guī)定后退按鈕的主題顏色。 |
| data-close-btn-text | letter (a-z) | 規(guī)定對(duì)話上的關(guān)閉按鈕的文本。 |
| data-dom-cache | true | false | 規(guī)定是否清除個(gè)別頁(yè)面的 jQuery DOM 緩存（如果設(shè)置為 true，則您需要注意對(duì) DOM 的管理，并全面測(cè)試所有移動(dòng)設(shè)備）。 |
| data-overlay-theme | letter (a-z) | 規(guī)定對(duì)話頁(yè)面的疊加（背景）色。 |
| data-theme | letter (a-z) | 規(guī)定頁(yè)面的主題顏色。默認(rèn)是 "c"。 |
| data-title | sometext | 規(guī)定頁(yè)面的標(biāo)題。 |
| data-url | url | 該值用于更新 URL，而不是用于請(qǐng)求頁(yè)面。 |
Popup
帶有 data-role="popup" 屬性的容器。
| Data 屬性 | 值 | 描述 |
|---|---|---|
| data-corners | true | false | 規(guī)定彈出框是否有圓角。 |
| data-overlay-theme | letter (a-z) | 規(guī)定彈出框的疊加（背景）色。默認(rèn)是透明背景（none）。 |
| data-shadow | true | false | 規(guī)定彈出框是否有陰影。 |
| data-theme | letter (a-z) | 規(guī)定彈出框的主題顏色。默認(rèn)是繼承，"none" 設(shè)置為透明。 |
| data-tolerance | 30, 15, 30, 15 | 規(guī)定距離窗口邊緣 (top, right, bottom, left) 的距離。 |
帶有 data-rel="popup" 屬性的錨：
| Data 屬性 | 值 | 描述 |
|---|---|---|
| data-position-to | origin | jQuery selector | window | 規(guī)定彈出框的位置。 Origin - 默認(rèn)。彈出框位于打開它的鏈接上。 jQuery selector - 彈出框位于指定元素上。 Window - 彈出框位于窗口屏幕中央。 |
| data-rel | popup | 用于打開的彈出框。 |
| data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none | 規(guī)定如何從一頁(yè)過(guò)渡到下一頁(yè)。參加 jQuery Mobile 過(guò)渡。 |
Radio Button
label 與 type="radio" 的 input 對(duì)。會(huì)被自動(dòng)設(shè)置為按鈕樣式，無(wú)需 data-role。
| Data 屬性 | 值 | 描述 |
|---|---|---|
| data-mini | true | false | 規(guī)定按鈕是否小型的或者是常規(guī)尺寸的。 |
| data-role | none | 放置 jQuery Mobile 將單選按鈕設(shè)置為 enhanced buttons 的樣式。 |
| data-theme | letter (a-z) | 規(guī)定單選按鈕的主題顏色。 |
提示：如需組合多個(gè)單選按鈕，請(qǐng)使用 data-role="controlgroup" 以及 data-type="horizontal|vertical" 來(lái)規(guī)定水平還是垂直地組合按鈕。
Select
所有 <select> 元素。會(huì)被自動(dòng)設(shè)置按鈕的樣式，無(wú)需 date-role。
| Data 屬性 | 值 | 描述 |
|---|---|---|
| data-icon | Icons Reference | 規(guī)定 select 元素的圖標(biāo)。默認(rèn)是 "arrow-d"。 |
| data-iconpos | left | right | top | bottom | notext | 規(guī)定圖標(biāo)的位置。 |
| data-inline | true | false | 規(guī)定 select 元素是否是行內(nèi)。 |
| data-mini | true | false | 規(guī)定 select 元素是小型的還是常規(guī)尺寸的。 |
| data-native-menu | true | false | 如果設(shè)置為 false，則使用 jQuery 自己的自定義選擇菜單（如果您希望選擇菜單在所有移動(dòng)設(shè)備上擁有一致的外觀，則推薦使用）。 |
| data-overlay-theme | letter (a-z) | 規(guī)定 jQuery 自定義選擇菜單的主題顏色（與 data-native-menu="false" 一起使用）。 |
| data-placeholder | true | false | 可以在非原生 select 的 <option> 元素上設(shè)置。 |
| data-role | none | 放置 jQuery Mobile 將 select 元素設(shè)置為按鈕樣式。 |
| data-theme | letter (a-z) | 規(guī)定 select 元素的主題顏色。 |
提示：如需組合多個(gè) select 元素，請(qǐng)使用 data-role="controlgroup" 以及 data-type="horizontal|vertical" 來(lái)規(guī)定把該元素水平還是垂直地進(jìn)行組合。
Slider
type="range" 的 input 元素。會(huì)被自動(dòng)設(shè)置為按鈕樣式，無(wú)需 data-role。
| Data 屬性 | 值 | 描述 |
|---|---|---|
| data-highlight | true | false | 規(guī)定是否突出顯示滑塊軌道。 |
| data-mini | true | false | 規(guī)定滑塊是小型的還是常規(guī)尺寸的。 |
| data-role | none | 放置 jQuery Mobile 將滑塊設(shè)置按鈕的樣式。 |
| data-theme | letter (a-z) | 規(guī)定滑塊控件（input、handle 和 track）的主題顏色。 |
| data-track-theme | letter (a-z) | 規(guī)定滑塊軌道的主題顏色。 |
Text input & Textarea
type="text|search|etc." 的 input 元素或 textarea 元素。會(huì)被自動(dòng)設(shè)置樣式，無(wú)需 data-role。
| Data 屬性 | 值 | 描述 |
|---|---|---|
| data-mini | true | false | 規(guī)定是否 input 元素是小型的還是常規(guī)尺寸的。 |
| data-role | none | 放置 jQuery Mobile 將 input/textarea 設(shè)置問(wèn)按鈕的樣式。 |
| data-theme | letter (a-z) | 規(guī)定輸入字段的主題顏色。 |