# jQuery Mobile Data 屬性 ## jQuery Data 屬性 jQuery Mobile 使用 [HTML5 data-* 屬性](/tags/att-object-data.html)來為移動設備創建更具觸摸友好性和吸引性的外觀。 在下面的參考列表中，**粗體顯示的值**為默認值。 ## 按鈕 帶有 data-role="button" 的超鏈接。button 元素、工具欄中的鏈接以及 input 字段都會自動渲染成按鈕樣式，不需要添加 data-role="button"。 | Data-屬性 | 值 | 描述 | | --- | --- | --- | | data-corners | **true** | false | 規定按鈕是否圓角 | | data-icon | [Icons 參考手冊](jquerymobile-ref-icons.html) | 規定按鈕的圖表。默認沒有圖標。 | | 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 | _letter_ (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 | _letter_ (a-z) | 規定復選框的主題顏色 | >  > 如需組合多個復選框，請使用帶有 data-role="controlgroup" 屬性和 data-type="horizontal|vertical" 的容器來規定是否水平或垂直組合復選框。 ## 可折疊塊 在帶有 data-role="collapsible" 的容器內部的后跟任意 HTML 標記的標題元素。 | Data-屬性 | 值 | 描述 | | --- | --- | --- | | data-collapsed | **true** | false | 規定內容是折疊還是展開 | | data-collapsed-icon | [Icons 參考手冊](jquerymobile-ref-icons.html) | 規定可折疊按鈕的圖標。默認是 "plus" | | data-content-theme | _letter_ (a-z) | 規定可折疊內容的主題顏色。是否為可折疊內容添加圓角 | | data-expanded-icon | [Icons 參考手冊](jquerymobile-ref-icons.html) | 規定當內容展開時可折疊按鈕的圖標。默認是 "minus" | | data-iconpos | **left** | right | top | bottom | 規定圖標的位置 | | data-inset | **true** | false | 規定可折疊按鈕是否渲染成圓角且帶外邊距 | | data-mini | true | **false** | 規定可折疊按鈕是小尺寸還是常規尺寸 | | data-theme | _letter_ (a-z) | 規定可折疊按鈕的主題顏色 | ## 可折疊集合 在帶有 data-role="collapsible-set" 的容器內部的可折疊內容塊。 | Data-屬性 | 值 | 描述 | | --- | --- | --- | | data-collapsed-icon | [Icons 參考手冊](jquerymobile-ref-icons.html) | 規定可折疊按鈕的圖標。默認是 "plus" | | data-content-theme | _letter_ (a-z) | 規定可折疊按鈕的主題顏色 | | data-expanded-icon | [Icons 參考手冊](jquerymobile-ref-icons.html) | 規定當內容展開時可折疊按鈕的圖標。默認是 "minus" | | data-iconpos | **left** | right | top | bottom | notext | 規定圖標的位置 | | data-inset | **true** | false | 規定可折疊塊是否渲染成圓角且帶外邊距 | | data-mini | true | **false** | 規定可折疊按鈕是小尺寸還是常規尺寸 | | data-theme | _letter_ (a-z) | 規定可折疊集合的主題顏色 | ## 內容 帶有 data-role="content" 的容器。 | Data-屬性 | 值 | 描述 | | --- | --- | --- | | data-theme | _letter_ (a-z) | 規定內容的主題顏色。默認是 "c" | ## 控件組 帶有 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 | _letter_ (a-z) | 規定對話框頁面的蒙版（背景）顏色 | | data-theme | _letter_ (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" 容器內的任何鏈接或表單元素將會被框架的導航功能忽略。 ## 域容器 包圍在 label/表單元素對周圍的帶有 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 | _letter_ (a-z) | 規定撥動開關的主題顏色 | | data-track-theme | _letter_ (a-z) | 規定軌道的主題顏色 | ## 尾部欄 帶有 data-role="footer" 的容器。 | Data-屬性 | 值 | 描述 | | --- | --- | --- | | data-id | _sometext_ | 規定唯一 ID。對于持續的尾部欄是必需的 | | data-position | **inline** | fixed | 規定尾部欄是與頁面內容內聯還是保持固定在底部 | | data-fullscreen | true | **false** | 規定尾部欄是固定在底部還是覆蓋在頁面內容上（查看范圍更大） | | data-theme | _letter_ (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 | _letter_ (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 頁面切換](jquerymobile-transitions.html)章節。 | | data-position-to | **origin** | jQuery selector | window | 規定彈出框的位置。Origin - 默認。定位彈窗在打開它的鏈接上。jQuery selector - 定位彈窗在指定元素上。Window - 定位彈窗在窗口屏幕的中央。 | ## 列表 帶有 data-role="listview" 的 <ol> 或 <ul>。 | Data-屬性 | 值 | 描述 | | --- | --- | --- | | data-autodividers | true | **false** | 規定是否自動劃分列表項 | | data-count-theme | _letter_ (a-z) | 規定計數氣泡的主題顏色。默認是 "c" | | data-divider-theme | _letter_ (a-z) | 規定列表分隔的主題顏色。默認是 "b" | | data-filter | true | **false** | 規定是否在列表中添加搜索框 | | data-filter-placeholder | _sometext_ | 規定搜索框內的文本。默認是 "Filter items..." | | data-filter-theme | _letter_ (a-z) | 規定搜索過濾的主題顏色。默認是 "c" | | data-icon | [Icons 參考手冊](jquerymobile-ref-icons.html) | 規定列表的圖標 | | data-inset | true | **false** | 規定列表是否渲染成圓角且帶外邊距 | | data-split-icon | [Icons 參考手冊](jquerymobile-ref-icons.html) | 規定分割按鈕的圖表。默認是 "arrow-r" | | data-split-theme | _letter_ (a-z) | 規定分割按鈕的主題顏色。默認是 "b" | | data-theme | _letter_ (a-z) | 規定列表的主題顏色 | ## 列表項 帶有 data-role="listview" 的 <ol> 或 <ul> 內的 <li>。 | Data-屬性 | 值 | 描述 | | --- | --- | --- | | data-filtertext | _sometext_ | 規定當過濾元素時要搜索的文本。該文本將會被過濾，而不是實際的列表項文本 | | data-icon | [Icons 參考手冊](jquerymobile-ref-icons.html) | 規定列表項圖標 | | data-role | list-divider | 規定列表項的分隔 | | data-theme | _letter_ (a-z) | 規定列表項的主題顏色 | **注意：**data-icon 屬性只作用于帶有鏈接的列表項。 ## 導航欄 帶有 data-role="navbar" 容器內部的 <li> 元素。 | Data-屬性 | 值 | 描述 | | --- | --- | --- | | data-icon | [Icons 參考手冊](jquerymobile-ref-icons.html) | 規定列表項的圖標 | | 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 | _letter_ (a-z) | 規定后退按鈕的主題顏色 | | data-close-btn-text | _letter_ (a-z) | 規定對話框上關閉按鈕的一些文本 | | data-dom-cache | true | **false** | 規定是否清除各個頁面的 jQuery DOM 緩存（如果設置為 true，您必須自己管理 DOM 并在所有移動設備上進行測試） | | data-overlay-theme | _letter_ (a-z) | 規定對話框頁面的蒙版（背景）顏色 | | data-theme | _letter_ (a-z) | 規定頁面的主題顏色。默認是 "c" | | data-title | _sometext_ | 規定頁面標題 | | data-url | url | 更新 URL 的值，而不是用于請求頁面的 URL | ## 彈窗 帶有 data-role="popup" 的容器。 | Data-屬性 | 值 | 描述 | | --- | --- | --- | | data-corners | **true** | false | 規定彈窗是否圓角 | | data-overlay-theme | _letter_ (a-z) | 規定彈出框的蒙版（背景）顏色。默認是透明背景（無） | | data-shadow | **true** | false | 規定彈出框是否有陰影 | | data-theme | _letter_ (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 頁面切換](jquerymobile-transitions.html)章節。 | ## 單選按鈕 帶有 type="radio" 的成雙成對的 label 和 input。它們會被自動渲染程按鈕樣式，data-role 不是必需的。 | Data-屬性 | 值 | 描述 | | --- | --- | --- | | data-mini | true | **false** | 規定按鈕是小尺寸還是常規尺寸 | | data-role | none | 防止 jQuery Mobile 渲染單選按鈕的樣式為增強狀態的按鈕，使元素以 HTML 原生的狀態顯示 | | data-theme | _letter_ (a-z) | 規定單選按鈕的主題顏色 | >  > 如需組合多個單選按鈕，請使用帶有 data-role="controlgroup" 屬性和 data-type="horizontal|vertical" 的容器來規定是否水平或垂直組合單選按鈕。 ## 選擇 所有的 <select> 元素。這些會被自動渲染成按鈕樣式，date-role 是不必需的。 | Data-屬性 | 值 | 描述 | | --- | --- | --- | | data-icon | [Icons 參考手冊](jquerymobile-ref-icons.html) | 規定 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 | _letter_ (a-z) | 規定 jQuery 自帶的自定義的選擇菜單的主題顏色（與 data-native-menu="false" 一起使用） | | data-placeholder | true | **false** | 可在一個非原生的選擇菜單的 <option> 元素上設置 | | data-role | none | 防止 jQuery Mobile 把 select 元素渲染成按鈕樣式 | | data-theme | _letter_ (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 | _letter_ (a-z) | 規定滑動塊控件（輸入框、手柄和軌道）的主題顏色 | | data-track-theme | _letter_ (a-z) | 規定滑動塊軌道的主題顏色 | ## 文本輸入框 & 文本輸入域 帶有 type="text|search|etc." 的 input 或 textarea 元素。這些會被自動渲染成按鈕樣式，date-role 是不必需的。 | Data-屬性 | 值 | 描述 | | --- | --- | --- | | data-mini | true | **false** | 規定輸入框是小尺寸還是常規尺寸 | | data-role | none | 防止 jQuery Mobile 把輸入框/輸入域渲染成按鈕樣式 | | data-theme | _letter_ (a-z) | 規定輸入字段的主題顏色 |