jQuery Mobile Data 屬性
2018-02-03 17:26 更新
jQuery Mobile Data 屬性
本節(jié)介紹jQuery Mobile中的Data屬性，有較多的內(nèi)容。
jQuery Data 屬性
jQuery Mobile 使用 HTML5 data-* 屬性來(lái)為移動(dòng)設(shè)備創(chuàng)建更具觸摸友好性和吸引性的外觀。
在下面的參考列表中，粗體顯示的值為默認(rèn)值。
按鈕
帶有 data-role="button" 的超鏈接。button 元素、工具欄中的鏈接以及 input 字段都會(huì)自動(dòng)渲染成按鈕樣式，不需要添加 data-role="button"。
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-corners | true | false | 規(guī)定按鈕是否圓角 |
| data-icon | Icons 參考手冊(cè) | 規(guī)定按鈕的圖表。默認(rèn)沒有圖標(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)聯(lián) |
| 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ī)定是否水平或垂直組合按鈕。 |
|---|
提示：更多關(guān)于按鈕的信息，請(qǐng)你參考本站的“jQuery Mobile按鈕”部分！
復(fù)選框
帶有 type="checkbox" 的成雙成對(duì)的 label 和 input。它們會(huì)被自動(dòng)渲染程按鈕樣式，data-role 不是必需的。
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-mini | true | false | 規(guī)定復(fù)選框是小尺寸還是常規(guī)尺寸 |
| data-role | none | 防止 jQuery Mobile 把復(fù)選框渲染成按鈕樣式 |
| data-theme | letter (a-z) | 規(guī)定復(fù)選框的主題顏色 |
| 如需組合多個(gè)復(fù)選框，請(qǐng)使用帶有 data-role="controlgroup" 屬性和 data-type="horizontal|vertical" 的容器來(lái)規(guī)定是否水平或垂直組合復(fù)選框。 |
|---|
可折疊塊
在帶有 data-role="collapsible" 的容器內(nèi)部的后跟任意 HTML 標(biāo)記的標(biāo)題元素。
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-collapsed | true | false | 規(guī)定內(nèi)容是折疊還是展開 |
| data-collapsed-icon | Icons 參考手冊(cè) | 規(guī)定可折疊按鈕的圖標(biāo)。默認(rèn)是 "plus" |
| data-content-theme | letter (a-z) | 規(guī)定可折疊內(nèi)容的主題顏色。是否為可折疊內(nèi)容添加圓角 |
| data-expanded-icon | Icons 參考手冊(cè) | 規(guī)定當(dāng)內(nèi)容展開時(shí)可折疊按鈕的圖標(biāo)。默認(rèn)是 "minus" |
| data-iconpos | left | right | top | bottom | 規(guī)定圖標(biāo)的位置 |
| data-inset | true | false | 規(guī)定可折疊按鈕是否渲染成圓角且?guī)膺吘?/td> |
| data-mini | true | false | 規(guī)定可折疊按鈕是小尺寸還是常規(guī)尺寸 |
| data-theme | letter (a-z) | 規(guī)定可折疊按鈕的主題顏色 |
可折疊集合
在帶有 data-role="collapsible-set" 的容器內(nèi)部的可折疊內(nèi)容塊。
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-collapsed-icon | Icons 參考手冊(cè) | 規(guī)定可折疊按鈕的圖標(biāo)。默認(rèn)是 "plus" |
| data-content-theme | letter (a-z) | 規(guī)定可折疊按鈕的主題顏色 |
| data-expanded-icon | Icons 參考手冊(cè) | 規(guī)定當(dāng)內(nèi)容展開時(shí)可折疊按鈕的圖標(biāo)。默認(rèn)是 "minus" |
| data-iconpos | left | right | top | bottom | notext | 規(guī)定圖標(biāo)的位置 |
| data-inset | true | false | 規(guī)定可折疊塊是否渲染成圓角且?guī)膺吘?/td> |
| data-mini | true | false | 規(guī)定可折疊按鈕是小尺寸還是常規(guī)尺寸 |
| data-theme | letter (a-z) | 規(guī)定可折疊集合的主題顏色 |
內(nèi)容
帶有 data-role="content" 的容器。
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-theme | letter (a-z) | 規(guī)定內(nèi)容的主題顏色。默認(rèn)是 "c" |
控件組
帶有 data-role="controlgroup" 的 <div> 或 <fieldset> 容器。 組合單個(gè)類型（基于鏈接的按鈕、單選按鈕、復(fù)選框、select 元素）的多個(gè)按鈕樣式的 input。對(duì)于組合表單復(fù)選框和單選按鈕，推薦在帶有 data-role="fieldcontain" 的 <div> 內(nèi)使用 <fieldset> 容器來(lái)改進(jìn)標(biāo)簽樣式。
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-mini | true | false | 規(guī)定控件組是小尺寸還是常規(guī)尺寸 |
| data-type | horizontal | vertical | 規(guī)定控件組是水平顯示還是垂直顯示 |
對(duì)話框
帶有 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，您必須自己管理 DOM 并在所有移動(dòng)設(shè)備上進(jìn)行測(cè)試） |
| 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)題 |
增強(qiáng)
帶有 data-enhance="false" 或 data-ajax="false" 的容器。
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-enhance | true | false | 如果設(shè)置為 "true"（默認(rèn)），jQuery Mobile 會(huì)自動(dòng)渲染頁(yè)面，使其更適合于移動(dòng)設(shè)備。如果設(shè)置為 "false"，框架將不會(huì)渲染頁(yè)面 |
| data-ajax | true | false | 規(guī)定是否通過 ajax 加載頁(yè)面 |
注意：data-enhance="false" 必須與 $.mobile.ignoreContentEnabled=true" 一同使用來(lái)阻止 jQuery Mobile 自動(dòng)渲染頁(yè)面。
當(dāng) $.mobile.ignoreContentEnabled 設(shè)置為 true 時(shí)，data-ajax="false" 容器內(nèi)的任何鏈接或表單元素將會(huì)被框架的導(dǎo)航功能忽略。
域容器
包圍在 label/表單元素對(duì)周圍的帶有 data-role="fieldcontain" 的容器。
固定工具欄
帶有 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ī)定用戶是否能夠通過點(diǎn)擊改變工具欄的可見性 |
| data-transition | slide | fade | none | 規(guī)定當(dāng)點(diǎn)擊發(fā)生時(shí)的切換效果 |
| data-update-page-padding | true | false | 規(guī)定頁(yè)面頂部和底部的內(nèi)邊距是否在 resize、transition 和 "updatelayout" 事件發(fā)生時(shí)更新（jQuery Mobile 在 "pageshow" 事件發(fā)生時(shí)總是更新內(nèi)邊距） |
| data-visible-on-page-show | true | false | 規(guī)定當(dāng)父頁(yè)面顯示時(shí)工具欄的可見性 |
翻轉(zhuǎn)撥動(dòng)開關(guān)
一個(gè)帶有 data-role="slider" 的 <select> 元素和兩個(gè) <option> 元素。
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-mini | true | false | 規(guī)定開關(guān)是小尺寸還是常規(guī)尺寸 |
| data-role | none | 防止 jQuery Mobile 把撥動(dòng)開關(guān)渲染成按鈕樣式 |
| data-theme | letter (a-z) | 規(guī)定撥動(dòng)開關(guān)的主題顏色 |
| data-track-theme | letter (a-z) | 規(guī)定軌道的主題顏色 |
尾部欄
帶有 data-role="footer" 的容器。
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-id | sometext | 規(guī)定唯一 ID。對(duì)于持續(xù)的尾部欄是必需的 |
| data-position | inline | fixed | 規(guī)定尾部欄是與頁(yè)面內(nèi)容內(nèi)聯(lián)還是保持固定在底部 |
| data-fullscreen | true | false | 規(guī)定尾部欄是固定在底部還是覆蓋在頁(yè)面內(nèi)容上（查看范圍更大） |
| data-theme | letter (a-z) | 規(guī)定尾部欄的主題顏色。默認(rèn)是 "a" |
注意：如需啟用全屏定位，請(qǐng)使用 data-position="fixed"，然后添加 data-fullscreen 屬性到元素上。
頭部欄
帶有 data-role="header" 的容器。
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-id | sometext | 規(guī)定唯一 ID。對(duì)于持續(xù)的頭部欄是必需的 |
| data-position | inline | fixed | 規(guī)定頭部欄是與頁(yè)面內(nèi)容內(nèi)聯(lián)還是保持固定在頂部 |
| data-fullscreen | true | false | 規(guī)定頭部欄是固定在頂部還是覆蓋在頁(yè)面內(nèi)容上（查看范圍更大） |
| data-theme | letter (a-z) | 規(guī)定頭部欄的主題顏色。默認(rèn)是 "a" |
注意：如需啟用全屏定位，請(qǐng)使用 data-position="fixed"，然后添加 data-fullscreen 屬性到元素上。
鏈接
所有的鏈接，包含那些帶有 data-role="button" 的鏈接和表單提交按鈕。
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-ajax | true | false | 規(guī)定是否通過 ajax 加載頁(yè)面來(lái)提高用戶體驗(yàn)和交互。如果設(shè)置為 false，jQuery Mobile 將會(huì)執(zhí)行一個(gè)正常的頁(yè)面請(qǐng)求。 |
| data-direction | reverse | 反向轉(zhuǎn)換動(dòng)畫（僅用于頁(yè)面和對(duì)話框） |
| data-dom-cache | true | false | 規(guī)定是否清除各個(gè)頁(yè)面的 jQuery DOM 緩存（如果設(shè)置為 true，您必須自己管理 DOM 并在所有移動(dòng)設(shè)備上進(jìn)行測(cè)試） |
| data-prefetch | true | false | 規(guī)定是否預(yù)先讀取頁(yè)面到 DOM 中，以便當(dāng)用戶訪問它們時(shí)可用 |
| data-rel | back | dialog | external | popup | 規(guī)定鏈接行為的選項(xiàng)。Back - 回退到歷史記錄中的前一個(gè)頁(yè)面。Dialog - 以對(duì)話框形式打開鏈接，不保存到歷史記錄中。External - 用于鏈接到另一個(gè)域。Popup - 打開一個(gè)彈出窗口。 |
| data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none | 規(guī)定一個(gè)頁(yè)面切換到下一個(gè)頁(yè)面的效果。請(qǐng)查看我們的 jQuery Mobile 頁(yè)面切換章節(jié)。 |
| data-position-to | origin | jQuery selector | window | 規(guī)定彈出框的位置。Origin - 默認(rèn)。定位彈窗在打開它的鏈接上。jQuery selector - 定位彈窗在指定元素上。Window - 定位彈窗在窗口屏幕的中央。 |
列表
帶有 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ī)定搜索框內(nèi)的文本。默認(rèn)是 "Filter items..." |
| data-filter-theme | letter (a-z) | 規(guī)定搜索過濾的主題顏色。默認(rèn)是 "c" |
| data-icon | Icons 參考手冊(cè) | 規(guī)定列表的圖標(biāo) |
| data-inset | true | false | 規(guī)定列表是否渲染成圓角且?guī)膺吘?/td> |
| data-split-icon | Icons 參考手冊(cè) | 規(guī)定分割按鈕的圖表。默認(rèn)是 "arrow-r" |
| data-split-theme | letter (a-z) | 規(guī)定分割按鈕的主題顏色。默認(rèn)是 "b" |
| data-theme | letter (a-z) | 規(guī)定列表的主題顏色 |
列表項(xiàng)
帶有 data-role="listview" 的 <ol> 或 <ul> 內(nèi)的 <li>。
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-filtertext | sometext | 規(guī)定當(dāng)過濾元素時(shí)要搜索的文本。該文本將會(huì)被過濾，而不是實(shí)際的列表項(xiàng)文本 |
| data-icon | Icons 參考手冊(cè) | 規(guī)定列表項(xiàng)圖標(biāo) |
| data-role | list-divider | 規(guī)定列表項(xiàng)的分隔 |
| data-theme | letter (a-z) | 規(guī)定列表項(xiàng)的主題顏色 |
注意：data-icon 屬性只作用于帶有鏈接的列表項(xiàng)。
導(dǎo)航欄
帶有 data-role="navbar" 容器內(nèi)部的 <li> 元素。
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-icon | Icons 參考手冊(cè) | 規(guī)定列表項(xiàng)的圖標(biāo) |
| data-iconpos | left | right | top | bottom | notext | 規(guī)定圖標(biāo)的位置 |
| 導(dǎo)航欄從他們的父容器中繼承了主題樣本。為導(dǎo)航欄設(shè)置 data-theme 屬性是不可能的?？梢詾閷?dǎo)航欄中的每個(gè)鏈接單獨(dú)設(shè)置 data-theme 屬性。 |
|---|
頁(yè)面
帶有 data-role="page" 的容器。
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-add-back-btn | true | false | 自動(dòng)添加后退按鈕，僅限頭部欄 |
| 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，您必須自己管理 DOM 并在所有移動(dòng)設(shè)備上進(jìn)行測(cè)試） |
| 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è)面的 URL |
彈窗
帶有 data-role="popup" 的容器。
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-corners | true | false | 規(guī)定彈窗是否圓角 |
| data-overlay-theme | letter (a-z) | 規(guī)定彈出框的蒙版（背景）顏色。默認(rèn)是透明背景（無(wú)） |
| 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ī)定一個(gè)頁(yè)面切換到下一個(gè)頁(yè)面的效果。請(qǐng)查看我們的 jQuery Mobile 頁(yè)面切換章節(jié)。 |
單選按鈕
帶有 type="radio" 的成雙成對(duì)的 label 和 input。它們會(huì)被自動(dòng)渲染程按鈕樣式，data-role 不是必需的。
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-mini | true | false | 規(guī)定按鈕是小尺寸還是常規(guī)尺寸 |
| data-role | none | 防止 jQuery Mobile 渲染單選按鈕的樣式為增強(qiáng)狀態(tài)的按鈕，使元素以 HTML 原生的狀態(tài)顯示 |
| data-theme | letter (a-z) | 規(guī)定單選按鈕的主題顏色 |
| 如需組合多個(gè)單選按鈕，請(qǐng)使用帶有 data-role="controlgroup" 屬性和 data-type="horizontal|vertical" 的容器來(lái)規(guī)定是否水平或垂直組合單選按鈕。 |
|---|
選擇
所有的 <select> 元素。這些會(huì)被自動(dòng)渲染成按鈕樣式，date-role 是不必需的。
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-icon | Icons 參考手冊(cè) | 規(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)聯(lián) |
| data-mini | true | false | 規(guī)定 select 元素是小尺寸還是常規(guī)尺寸 |
| data-native-menu | true | false | 當(dāng)設(shè)置為 false 時(shí)，它使用 jQuery 自帶的自定義的選擇菜單（如果您想要讓選擇菜單在所有的移動(dòng)設(shè)備上都顯示相同，則推薦這么使用） |
| data-overlay-theme | letter (a-z) | 規(guī)定 jQuery 自帶的自定義的選擇菜單的主題顏色（與 data-native-menu="false" 一起使用） |
| data-placeholder | true | false | 可在一個(gè)非原生的選擇菜單的 <option> 元素上設(shè)置 |
| data-role | none | 防止 jQuery Mobile 把 select 元素渲染成按鈕樣式 |
| data-theme | letter (a-z) | 規(guī)定 select 元素的主題顏色 |
| 如需組合多個(gè) select 元素，請(qǐng)使用帶有 data-role="controlgroup" 屬性和 data-type="horizontal|vertical" 的容器來(lái)規(guī)定是否水平或垂直組合 select 元素。 |
|---|
滑動(dòng)塊
帶有 type="range" 的輸入框。這些會(huì)被自動(dòng)渲染成按鈕樣式，date-role 是不必需的。
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-highlight | true | false | 規(guī)定滑動(dòng)軌道是否高亮突出顯示 |
| data-mini | true | false | 規(guī)定滑動(dòng)塊是小尺寸還是常規(guī)尺寸 |
| data-role | none | 防止 jQuery Mobile 渲染滑動(dòng)塊控件為按鈕樣式 |
| data-theme | letter (a-z) | 規(guī)定滑動(dòng)塊控件（輸入框、手柄和軌道）的主題顏色 |
| data-track-theme | letter (a-z) | 規(guī)定滑動(dòng)塊軌道的主題顏色 |
文本輸入框 & 文本輸入域
帶有 type="text|search|etc." 的 input 或 textarea 元素。這些會(huì)被自動(dòng)渲染成按鈕樣式，date-role 是不必需的。
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-mini | true | false | 規(guī)定輸入框是小尺寸還是常規(guī)尺寸 |
| data-role | none | 防止 jQuery Mobile 把輸入框/輸入域渲染成按鈕樣式 |
| data-theme | letter (a-z) | 規(guī)定輸入字段的主題顏色 |
以上內(nèi)容是否對(duì)您有幫助：
更多建議：