jQuery的數據屬性
jQuery Mobile的使用HTML5 data-*屬性來創建一個"touch-friendly"和有吸引力的外觀為移動設備。
對於下面的參考列表， bold value指定默認值。
按鍵
不推薦使用1.4版本。 使用CSS類來代替。超鏈接與data-role="button" 。 按鈕元素和工具欄和輸入欄鏈接是自動樣式按鈕，無需data-role="button" 。
| 數據屬性 | 值 | 描述 |
|---|---|---|
| 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"應否組按鈕水平或垂直指定。
複選框
與標籤和輸入的雙type="checkbox" 。
| 數據屬性 | 值 | 描述 |
|---|---|---|
| data-mini | true | false | 指定複選框是否應為小型或規模 |
| data-role | none | 防止jQuery Mobile的樣式複選框，按鈕 |
| data-theme | letter (a-z) | 指定複選框的主題色 |
將多個複選框，使用data-role="controlgroup"連同data-type="horizontal|vertical" ，以指定組是否水平或垂直的複選框。
可折疊
頭元素後跟任何HTML標記在一個容器內data-role="collapsible" 。
| 數據屬性 | 值 | 描述 |
|---|---|---|
| data-collapsed | true | false | 指定的內容是否應該被關閉或膨脹 |
| data-collapsed-cue-text | sometext | 指定一些文本，為屏幕閱讀軟件的用戶提供聲音反饋。 默認為“點擊崩潰的內容。” |
| data-collapsed-icon | Icons Reference | 指定可折疊按鈕的圖標。 默認值是“加” |
| data-content-theme | letter (a-z) | 指定可折疊內容的主題色。 也將圓角添加到可折疊內容 |
| data-expanded-cue-text | sometext | 指定一些文本，為屏幕閱讀軟件的用戶提供聲音反饋。 默認為“點擊展開內容”。 |
| data-expanded-icon | Icons Reference | 指定當內容已展開可折疊按鈕的圖標。 默認值是"minus" |
| data-iconpos | left | right | top | bottom | 指定圖標的位置 |
| data-inset | true | false | 指定是否可折疊按鈕應帶圓角和一些保證金或不樣式 |
| data-mini | true | false | 指定可折疊按鈕是否應為小型或規模 |
| data-theme | letter (a-z) | 指定可折疊按鈕的主題顏色 |
可折疊套裝
用一個容器內可折疊內容塊data-role="collapsibleset"
| 數據屬性 | 值 | 描述 |
|---|---|---|
| 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) | 指定可折疊集的主題色 |
內容
棄用1.4版本，並將在1.5集裝箱與刪除 data-role="content" 。
| 數據屬性 | 值 | 描述 |
|---|---|---|
| data-theme | letter (a-z) | 指定內容的主題色 |
控制組
一個<div>或<fieldset>集裝箱data-role="controlgroup" 組單一類型（基於鏈接的按鈕，單選按鈕，複選框，選擇元素）的多個按鈕風格的輸入。 對於分組的形式複選框和單選按鈕，在<fieldset>容器內部推薦一個<div>與"ui-fieldcontain"級，以提高標籤的造型。
| 數據屬性 | 值 | 描述 |
|---|---|---|
| data-exclude-invisible | true | false | 指定是否在圓角的分配排除看不見的孩子 |
| data-mini | true | false | 指定組是否應為小型或規模 |
| data-theme | letter (a-z) | 指定controlgroup的主題色 |
| data-type | horizontal | vertical | 指定是否應該將該組水平或垂直顯示 |
對話
與容器data-dialog="true" 。
| 數據屬性 | 值 | 描述 |
|---|---|---|
| data-close-btn | left | right | none | 指定關閉按鈕的位置 |
| data-close-btn-text | sometext | 指定關閉按鈕文本 |
| data-corners | true | false | 指定對話框是否應該圓角或不 |
| 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-enhance | true | false | 如果設置為"true" ，（默認值）jQuery Mobile的自動風格的頁面，使其適合移動設備。 如果設置為“假”，該框架將不會在樣式頁面 |
| data-ajax | true | false | 指定是否通過AJAX或無法加載頁面 |
注： data-enhance="false"必須配合使用$.mobile.ignoreContentEnabled=true"自動停止jQuery Mobile的樣式頁面。
內部的任何鏈接或表單元素data-ajax="false"集裝箱將通過框架的導航功能時，可以忽略$.mobile.ignoreContentEnabled設置為true。
集裝箱場
棄用在1.4版本，並且將在1.5被移除。 使用class="ui-fieldcontain instead" 。與容器data-role="fieldcontain"圍繞標籤/表單元素對包裹。
固定工具欄
與容器data-role="header"或data-role="footer"的共同data-position="fixed"屬性。
| 數據屬性 | 值 | 描述 |
|---|---|---|
| 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 | 同時指定網頁頂部和底部的填充在調整大小，過渡和更新"updatelayout"事件（jQuery Mobile的更新總是在填充"pageshow"事件） |
| data-visible-on-page-show | true | false | 指定當顯示父頁面工具欄可視性 |
翻轉撥動開關
一個<input type="checkbox">與數據角色"flipswitch"
| 數據屬性 | 值 | 描述 |
|---|---|---|
| data-mini | true | false | 指定交換機是否應該是小的或常規尺寸的 |
| data-on-text | sometext | 指定“的”翻轉開關上的文本（默認為"On" |
| data-off-text | sometext | 指定翻轉開關“關”文本（默認為"Off" ） |
頁腳
與容器data-role="footer" 。
| 數據屬性 | 值 | 描述 |
|---|---|---|
| data-id | sometext | 指定一個唯一的ID。 需要持續頁腳 |
| data-position | inline | fixed | 指定頁腳是否應與頁面內容是inline或仍位於底部 |
| data-fullscreen | true | false | 指定是否頁腳應始終被放置在底部，並通過網頁內容（略透視）或不 |
| data-theme | letter (a-z) | 指定頁腳的主題色 |
注意：要啟用全屏位置，使用data-position="fixed" ，然後添加data-fullscreen屬性的元素。
頭
與容器data-role="header"
| 數據屬性 | 值 | 描述 |
|---|---|---|
| data-id | sometext | 指定一個唯一的ID。 需要持續的頭 |
| data-position | inline | fixed | 指定標題是否應與網頁內容是內聯或保持定位在頂部 |
| data-fullscreen | true | false | 指定標頭是否應始終被放置在頂部和在頁面內容（略透視）或不 |
| data-theme | letter (a-z) | 指定標題的主題色 |
注意：要啟用全屏位置，使用data-position="fixed" ，然後添加data-fullscreen屬性的元素。
輸入
與輸入type="text|search|etc."或textarea elements 。
| 數據屬性 | 值 | 描述 |
|---|---|---|
| data-clear-btn | true | false | 指定輸入是否應該有一個"clear"按鈕 |
| data-clear-btn-text | text | 指定“清除”按鈕的文本。 默認值是"clear text" |
| data-mini | true | false | 指定輸入是否應該是小的或常規尺寸的 |
| data-role | none | 防止jQuery Mobile的樣式輸入/文字區域，按鈕 |
| data-theme | letter (a-z) | 指定輸入字段的主題色 |
鏈接
所有鏈接。
| 數據屬性 | 值 | 描述 |
|---|---|---|
| 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 | 指定鏈接的行為方式的選擇。 後退 - 移動早在歷史上的一個步驟。 對話框 - 打開一個鏈接作為一個對話框，在歷史上沒有跟踪。 外部 - 鏈接到其他域。 彈出窗口 - 打開一個彈出窗口。 |
| data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none | 指定如何轉型從一個頁面到下一個。 看到我們的jQuery Mobile的過渡章。 |
| data-position-to | origin | jQuery selector | window | 指定的彈出框的位置。 原產地 - 默認。 在位置打開該鏈接彈出。 jQuery選擇 - 定位在指定的元素彈出。 窗口 - 定位窗口屏幕中央彈出。 |
名單
一個<ol>或<ul>與data-role="listview" 。
| 數據屬性 | 值 | 描述 |
|---|---|---|
| data-autodividers | true | false | 指定是否自動將列表中的項目或不 |
| data-count-theme | letter (a-z) | 指定計數泡沫的主題色 |
| data-divider-theme | letter (a-z) | 指定列表分頻器的主題色 |
| data-filter | true | false | 指定是否添加一個搜索框列表或不 |
| data-filter-placeholder | sometext | 不推薦使用1.4版本。 使用HTML佔位符代替屬性，指定搜索框內的文字。 默認值是“過濾器項目......” |
| data-filter-theme | letter (a-z) | 指定搜索過濾器的主題色 |
| data-icon | Icons Reference | 指定列表的圖標 |
| data-inset | true | false | 指定是否清單應以圓角和一些保證金或不樣式 |
| data-split-icon | Icons Reference | 指定拆分按鈕的圖標。 默認為“箭-R” |
| data-split-theme | letter (a-z) | 指定拆分按鈕的主題顏色 |
| data-theme | letter (a-z) | 指定列表的主題色 |
列表項目
一個<li>內的<ol>或<ul>與data-role="listview" 。
| 數據屬性 | 值 | 描述 |
|---|---|---|
| data-filtertext | sometext | 指定要搜索的文本過濾元件時。 那麼該文本將被過濾掉，而不是實際列表項的文本 |
| data-icon | Icons Reference | 指定列表項目的圖標 |
| data-role | list-divider | 指定列表項的分隔 |
| data-theme | letter (a-z) | 指定列表項的主題色 |
注：數據圖標屬性上的鏈接列表項唯一的工作。
導航欄
<li>的容器中的元素與data-role="navbar" 。
| 數據屬性 | 值 | 描述 |
|---|---|---|
| data-icon | Icons Reference | 指定列表項目的圖標 |
| data-iconpos | left | right | top | bottom | notext | 指定圖標的位置 |
Navbars繼承父容器的主題樣本。 這是不可能的數據主題屬性設置為導航欄。 數據-theme屬性可以單獨設置為導航欄裡面的每一個環節。
頁
與容器data-role="page" 。
| 數據屬性 | 值 | 描述 |
|---|---|---|
| data-dom-cache | true | false | 指定是否清除jQuery的DOM緩存或不是單個頁面（如果設置為true，你需要照顧好自己和徹底的測試管理DOM上的所有移動設備） |
| data-overlay-theme | letter (a-z) | 指定對話框頁面的疊加（背景）顏色 |
| data-theme | letter (a-z) | 指定頁面的主題顏色 |
| data-title | sometext | 指定頁面標題 |
| data-url | url | 用於更新的URL，而不是用來請求頁面的URL值 |
彈出
與容器data-role="popup" 。
| 數據屬性 | 值 | 描述 |
|---|---|---|
| data-corners | true | false | 指定彈出是否應該圓角或不 |
| data-dismissible | true | false | 指定是否彈出應通過點擊彈出之外，或無法關閉 |
| data-history | true | false | 指定打開時彈出是否應該創建一個瀏覽器歷史記錄的項目。 如果設置為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-position-to | origin | jQuery selector | window | 指定的彈出框的位置。 原產地 - 默認。 在位置打開該鏈接彈出。 jQuery選擇 - 定位在指定的元素彈出。 窗口 - 定位窗口屏幕中央彈出。 |
| data-rel | popup | 對於打開彈出框 |
| data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none | 指定如何轉型從一個頁面到下一個。 看到我們的jQuery Mobile的過渡章。 |
單選按鈕
與標籤和輸入的雙type="radio" 。
| 數據屬性 | 值 | 描述 |
|---|---|---|
| data-mini | true | false | 指定按鈕是否應該是小的或常規尺寸的 |
| data-role | none | 防止jQuery Mobile的樣式radiobuttons增強的按鈕 |
| data-theme | letter (a-z) | 指定單選按鈕的主題顏色 |
到組多個無線電按鈕，使用data-role="controlgroup"連同data-type="horizontal|vertical"水平或垂直指定是否組中的按鈕。
選擇
所有<select>元素。
| 數據屬性 | 值 | 描述 |
|---|---|---|
| data-icon | Icons Reference | 指定選擇元素的圖標。 默認為"arrow-d" |
| data-iconpos | left | right | top | bottom | notext | 指定圖標的位置 |
| data-inline | true | false | 指定選擇元素是否應為內聯與否 |
| data-mini | true | false | 指定是否選擇應該是小型或規模 |
| 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的樣式選擇元素按鈕 |
| data-theme | letter (a-z) | 指定選擇元素的主題色 |
將多個選擇元素，使用data-role="controlgroup"連同data-type="horizontal|vertical"水平或垂直指定是否組的元素。
滑塊
與輸入type="range" 。
| 數據屬性 | 值 | 描述 |
|---|---|---|
| data-highlight | true | false | 指定滑塊軌道是否應當強調或不 |
| data-mini | true | false | 指定滑塊是否應該是小的或常規尺寸的 |
| data-role | none | 防止jQuery Mobile的樣式滑塊控件按鈕 |
| data-theme | letter (a-z) | 指定滑塊控件的主題顏色（輸入，處理和跟踪） |
| data-track-theme | letter (a-z) | 指定滑塊軌道的主題色 |