jQuery Mobile Data 屬性
jQuery Data 屬性
jQuery Mobile 使用 HTML5 data-* 屬性來為移動裝置建立更具觸控友好性和吸引性的外觀。
在下面的參考列表中，粗體顯示的值為預設值。
按鈕
在1.4 版本以後已廢棄。使用 CSS 類 替代。帶有 data-role="button" 的超連結。button 元素、工具欄中的連結以及 input 欄位都會自動渲染成按鈕樣式，不需要新增 data-role="button"。
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-corners | true | false | 規定按鈕是否圓角 |
| data-icon | 圖示參考手冊 | 規定按鈕的圖示。預設沒有圖示。 |
| data-iconpos | left | right | top | bottom | notext | 規定圖示的位置 |
| data-iconshadow | true | false | 規定按鈕圖示是否有陰影 |
| data-inline | true | false | 規定按鈕是否內聯 |
| data-mini | true | false | 規定按鈕是小尺寸還是常規尺寸 |
| data-shadow | true | false | 規定按鈕是否有陰影 |
| data-theme | 字母 (a-z) | 規定按鈕的主題顏色 |
| 如需組合多個按鈕，請使用帶有 data-role="controlgroup" 屬性和 data-type="horizontal|vertical" 的容器來規定是否水平或垂直組合按鈕。 |
複選框
帶有 type="checkbox" 的成雙成對的 label 和 input。它們會被自動渲染成按鈕樣式，data-role 不是必需的。
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-mini | true | false | 規定複選框是小尺寸還是常規尺寸 |
| data-role | none | 防止 jQuery Mobile 把複選框渲染成按鈕樣式 |
| data-theme | 字母 (a-z) | 規定複選框的主題顏色 |
| 如需組合多個複選框，請使用帶有 data-role="controlgroup" 屬性和 data-type="horizontal|vertical" 的容器來規定是否水平或垂直組合複選框。 |
可摺疊塊
在帶有 data-role="collapsible" 的容器內部的後跟任意 HTML 標記的標題元素。
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-collapsed | true | false | 規定內容是摺疊還是展開 |
| data-collapsed-icon | 圖示參考手冊 | 規定可摺疊按鈕的圖示。預設是 "plus" |
| data-content-theme | 字母 (a-z) | 規定可摺疊內容的主題顏色。是否為可摺疊內容新增圓角 |
| data-expanded-icon | 圖示參考手冊 | 規定當內容展開時可摺疊按鈕的圖示。預設是 "minus" |
| data-iconpos | left | right | top | bottom | 規定圖示的位置 |
| data-inset | true | false | 規定可摺疊按鈕是否渲染成圓角且帶外邊距 |
| data-mini | true | false | 規定可摺疊按鈕是小尺寸還是常規尺寸 |
| data-theme | 字母 (a-z) | 規定可摺疊按鈕的主題顏色 |
可摺疊集合
在帶有 data-role="collapsible-set" 的容器內部的可摺疊內容塊。
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-collapsed-icon | 圖示參考手冊 | 規定可摺疊按鈕的圖示。預設是 "plus" |
| data-content-theme | 字母 (a-z) | 規定可摺疊按鈕的主題顏色 |
| data-expanded-icon | 圖示參考手冊 | 規定當內容展開時可摺疊按鈕的圖示。預設是 "minus" |
| data-iconpos | left | right | top | bottom | notext | 規定圖示的位置 |
| data-inset | true | false | 規定可摺疊塊是否渲染成圓角且帶外邊距 |
| data-mini | true | false | 規定可摺疊按鈕是小尺寸還是常規尺寸 |
| data-theme | 字母 (a-z) | 規定可摺疊集合的主題顏色 |
內容
在 1.4 版本已廢棄, 1.5 版本後不再支援。 使用 data-role="content" 的容器。
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-theme | 字母 (a-z) | 規定內容的主題顏色。 |
控制元件組
帶有 data-role="controlgroup" 的 <div> 或 <fieldset> 容器。 組合單個型別（基於連結的按鈕、單選按鈕、複選框、select 元素）的多個按鈕樣式的 input。對於組合表單複選框和單選按鈕，推薦在帶有 data-role="fieldcontain" 的 <div> 內使用 <fieldset> 容器來改進標籤樣式。
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-mini | true | false | 規定控制元件組是小尺寸還是常規尺寸 |
| data-type | horizontal | vertical | 規定控制元件組是水平顯示還是垂直顯示 |
對話方塊
帶有 data-role="dialog" 的容器或帶有 data-rel="dialog" 的連結。
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-close-btn-text | sometext | 規定對話方塊關閉按鈕的文字 |
| data-dom-cache | true | false | 規定是否清除各個頁面的 jQuery DOM 快取（如果設定為 true，您必須自己管理 DOM 並在所有移動裝置上進行測試） |
| data-overlay-theme | 字母 (a-z) | 規定對話方塊頁面的蒙版（背景）顏色 |
| data-theme | 字母 (a-z) | 規定對話方塊頁面的主題顏色 |
| data-title | sometext | 規定對話方塊頁面的標題 |
增強
帶有 data-enhance="false" 或 data-ajax="false" 的容器。
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-enhance | true | false | 如果設定為 "true"（預設），jQuery Mobile 會自動渲染頁面，使其更適合於移動裝置。如果設定為 "false"，框架將不會渲染頁面 |
| data-ajax | true | false | 規定是否通過 ajax 載入頁面 |
注意：data-enhance="false" 必須與 $.mobile.ignoreContentEnabled=true" 一同使用來阻止 jQuery Mobile 自動渲染頁面。
當 $.mobile.ignoreContentEnabled 設定為 true 時，data-ajax="false" 容器內的任何連結或表單元素將會被框架的導航功能忽略。
域容器
1.4 版本後已廢棄，在 1.5 版本後不再支援，將使用 class="ui-fieldcontain 替代"。 包裹在 label/form 元素對，並帶有 data-role="fieldcontain" 的容器。
固定工具欄
帶有 data-role="header" 或 data-role="footer"，並帶有 data-position="fixed" 屬性的容器。
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-disable-page-zoom | true | false | 規定使用者是否能縮放頁面 |
| data-fullscreen | true | false | 規定工具欄是否一直固定在頂部或底部 |
| data-tap-toggle | true | false | 規定使用者是否能夠通過點選改變工具欄的可見性 |
| data-transition | slide | fade | none | 規定當點擊發生時的切換效果 |
| data-update-page-padding | true | false | 規定頁面頂部和底部的內邊距是否在 resize、transition 和 "updatelayout" 事件發生時更新（jQuery Mobile 在 "pageshow" 事件發生時總是更新內邊距） |
| data-visible-on-page-show | true | false | 規定當父頁面顯示時工具欄的可見性 |
翻轉撥動開關
一個帶有 data-role="slider" 的 <select> 元素和兩個 <option> 元素。
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-mini | true | false | 規定開關是小尺寸還是常規尺寸 |
| data-role | none | 防止 jQuery Mobile 把撥動開關渲染成按鈕樣式 |
| data-theme | 字母 (a-z) | 規定撥動開關的主題顏色 |
| data-track-theme | 字母 (a-z) | 規定軌道的主題顏色 |
尾部欄
帶有 data-role="footer" 的容器。
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-id | sometext | 規定唯一 ID。對於持續的尾部欄是必需的 |
| data-position | inline | fixed | 規定尾部欄是與頁面內容內聯還是保持固定在底部 |
| data-fullscreen | true | false | 規定尾部欄是固定在底部還是覆蓋在頁面內容上（檢視範圍更大） |
| data-theme | 字母 (a-z) | 規定尾部欄的主題顏色。預設是 "a" |
注意：如需啟用全屏定位，請使用 data-position="fixed"，然後新增 data-fullscreen 屬性到元素上。
頭部欄
帶有 data-role="header" 的容器。
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-id | sometext | 規定唯一 ID。對於持續的頭部欄是必需的 |
| data-position | inline | fixed | 規定頭部欄是與頁面內容內聯還是保持固定在頂部 |
| data-fullscreen | true | false | 規定頭部欄是固定在頂部還是覆蓋在頁面內容上（檢視範圍更大） |
| data-theme | 字母 (a-z) | 規定頭部欄的主題顏色。預設是 "a" |
注意：如需啟用全屏定位，請使用 data-position="fixed"，然後新增 data-fullscreen 屬性到元素上。
連結
所有的連結，包含那些帶有 data-role="button" 的連結和表單提交按鈕。
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-ajax | true | false | 規定是否通過 ajax 載入頁面來提高使用者體驗和互動。如果設定為 false，jQuery Mobile 將會執行一個正常的頁面請求。 |
| data-direction | reverse | 反向轉換動畫（僅用於頁面和對話方塊） |
| data-dom-cache | true | false | 規定是否清除各個頁面的 jQuery DOM 快取（如果設定為 true，您必須自己管理 DOM 並在所有移動裝置上進行測試） |
| data-prefetch | true | false | 規定是否預先讀取頁面到 DOM 中，以便當使用者訪問它們時可用 |
| data-rel | back | dialog | external | popup | 規定連結行為的選項。Back - 回退到歷史記錄中的前一個頁面。Dialog - 以對話方塊形式開啟連結，不儲存到歷史記錄中。External - 用於連結到另一個域。Popup - 開啟一個彈出視窗。 |
| data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none | 規定一個頁面切換到下一個頁面的效果。請檢視我們的 jQuery Mobile 頁面切換章節。 |
| data-position-to | origin | jQuery selector | window | 規定彈出框的位置。Origin - 預設。定位彈窗在開啟它的連結上。jQuery selector - 定位彈窗在指定元素上。Window - 定位彈窗在視窗螢幕的中央。 |
列表
帶有 data-role="listview" 的 <ol> 或 <ul>。
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-autodividers | true | false | 規定是否自動劃分列表項 |
| data-count-theme | 字母 (a-z) | 規定計數氣泡的主題顏色。 |
| data-divider-theme | 字母 (a-z) | 規定列表分隔的主題顏色。 |
| data-filter | true | false | 規定是否在列表中新增搜尋框 |
| data-filter-placeholder | sometext | 1.4 版本後廢棄。使用 HTML placeholder 屬性替代。規定搜尋框內的文字。預設是 "Filter items..." |
| data-filter-theme | 字母 (a-z) | 規定搜尋過濾的主題顏色。 |
| data-icon | 圖示參考手冊 | 規定列表的圖示 |
| data-inset | true | false | 規定列表是否渲染成圓角且帶外邊距 |
| data-split-icon | 圖示參考手冊 | 規定分割按鈕的圖表。預設是 "arrow-r" |
| data-split-theme | 字母 (a-z) | 規定分割按鈕的主題顏色。 |
| data-theme | 字母 (a-z) | 規定列表的主題顏色 |
列表項
帶有 data-role="listview" 的 <ol> 或 <ul> 內的 <li>。
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-filtertext | sometext | 規定當過濾元素時要搜尋的文字。該文字將會被過濾，而不是實際的列表項文字 |
| data-icon | 圖示參考手冊 | 規定列表項圖示 |
| data-role | list-divider | 規定列表項的分隔 |
| data-theme | 字母 (a-z) | 規定列表項的主題顏色 |
注意：data-icon 屬性只作用於帶有連結的列表項。
導航欄
帶有 data-role="navbar" 容器內部的 <li> 元素。
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-icon | 圖示參考手冊 | 規定列表項的圖示 |
| data-iconpos | left | right | top | bottom | notext | 規定圖示的位置 |
| 導航欄從他們的父容器中繼承了主題樣本。為導航欄設定 data-theme 屬性是不可能的。可以為導航欄中的每個連結單獨設定 data-theme 屬性。 |
頁面
帶有 data-role="page" 的容器。
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-add-back-btn | true | false | 自動新增後退按鈕，僅限頭部欄 |
| data-back-btn-text | sometext | 規定後退按鈕的一些文字 |
| data-back-btn-theme | 字母 (a-z) | 規定後退按鈕的主題顏色 |
| data-close-btn-text | 字母 (a-z) | 規定對話方塊上關閉按鈕的一些文字 |
| data-dom-cache | true | false | 規定是否清除各個頁面的 jQuery DOM 快取（如果設定為 true，您必須自己管理 DOM 並在所有移動裝置上進行測試） |
| data-overlay-theme | 字母 (a-z) | 規定對話方塊頁面的蒙版（背景）顏色 |
| data-theme | 字母 (a-z) | 規定頁面的主題顏色。 |
| data-title | sometext | 規定頁面標題 |
| data-url | url | 更新 URL 的值，而不是用於請求頁面的 URL |
彈窗
帶有 data-role="popup" 的容器。
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-corners | true | false | 規定彈窗是否圓角 |
| data-overlay-theme | 字母 (a-z) | 規定彈出框的蒙版（背景）顏色。預設是透明背景（無） |
| data-shadow | true | false | 規定彈出框是否有陰影 |
| data-theme | 字母 (a-z) | 規定彈出框的主題顏色。預設是繼承的，"none" 設定彈窗為透明的 |
| data-tolerance | 30, 15, 30, 15 | 規定視窗邊緣（上 top、右 right、下 bottom、左 left）的距離 |
帶有 data-rel="popup" 的錨：
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-position-to | origin | jQuery selector | window | >規定彈出框的位置。Origin - 預設。定位彈窗在開啟它的連結上。jQuery selector - 定位彈窗在指定元素上。Window - 定位彈窗在視窗螢幕的中央。 |
| data-rel | popup | 用於開啟彈出框 |
| data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none | 規定一個頁面切換到下一個頁面的效果。請檢視我們的 jQuery Mobile 頁面切換章節。 |
單選按鈕
帶有 type="radio" 的成雙成對的 label 和 input。它們會被自動渲染程按鈕樣式，data-role 不是必需的。
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-mini | true | false | 規定按鈕是小尺寸還是常規尺寸 |
| data-role | none | 防止 jQuery Mobile 渲染單選按鈕的樣式為增強狀態的按鈕，使元素以 HTML 原生的狀態顯示 |
| data-theme | 字母 (a-z) | 規定單選按鈕的主題顏色 |
| 如需組合多個單選按鈕，請使用帶有 data-role="controlgroup" 屬性和 data-type="horizontal|vertical" 的容器來規定是否水平或垂直組合單選按鈕。 |
選擇
所有的 <select> 元素。這些會被自動渲染成按鈕樣式，date-role 是不必需的。
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-icon | 圖示參考手冊 | 規定 select 元素的圖示。預設是 "arrow-d" |
| data-iconpos | left | right | top | bottom | notext | 規定圖示的位置 |
| data-inline | true | false | 規定 select 元素是否內聯 |
| data-mini | true | false | 規定 select 元素是小尺寸還是常規尺寸 |
| data-native-menu | true | false | 當設定為 false 時，它使用 jQuery 自帶的自定義的選擇選單（如果您想要讓選擇選單在所有的移動裝置上都顯示相同，則推薦這麼使用） |
| data-overlay-theme | 字母 (a-z) | 規定 jQuery 自帶的自定義的選擇選單的主題顏色（與 data-native-menu="false" 一起使用） |
| data-placeholder | true | false | 可在一個非原生的選擇選單的 <option> 元素上設定 |
| data-role | none | 防止 jQuery Mobile 把 select 元素渲染成按鈕樣式 |
| data-theme | 字母 (a-z) | 規定 select 元素的主題顏色 |
| 如需組合多個 select 元素，請使用帶有 data-role="controlgroup" 屬性和 data-type="horizontal|vertical" 的容器來規定是否水平或垂直組合 select 元素。 |
滑動塊
帶有 type="range" 的輸入框。這些會被自動渲染成按鈕樣式，date-role 是不必需的。
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-highlight | true | false | 規定滑動軌道是否高亮突出顯示 |
| data-mini | true | false | 規定滑動塊是小尺寸還是常規尺寸 |
| data-role | none | 防止 jQuery Mobile 渲染滑動塊控制元件為按鈕樣式 |
| data-theme | 字母 (a-z) | 規定滑動塊控制元件（輸入框、手柄和軌道）的主題顏色 |
| data-track-theme | 字母 (a-z) | 規定滑動塊軌道的主題顏色 |
文字輸入框 & 文字輸入域
帶有 type="text|search|etc." 的 input 或 textarea 元素。這些會被自動渲染成按鈕樣式，date-role 是不必需的。
| Data-屬性 | 值 | 描述 |
|---|---|---|
| data-mini | true | false | 規定輸入框是小尺寸還是常規尺寸 |
| data-role | none | 防止 jQuery Mobile 把輸入框/輸入域渲染成按鈕樣式 |
| data-theme | 字母 (a-z) | 規定輸入欄位的主題顏色 |