- jQuery Mobile 教程
- jQuery Mobile - 首頁
- jQuery Mobile - 概述
- jQuery Mobile - 設定
- jQuery Mobile - 頁面
- jQuery Mobile - 圖示
- jQuery Mobile - 轉場動畫
- jQuery Mobile - 佈局
- jQuery Mobile - 小部件
- jQuery Mobile - 事件
- jQuery Mobile - 表單
- jQuery Mobile - 主題
- jQuery Mobile - CSS 類
- jQuery Mobile - 資料屬性
- jQuery Mobile 有用資源
- jQuery Mobile - 面試問題
- jQuery Mobile - 快速指南
- jQuery Mobile - 有用資源
- jQuery Mobile - 討論
jQuery Mobile - 資料屬性
按鈕
它指定一個可點選的按鈕,使用類ui-btn包含文字或影像等內容。在1.4版本中已棄用。使用ui-btn屬性代替data-role = "button"屬性。
下表列出了與資料屬性一起使用的按鈕元素。
| 序號 | 資料屬性 & 說明 | 值 |
|---|---|---|
| 1 | data-corners 它定義按鈕是否應包含圓角。 |
true | false |
| 2 | data-icon 它定義按鈕的圖示。 |
預設情況下沒有圖示 |
| 3 | data-iconpos 它定義圖示的位置。 |
left | right | top | bottom |
| 4 | data-iconshadow 它定義按鈕的圖示是否應包含陰影。 |
true | false |
| 5 | data-inline 它定義按鈕是否應內聯顯示。 |
true | false |
| 6 | data-mini 它定義按鈕應顯示較小尺寸還是常規尺寸。 |
true | false |
| 7 | data-shadow 它定義按鈕是否應包含陰影。 |
true | false |
| 8 | data-theme 它顯示按鈕的主題顏色。 |
字母 (a-z) |
複選框
下表列出了與type = "checkbox"一起使用的複選框元素。
| 序號 | 資料屬性 & 說明 | 值 |
|---|---|---|
| 1 | data-mini 它定義複選框應顯示較小尺寸還是常規尺寸。 |
true | false |
| 2 | data-role 它停止將複選框樣式設定為按鈕。 |
none |
| 3 | data-theme 它顯示覆選框的主題顏色。 |
字母 (a-z) |
可摺疊面板
下表列出了與data-role = "collapsible"屬性一起使用的可摺疊面板元素。
| 序號 | 資料屬性 & 說明 | 值 |
|---|---|---|
| 1 | data-collapsed 它指示內容是否應關閉或展開。 |
true | false |
| 2 | data-collapsed-cue-text 它為使用螢幕閱讀器軟體的使用者顯示反饋。 |
預設值為摺疊內容 |
| 3 | data-collapsed-icon 它定義可摺疊按鈕的圖示。 |
預設圖示為“plus” |
| 4 | data-content-theme 它顯示可摺疊內容的主題顏色。 |
字母 (a-z) |
| 5 | data-expanded-cue-text 它為使用螢幕閱讀器軟體的使用者顯示反饋。 |
預設值為展開內容 |
| 6 | data-expanded-icon 展開內容時,它顯示可摺疊按鈕。 |
預設圖示為“minus” |
| 7 | data-iconpos 它定義圖示的位置。 |
left | right | top | bottom |
| 8 | data-inset 它定義可摺疊按鈕是否應顯示圓角和邊距。 |
true | false |
| 9 | data-mini 它定義可摺疊按鈕應顯示較小尺寸還是常規尺寸。 |
true | false |
| 10 | data-theme 它顯示可摺疊按鈕的主題顏色。 |
字母 (a-z) |
可摺疊面板組
下表列出了與data-role = "collapsibleset"屬性一起使用的可摺疊面板組元素。
| 序號 | 資料屬性 & 說明 | 值 |
|---|---|---|
| 1 | data-collapsed-icon 它定義可摺疊按鈕的圖示。 |
預設圖示為“plus” |
| 2 | data-content-theme 它顯示可摺疊內容的主題顏色。 |
字母 (a-z) |
| 3 | data-expanded-icon 展開內容時,它顯示可摺疊按鈕。 |
預設圖示為“minus” |
| 4 | data-iconpos 它定義圖示的位置。 |
left | right | top | bottom |
| 5 | data-inset 它定義可摺疊按鈕是否應顯示圓角和邊距。 |
true | false |
| 6 | data-mini 它定義可摺疊按鈕應顯示較小尺寸還是常規尺寸。 |
true | false |
| 7 | data-theme 它顯示可摺疊按鈕的主題顏色。 |
字母 (a-z) |
控制元件組
下表列出了與data-role = "controlgroup"屬性一起使用的控制元件組元素。
| 序號 | 資料屬性 & 說明 | 值 |
|---|---|---|
| 1 | data-exclude-invisible 它定義是否在分配圓角時排除不可見的子元素。 |
true | false |
| 2 | data-mini 它定義組應顯示較小尺寸還是常規尺寸。 |
true | false |
| 3 | data-theme 它顯示控制元件組的主題顏色。 |
字母 (a-z) |
| 4 | data-type 它指示組應以水平還是垂直格式顯示。 |
horizontal | vertical |
對話方塊
下表列出了與data-dialog="true"屬性一起使用的對話方塊元素。
| 序號 | 資料屬性 & 說明 | 值 |
|---|---|---|
| 1 | data-close-btn 它定義關閉按鈕的位置。 |
left | right | none |
| 2 | data-close-btn-text 它定義關閉按鈕的文字。 |
text |
| 3 | data-corners 它定義對話方塊是否應顯示圓角。 |
true | false |
| 4 | data-dom-cache 它指示是否必須清除各個頁面的DOM快取。 |
true | false |
| 5 | data-overlay-theme 它定義對話方塊頁面的疊加顏色。 |
字母 (a-z) |
| 6 | data-theme 它定義對話方塊頁面的主題顏色。 |
字母 (a-z) |
| 7 | data-title 它定義對話方塊頁面的標題。 |
text |
增強
下表列出了與data-enhance="false" 或 data-ajax = "false"屬性一起使用的增強元素。
| 序號 | 資料屬性 & 說明 | 值 |
|---|---|---|
| 1 | data-enhance 您可以透過將此屬性設定為“true”來設定頁面的樣式。如果將其設定為“false”,則無法設定頁面的樣式。 |
true | false |
| 2 | data-ajax 它指示頁面是否必須從Ajax載入。 |
true | false |
固定工具欄
下表列出了與data-position = "fixed"屬性一起使用的工具欄元素。
| 序號 | 資料屬性 & 說明 | 值 |
|---|---|---|
| 1 | data-disable-page-zoom 它定義使用者是否能夠縮放頁面。 |
true | false |
| 2 | data-fullscreen 它定義工具欄必須位於頂部和/或底部。 |
true | false |
| 3 | data-tap-toggle 它指示使用者是否可以透過點選切換工具欄可見性。 |
true | false |
| 4 | data-transition 當您點選或單擊元素時,它會顯示過渡效果。 |
slide | fade | none |
| 5 | data-update-page-padding 它使用調整大小、過渡和更新佈局事件來更新頁面的填充。 |
true | false |
| 6 | data-visible-on-page-show 它定義父頁面顯示時工具欄的可見性。 |
true | false |
翻轉開關
下表列出了與data-role = "flipswitch"屬性一起使用的翻轉開關元素。
| 序號 | 資料屬性 & 說明 | 值 |
|---|---|---|
| 1 | data-mini 它定義開關應顯示較小尺寸還是常規尺寸。 |
true | false |
| 2 | data-on-text 它定義翻轉開關上的“on”文字。 |
預設值為“on” |
| 3 | data-off-text 它定義翻轉開關上的“off”文字。 |
預設值為“off” |
頁尾
下表列出了與data-role="footer"屬性一起使用的頁尾元素。
| 序號 | 資料屬性 & 說明 | 值 |
|---|---|---|
| 1 | data-id 它定義唯一的ID。 |
text |
| 2 | data-position 它定義頁尾是否應位於底部或與頁面內容內聯。 |
inline | fixed |
| 3 | data-fullscreen 它定義頁尾是否應位於底部並在頁面內容之上。 |
true | false |
| 4 | data-theme 它定義頁尾的主題顏色。 |
字母 (a-z) |
頁首
下表列出了與data-role = "header"屬性一起使用的頁首元素。
| 序號 | 資料屬性 & 說明 | 值 |
|---|---|---|
| 1 | data-id 它定義唯一的ID。 |
text |
| 2 | data-position 它定義頁首是否應位於底部或與頁面內容內聯。 |
inline | fixed |
| 3 | data-fullscreen 它定義頁首是否應位於底部並在頁面內容之上。 |
true | false |
| 4 | data-theme 它定義頁首的主題顏色。 |
字母 (a-z) |
輸入
下表列出了與type = "text|search|etc"屬性一起使用的輸入元素。
| 序號 | 資料屬性 & 說明 | 值 |
|---|---|---|
| 1 | data-clear-btn 它定義輸入元素是否應包含清除按鈕。 |
true | false |
| 2 | data-clear-btn-text 它定義清除按鈕的文字。 |
text |
| 3 | data-mini 它定義輸入應顯示較小尺寸還是常規尺寸。 |
true | false |
| 4 | data-role 它停止將輸入或文字區域樣式設定為按鈕。 |
none |
| 5 | data-theme 它定義輸入元素的主題顏色。 |
字母 (a-z) |
連結
下表列出了與jQuery Mobile一起使用的連結元素。
| 序號 | 資料屬性 & 說明 | 值 |
|---|---|---|
| 1 | data-ajax 它指示頁面是否必須透過Ajax載入。 |
true | false |
| 2 | data-direction 它用於反向轉換。 |
reverse |
| 3 | data-dom-cache 它指示是否必須清除頁面的jQuery DOM快取。 |
true | false |
| 4 | data-prefetch 它用於將頁面預取到DOM中。 |
true | false |
| 5 | data-rel 它指定連結的行為。 |
back | dialog | external | popup |
| 6 | data-transition 它定義從一個頁面到另一個頁面的轉換。 |
fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none |
| 7 | data-position-to 它定義彈出框的位置。 |
origin | jQuery 選擇器 | window |
列表
下表顯示了與data-role = "listview"屬性一起使用的列表元素。
| 序號 | 資料屬性 & 說明 | 值 |
|---|---|---|
| 1 | data-autodividers 它自動劃分列表。 |
true | false |
| 2 | data-count-theme 它定義計數元素的主題顏色。 |
字母 (a-z) |
| 3 | data-divider-theme 它定義列表分隔符的主題顏色。 |
字母 (a-z) |
| 4 | data-filter 它用於在搜尋框中過濾列表值。 |
true | false |
| 5 | data-filter-placeholder 它在搜尋框內定義一些文字。 |
text |
| 6 | data-filter-theme 它定義搜尋過濾器的主題顏色。 |
字母 (a-z) |
| 7 | data-icon 它為列表提供圖示。 |
預設情況下沒有圖示 |
| 8 | data-inset 它定義列表是否應顯示圓角和邊距。 |
true | false |
| 9 | data-split-icon 它定義拆分按鈕的圖示。 |
預設圖示為“arrow-r” |
| 10 | data-split-theme 它定義拆分按鈕的主題顏色。 |
字母 (a-z) |
| 11 | data-theme 它定義列表的主題顏色。 |
字母 (a-z) |
列表項
下表顯示了與data-role = "listview"屬性一起使用的列表項元素。
| 序號 | 資料屬性 & 說明 | 值 |
|---|---|---|
| 1 | data-filtertext 它用於使用搜索框中的文字過濾列表值。 |
text |
| 2 | data-icon 它為列表項提供圖示。 |
預設情況下沒有圖示 |
| 3 | data-role 它定義列表項的分隔符。 |
list-divider |
| 4 | data-theme 它定義列表項的主題顏色。 |
字母 (a-z) |
導航欄
下表列出了與data-role = "navbar"屬性一起使用的導航欄元素。
| 序號 | 資料屬性 & 說明 | 值 |
|---|---|---|
| 1 | data-icon 它為列表項提供圖示。 |
預設情況下沒有圖示 |
| 2 | data-iconpos 它定義圖示的位置。 |
left | right | top | bottom | notext |
頁面
下表列出了與data-role = "page"屬性一起使用的頁面元素。
| 序號 | 資料屬性 & 說明 | 值 |
|---|---|---|
| 1 | data-dom-cache 它指示是否必須清除各個頁面的DOM快取。 |
true | false |
| 2 | data-overlay-theme 它定義對話方塊頁面的疊加顏色。 |
字母 (a-z) |
| 3 | data-theme 它定義頁面的主題顏色。 |
字母 (a-z) |
| 4 | data-title 它為頁面提供標題。 |
預設情況下沒有圖示 |
| 5 | data-url 它用於更新URL。 |
url |
彈出視窗
下表列出了與data-role = "popup"屬性一起使用的彈出視窗元素。
| 序號 | 資料屬性 & 說明 | 值 |
|---|---|---|
| 1 | data-corners 它定義彈出視窗是否應顯示圓角和邊距。 |
true | false |
| 2 | data-dismissible 它定義是否可以透過點選外部關閉彈出視窗。 |
true | false |
| 3 | data-history 它定義開啟時彈出視窗是否應顯示專案的歷史記錄。 |
true | false |
| 4 | data-overlay-theme 它定義彈出框的疊加顏色。 |
字母 (a-z) |
| 5 | data-shadow 它顯示彈出框的陰影。 |
true | false |
| 6 | data-theme 它定義彈出框的主題顏色。 |
字母 (a-z) |
| 7 | data-tolerance 它定義視窗的邊緣。 |
30, 15, 30, 15 |
單選按鈕
下表列出了與type = "radio"屬性一起使用的單選按鈕元素。
| 序號 | 資料屬性 & 說明 | 值 |
|---|---|---|
| 1 | data-mini 它定義按鈕應顯示較小尺寸還是常規尺寸。 |
true | false |
| 2 | data-role 它停止將單選按鈕樣式設定為增強的按鈕。 |
none |
| 3 | data-theme 它定義單選按鈕的主題顏色。 |
字母 (a-z) |
選擇
下表列出了與jQuery Mobile一起使用的選擇元素。
| 序號 | 資料屬性 & 說明 | 值 |
|---|---|---|
| 1 | data-icon 它提供選擇元素的圖示。 |
預設為 "arrow-d" |
| 2 | data-iconpos 它定義圖示的位置。 |
left | right | top | bottom |
| 3 | data-inline 它定義按鈕是否應內聯顯示。 |
true | false |
| 4 | data-mini 它定義選擇元素是顯示較小尺寸還是常規尺寸。 |
true | false |
| 5 | data-native-menu 當它設定為 false 時,它使用自定義選單。 |
true | false |
| 6 | data-overlay-theme 它定義自定義選擇選單的覆蓋層顏色。 |
字母 (a-z) |
| 7 | data-placeholder 它用於設定非原生選擇元素的選項元素。 |
true | false |
| 8 | data-role 它阻止將選擇元素樣式化為按鈕。 |
none |
| 9 | data-theme 它顯示選擇元素的主題顏色。 |
字母 (a-z) |
滑塊
下表列出了帶有type = "range" 屬性的滑塊元素。
| 序號 | 資料屬性 & 說明 | 值 |
|---|---|---|
| 1 | data-highlight 它高亮顯示滑塊。 |
true | false |
| 2 | data-mini 它定義滑塊是顯示較小尺寸還是常規尺寸。 |
true | false |
| 3 | data-role 它阻止將滑塊控制元件樣式化為按鈕。 |
none |
| 4 | data-theme 它顯示滑塊控制元件的主題顏色。 |
字母 (a-z) |
| 5 | data-track-theme 它顯示滑塊軌道的主題顏色。 |
字母 (a-z) |