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)
廣告
© . All rights reserved.