按鈕

帶有?data-role="button"?的超鏈接。button 元素、工具欄中的鏈接以及 input 字段都會自動渲染成按鈕樣式，不需要添加 data-role="button"。

Data-屬性值描述

data-corners	true?| false	規(guī)定按鈕是否圓角
data-icon	Icons 參考手冊	規(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è)按鈕，請使用帶有 data-role="controlgroup" 屬性和 data-type="horizontal|vertical" 的容器來規(guī)定是否水平或垂直組合按鈕。

---

復(fù)選框

帶有?type="checkbox"?的成雙成對的 label 和 input。它們會被自動渲染程按鈕樣式，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ù)選框，請使用帶有 data-role="controlgroup" 屬性和 data-type="horizontal|vertical" 的容器來規(guī)定是否水平或垂直組合復(fù)選框。

---

可折疊塊

在帶有?data-role="collapsible"?的容器內(nèi)部的后跟任意 HTML 標(biāo)記的標(biāo)題元素。

Data-屬性值描述

data-collapsed	true?| false	規(guī)定內(nèi)容是折疊還是展開
data-collapsed-icon	Icons 參考手冊	規(guī)定可折疊按鈕的圖標(biāo)。默認(rèn)是 "plus"
data-content-theme	letter?(a-z)	規(guī)定可折疊內(nèi)容的主題顏色。是否為可折疊內(nèi)容添加圓角
data-expanded-icon	Icons 參考手冊	規(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 參考手冊	規(guī)定可折疊按鈕的圖標(biāo)。默認(rèn)是 "plus"
data-content-theme	letter?(a-z)	規(guī)定可折疊按鈕的主題顏色
data-expanded-icon	Icons 參考手冊	規(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。對于組合表單復(fù)選框和單選按鈕，推薦在帶有 data-role="fieldcontain" 的 <div> 內(nèi)使用 <fieldset> 容器來改進(jìn)標(biāo)簽樣式。

Data-屬性值描述

data-mini	true |?false	規(guī)定控件組是小尺寸還是常規(guī)尺寸
data-type	horizontal |?vertical	規(guī)定控件組是水平顯示還是垂直顯示

---

對話框

帶有?data-role="dialog"?的容器或帶有?data-rel="dialog"?的鏈接。

Data-屬性值描述

data-close-btn-text	sometext	規(guī)定對話框關(guān)閉按鈕的文本
data-dom-cache	true |?false	規(guī)定是否清除各個(gè)頁面的 jQuery DOM 緩存（如果設(shè)置為 true，您必須自己管理 DOM 并在所有移動設(shè)備上進(jìn)行測試）
data-overlay-theme	letter?(a-z)	規(guī)定對話框頁面的蒙版（背景）顏色
data-theme	letter?(a-z)	規(guī)定對話框頁面的主題顏色
data-title	sometext	規(guī)定對話框頁面的標(biāo)題

---

增強(qiáng)

帶有?data-enhance="false"?或?data-ajax="false"?的容器。

Data-屬性值描述

data-enhance	true?| false	如果設(shè)置為 "true"（默認(rèn)），jQuery Mobile 會自動渲染頁面，使其更適合于移動設(shè)備。如果設(shè)置為 "false"，框架將不會渲染頁面
data-ajax	true?| false	規(guī)定是否通過 ajax 加載頁面

注意：data-enhance="false" 必須與 $.mobile.ignoreContentEnabled=true" 一同使用來阻止 jQuery Mobile 自動渲染頁面。

當(dāng) $.mobile.ignoreContentEnabled 設(shè)置為 true 時(shí)，data-ajax="false" 容器內(nèi)的任何鏈接或表單元素將會被框架的導(dǎo)航功能忽略。

---

域容器

包圍在 label/表單元素對周圍的帶有?data-role="fieldcontain"?的容器。

---

固定工具欄

帶有?data-role="header"?或?data-role="footer"，并帶有?data-position="fixed"?屬性的容器。

Data-屬性值描述

data-disable-page-zoom	true?| false	規(guī)定用戶是否能縮放頁面
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ī)定頁面頂部和底部的內(nèi)邊距是否在 resize、transition 和 "updatelayout" 事件發(fā)生時(shí)更新（jQuery Mobile 在 "pageshow" 事件發(fā)生時(shí)總是更新內(nèi)邊距）
data-visible-on-page-show	true?| false	規(guī)定當(dāng)父頁面顯示時(shí)工具欄的可見性

---

翻轉(zhuǎn)撥動開關(guān)

一個(gè)帶有?data-role="slider"?的 <select> 元素和兩個(gè) <option> 元素。

Data-屬性值描述

data-mini	true |?false	規(guī)定開關(guān)是小尺寸還是常規(guī)尺寸
data-role	none	防止 jQuery Mobile 把撥動開關(guān)渲染成按鈕樣式
data-theme	letter?(a-z)	規(guī)定撥動開關(guān)的主題顏色
data-track-theme	letter?(a-z)	規(guī)定軌道的主題顏色

---

尾部欄

帶有?data-role="footer"?的容器。

Data-屬性值描述

data-id	sometext	規(guī)定唯一 ID。對于持續(xù)的尾部欄是必需的
data-position	inline?| fixed	規(guī)定尾部欄是與頁面內(nèi)容內(nèi)聯(lián)還是保持固定在底部
data-fullscreen	true |?false	規(guī)定尾部欄是固定在底部還是覆蓋在頁面內(nèi)容上（查看范圍更大）
data-theme	letter?(a-z)	規(guī)定尾部欄的主題顏色。默認(rèn)是 "a"

注意：如需啟用全屏定位，請使用 data-position="fixed"，然后添加 data-fullscreen 屬性到元素上。

---

頭部欄

帶有?data-role="header"?的容器。

Data-屬性值描述

data-id	sometext	規(guī)定唯一 ID。對于持續(xù)的頭部欄是必需的
data-position	inline?| fixed	規(guī)定頭部欄是與頁面內(nèi)容內(nèi)聯(lián)還是保持固定在頂部
data-fullscreen	true |?false	規(guī)定頭部欄是固定在頂部還是覆蓋在頁面內(nèi)容上（查看范圍更大）
data-theme	letter?(a-z)	規(guī)定頭部欄的主題顏色。默認(rèn)是 "a"

注意：如需啟用全屏定位，請使用 data-position="fixed"，然后添加 data-fullscreen 屬性到元素上。

---

鏈接

所有的鏈接，包含那些帶有 data-role="button" 的鏈接和表單提交按鈕。

Data-屬性值描述

data-ajax	true?| false	規(guī)定是否通過 ajax 加載頁面來提高用戶體驗(yàn)和交互。如果設(shè)置為 false，jQuery Mobile 將會執(zhí)行一個(gè)正常的頁面請求。
data-direction	reverse	反向轉(zhuǎn)換動畫（僅用于頁面和對話框）
data-dom-cache	true |?false	規(guī)定是否清除各個(gè)頁面的 jQuery DOM 緩存（如果設(shè)置為 true，您必須自己管理 DOM 并在所有移動設(shè)備上進(jìn)行測試）
data-prefetch	true |?false	規(guī)定是否預(yù)先讀取頁面到 DOM 中，以便當(dāng)用戶訪問它們時(shí)可用
data-rel	back | dialog | external | popup	規(guī)定鏈接行為的選項(xiàng)。Back - 回退到歷史記錄中的前一個(gè)頁面。Dialog - 以對話框形式打開鏈接，不保存到歷史記錄中。External - 用于鏈接到另一個(gè)域。Popup - 打開一個(gè)彈出窗口。
data-transition	fade?| flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none	規(guī)定一個(gè)頁面切換到下一個(gè)頁面的效果。請查看我們的?jQuery Mobile 頁面切換章節(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ī)定是否自動劃分列表項(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 參考手冊	規(guī)定列表的圖標(biāo)
data-inset	true |?false	規(guī)定列表是否渲染成圓角且?guī)膺吘?/td>
data-split-icon	Icons 參考手冊	規(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í)要搜索的文本。該文本將會被過濾，而不是實(shí)際的列表項(xiàng)文本
data-icon	Icons 參考手冊	規(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 參考手冊	規(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 屬性。

---

頁面

帶有?data-role="page"?的容器。

Data-屬性值描述

data-add-back-btn	true |?false	自動添加后退按鈕，僅限頭部欄
data-back-btn-text	sometext	規(guī)定后退按鈕的一些文本
data-back-btn-theme	letter?(a-z)	規(guī)定后退按鈕的主題顏色
data-close-btn-text	letter?(a-z)	規(guī)定對話框上關(guān)閉按鈕的一些文本
data-dom-cache	true |?false	規(guī)定是否清除各個(gè)頁面的 jQuery DOM 緩存（如果設(shè)置為 true，您必須自己管理 DOM 并在所有移動設(shè)備上進(jìn)行測試）
data-overlay-theme	letter?(a-z)	規(guī)定對話框頁面的蒙版（背景）顏色
data-theme	letter?(a-z)	規(guī)定頁面的主題顏色。默認(rèn)是 "c"
data-title	sometext	規(guī)定頁面標(biāo)題
data-url	url	更新 URL 的值，而不是用于請求頁面的 URL

---

彈窗

帶有?data-role="popup"?的容器。

Data-屬性值描述

data-corners	true?| false	規(guī)定彈窗是否圓角
data-overlay-theme	letter?(a-z)	規(guī)定彈出框的蒙版（背景）顏色。默認(rèn)是透明背景（無）
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è)頁面切換到下一個(gè)頁面的效果。請查看我們的?jQuery Mobile 頁面切換章節(jié)。

---

單選按鈕

帶有?type="radio"?的成雙成對的 label 和 input。它們會被自動渲染程按鈕樣式，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è)單選按鈕，請使用帶有 data-role="controlgroup" 屬性和 data-type="horizontal|vertical" 的容器來規(guī)定是否水平或垂直組合單選按鈕。

---

選擇

所有的?<select>?元素。這些會被自動渲染成按鈕樣式，date-role 是不必需的。

Data-屬性值描述

data-icon	Icons 參考手冊	規(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 自帶的自定義的選擇菜單（如果您想要讓選擇菜單在所有的移動設(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 元素，請使用帶有 data-role="controlgroup" 屬性和 data-type="horizontal|vertical" 的容器來規(guī)定是否水平或垂直組合 select 元素。

---

滑動塊

帶有?type="range"?的輸入框。這些會被自動渲染成按鈕樣式，date-role 是不必需的。

Data-屬性值描述

data-highlight	true |?false	規(guī)定滑動軌道是否高亮突出顯示
data-mini	true |?false	規(guī)定滑動塊是小尺寸還是常規(guī)尺寸
data-role	none	防止 jQuery Mobile 渲染滑動塊控件為按鈕樣式
data-theme	letter?(a-z)	規(guī)定滑動塊控件（輸入框、手柄和軌道）的主題顏色
data-track-theme	letter?(a-z)	規(guī)定滑動塊軌道的主題顏色

---

文本輸入框 & 文本輸入域

帶有?type="text|search|etc."?的 input 或?textarea 元素。這些會被自動渲染成按鈕樣式，date-role 是不必需的。

Data-屬性值描述

data-mini	true |?false	規(guī)定輸入框是小尺寸還是常規(guī)尺寸
data-role	none	防止 jQuery Mobile 把輸入框/輸入域渲染成按鈕樣式
data-theme	letter?(a-z)	規(guī)定輸入字段的主題顏色

??jQuery Mobile 實(shí)例 jQuery Mobile 圖標(biāo)??

總結(jié)

以上是生活随笔為你收集整理的jQuery Mobile Data 属性的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。