jQuery Mobile Data 屬性

jQuery Data 屬性

jQuery Mobile 使用 HTML5 data-* 屬性為移動設備創建“對觸摸友好的”美觀的外觀。

在下面的參考列表中，粗體值規定默認值。

Button

帶有 data-role="button" 的超鏈接。工具欄中的按鈕元素和鏈接以及輸入字段會被自動設置按鈕的樣式，無需 data-role="button"。

Data 屬性 值 描述
data-corners true | false 規定按鈕是否有圓角。
data-icon Icons Reference 規定按鈕的圖標。默認是沒有圖標。
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" 屬性的容器，來規定水平還是垂直組合按鈕。

Checkbox

label 和 type="checkbox" 的 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"，來規定水平還是垂直組合復選框。

Collapsible

標題元素，其后是位于帶有 data-role="collapsible" 屬性的容器中的任意 HTML 標記。

Data 屬性 值 描述
data-collapsed true | false 規定內容是否應該關閉或展開。
data-collapsed-icon Icons Reference 規定可折疊按鈕的圖標。默認是 "plus"。
data-content-theme letter (a-z) 規定可折疊內容的主題顏色。同時會向可折疊內容添加圓角。
data-expanded-icon Icons Reference 規定內容被展開時的可折疊按鈕的圖標。默認是“減號”。
data-iconpos left | right | top | bottom 規定圖標的位置。
data-inset true | false 規定可折疊按鈕是否擁有圓角和外邊距的樣式。
data-mini true | false 規定可折疊按鈕是小型的還是常規尺寸的。
data-theme letter (a-z) 規定可折疊按鈕的主題顏色。

Collapsible Set

帶有 data-role="collapsible-set" 屬性的容器中的可折疊內容塊。

Data 屬性 值 描述
data-collapsed-icon Icons Reference 規定可折疊按鈕的圖標。默認是“加號”。
data-content-theme letter (a-z) 規定可折疊內容的主題顏色。
data-expanded-icon Icons Reference 規定內容被展開時的可折疊按鈕的圖標。默認是“減號”。
data-iconpos left | right | top | bottom | notext 規定圖標的位置。
data-inset true | false 規定 collapsibles 是否擁有圓角和外邊距的樣式。
data-mini true | false 規定可折疊按鈕是小型的還是常規尺寸的。
data-theme letter (a-z) 規定可折疊集合的主題顏色。

Content

帶有 data-role="content" 屬性的容器。

Data 屬性 值 描述
data-theme letter (a-z) 規定內容的主題顏色。默認是 "c"。

Controlgroup

帶有 data-role="controlgroup" 屬性的 <div> or <fieldset> 容器。組合多個按鈕樣式的單一類型 input（基于鏈接的按鈕、單選按鈕、復選框、選擇菜單）。

Data 屬性 值 描述
data-mini true | false 規定組合是小型的還是常規尺寸的。
data-type horizontal | vertical 規定組合水平還是垂直顯示。

Dialog

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 規定對話頁的標題。

Enhancement

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

Data 屬性 值 描述
data-enhance true | false 如果設置為 "true"，, (default) jQuery Mobile 會自動為頁面添加樣式，使其更適合移動設備。如果設置為 "false"，則框架不會設置頁面的樣式。
data-ajax true | false 規定是否通過 AJAX 來加載頁面。

注釋：data-enhance="false" 比如結合 $.mobile.ignoreContentEnabled=true" 使用，以阻止 jQuery Mobile 自動添加頁面樣式。

當 $.mobile.ignoreContentEnabled 設置為 true 時，data-ajax="false" 的容器中的任何鏈接或表單元素，將被框架的導航功能忽略。

Fieldcontainer

包裝 label/form 元素對的 data-role="fieldcontain" 的容器。

Fixed Toolbar

帶有 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 規定在顯示父頁面時的工具欄可見性。

Flip Toggle Switch

帶有 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) 規定軌道的主題顏色。

Footer

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

Data 屬性 值 描述
data-id sometext 規定唯一 ID。對于 persistent footers 是必需的。
data-position inline | fixed 規定頁腳與頁面內容是行內關系，還是保留在底部。
data-fullscreen true | false 規定頁面是否始終位于底部并覆蓋頁面內容 (slightly see-through)。
data-theme letter (a-z) 規定頁腳的主題顏色。默認是 "a"。

注釋：如需啟用 fullscreen 定位，請使用 data-position="fixed"，然后為該元素添加 data-fullscreen 屬性。

Header

data-role="header" 的容器。

Data 屬性 值 描述
data-id sometext 規定唯一 ID。對于 persistent headers 是必需的。
data-position inline | fixed 規定頁眉與頁面內容是行內關系，還是保留在頂部。
data-fullscreen true | false 規定頁面是否始終位于頂部并覆蓋頁面內容 (slightly see-through)。
data-theme letter (a-z) 規定頁眉的主題顏色。默認是 "a"。

注釋：如需啟用 fullscreen 定位，請使用 data-position="fixed"，然后為該元素添加 data-fullscreen 屬性。

Link

所有鏈接，包括 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 - 鏈接到另一域。 opens - 打開彈出窗口。
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 - 在窗口屏幕中間彈出。

List

帶有 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 Reference 規定列表的圖標。
data-inset true | false 規定是否為列表添加圓角和外邊距樣式。
data-split-icon Icons Reference 規定劃分按鈕的圖標。默認是 "arrow-r"。
data-split-theme letter (a-z) 規定劃分按鈕的主題顏色。默認是 "b"。
data-theme letter (a-z) 規定列表的主題顏色。

List item

帶有 data-role="listview" 屬性的 <ol> 或 <ul> 中的 <li>。

Data 屬性 值 描述
data-filtertext sometext 規定在過濾元素時搜索的文本。該文本而不是實際的列表項文本將會被搜索。
data-icon Icons Reference 規定列表項的圖標。
data-role list-divider 規定列表項的分隔符。
data-theme letter (a-z) 規定列表項的主題顏色。

注釋：data-icon 屬性僅適用于含有鏈接的列表項。

Navbar

帶有 data-role="navbar" 屬性的容器內部的 <li> 元素。

Data 屬性 值 描述
data-icon Icons Reference 規定列表項的圖標。
data-iconpos left | right | top | bottom | notext 規定圖標的位置。

提示：導航欄從其父容器繼承 theme-swatch。向導航欄設置 data-theme 屬性是不可行的。可以單獨向 navbar 中的每個鏈接設置 data-theme 屬性。

Page

帶有 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，而不是用于請求頁面。

Popup

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

Data 屬性 值 描述
data-corners true | false 規定彈出框是否有圓角。
data-overlay-theme letter (a-z) 規定彈出框的疊加（背景）色。默認是透明背景（none）。
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 過渡。

Radio Button

label 與 type="radio" 的 input 對。會被自動設置為按鈕樣式，無需 data-role。

Data 屬性 值 描述
data-mini true | false 規定按鈕是否小型的或者是常規尺寸的。
data-role none 放置 jQuery Mobile 將單選按鈕設置為 enhanced buttons 的樣式。
data-theme letter (a-z) 規定單選按鈕的主題顏色。

提示：如需組合多個單選按鈕，請使用 data-role="controlgroup" 以及 data-type="horizontal|vertical" 來規定水平還是垂直地組合按鈕。

Select

所有 <select> 元素。會被自動設置按鈕的樣式，無需 date-role。

Data 屬性 值 描述
data-icon Icons Reference 規定 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 可以在非原生 select 的 <option> 元素上設置。
data-role none 放置 jQuery Mobile 將 select 元素設置為按鈕樣式。
data-theme letter (a-z) 規定 select 元素的主題顏色。

提示：如需組合多個 select 元素，請使用 data-role="controlgroup" 以及 data-type="horizontal|vertical" 來規定把該元素水平還是垂直地進行組合。

Slider

type="range" 的 input 元素。會被自動設置為按鈕樣式，無需 data-role。

Data 屬性 值 描述
data-highlight true | false 規定是否突出顯示滑塊軌道。
data-mini true | false 規定滑塊是小型的還是常規尺寸的。
data-role none 放置 jQuery Mobile 將滑塊設置按鈕的樣式。
data-theme letter (a-z) 規定滑塊控件（input、handle 和 track）的主題顏色。
data-track-theme letter (a-z) 規定滑塊軌道的主題顏色。

Text input & Textarea

type="text|search|etc." 的 input 元素或 textarea 元素。會被自動設置樣式，無需 data-role。

Data 屬性 值 描述
data-mini true | false 規定是否 input 元素是小型的還是常規尺寸的。
data-role none 放置 jQuery Mobile 將 input/textarea 設置問按鈕的樣式。
data-theme letter (a-z) 規定輸入字段的主題顏色。