jQuery Mobile Data 屬性

jQuery Data 屬性

jQuery Mobile 使用 HTML5 data-* 屬性來為移動設備創建更具觸摸友好性和吸引性的外觀。

在下面的參考列表中，粗體顯示的值為默認值。

按鈕

在1.4 版本以后已廢棄。使用

CSS 類 替代。帶有 data-role="button" 的超鏈接。button 元素、工具欄中的鏈接以及 input 字段都會自動渲染成按鈕樣式，不需要添加 data-role="button"。

Data-屬性

值

描述

data-corners

true | false

規定按鈕是否圓角

data-icon

規定按鈕的圖標。默認沒有圖標。

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

字母 (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

字母 (a-z)

規定復選框的主題顏色

如需組合多個復選框，請使用帶有 data-role="controlgroup" 屬性和 data-type="horizontal|vertical" 的容器來規定是否水平或垂直組合復選框。

可折疊塊

在帶有 data-role="collapsible" 的容器內部的后跟任意 HTML 標記的標題元素。

Data-屬性

值

描述

data-collapsed

true | false

規定內容是折疊還是展開

data-collapsed-icon

規定可折疊按鈕的圖標。默認是 "plus"

data-content-theme

字母 (a-z)

規定可折疊內容的主題顏色。是否為可折疊內容添加圓角

data-expanded-icon

規定當內容展開時可折疊按鈕的圖標。默認是 "minus"

data-iconpos

left | right | top | bottom

規定圖標的位置

data-inset

true | false

規定可折疊按鈕是否渲染成圓角且帶外邊距

data-mini

true | false

規定可折疊按鈕是小尺寸還是常規尺寸

data-theme

字母 (a-z)

規定可折疊按鈕的主題顏色

可折疊集合

在帶有 data-role="collapsible-set" 的容器內部的可折疊內容塊。

Data-屬性

值

描述

data-collapsed-icon

規定可折疊按鈕的圖標。默認是 "plus"

data-content-theme

字母 (a-z)

規定可折疊按鈕的主題顏色

data-expanded-icon

規定當內容展開時可折疊按鈕的圖標。默認是 "minus"

data-iconpos

left | right | top | bottom | notext

規定圖標的位置

data-inset

true | false

規定可折疊塊是否渲染成圓角且帶外邊距

data-mini

true | false

規定可折疊按鈕是小尺寸還是常規尺寸

data-theme

字母 (a-z)

規定可折疊集合的主題顏色

內容

在 1.4 版本已廢棄, 1.5 版本后不再支持。 使用 data-role="content" 的容器。

Data-屬性

值

描述

data-theme

字母 (a-z)

規定內容的主題顏色。

控件組

帶有 data-role="controlgroup" 的

或 容器。

組合單個類型(基于鏈接的按鈕、單選按鈕、復選框、select 元素)的多個按鈕樣式的 input。對于組合表單復選框和單選按鈕，推薦在帶有 data-role="fieldcontain" 的

內使用 容器來改進標簽樣式。

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

字母 (a-z)

規定對話框頁面的蒙版(背景)顏色

data-theme

字母 (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" 容器內的任何鏈接或表單元素將會被框架的導航功能忽略。

域容器

1.4 版本后已廢棄，在 1.5 版本后不再支持，將使用 class="ui-fieldcontain 替代"。 包裹在 label/form 元素對，并帶有 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" 的 元素和兩個 元素。

Data-屬性

值

描述

data-mini

true | false

規定開關是小尺寸還是常規尺寸

data-role

none

防止 jQuery Mobile 把撥動開關渲染成按鈕樣式

data-theme

字母 (a-z)

規定撥動開關的主題顏色

data-track-theme

字母 (a-z)

規定軌道的主題顏色

尾部欄

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

Data-屬性

值

描述

data-id

sometext

規定唯一 ID。對于持續的尾部欄是必需的

data-position

inline | fixed

規定尾部欄是與頁面內容內聯還是保持固定在底部

data-fullscreen

true | false

規定尾部欄是固定在底部還是覆蓋在頁面內容上(查看范圍更大)

data-theme

字母 (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

字母 (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 頁面切換章節。

data-position-to

origin | jQuery selector | window

規定彈出框的位置。Origin - 默認。定位彈窗在打開它的鏈接上。jQuery selector - 定位彈窗在指定元素上。Window - 定位彈窗在窗口屏幕的中央。

列表

帶有 data-role="listview" 的

或

• 。

Data-屬性

值

描述

data-autodividers

true | false

規定是否自動劃分列表項

data-count-theme

字母 (a-z)

規定計數氣泡的主題顏色。

data-divider-theme

字母 (a-z)

規定列表分隔的主題顏色。

data-filter

true | false

規定是否在列表中添加搜索框

data-filter-placeholder

sometext

1.4 版本后廢棄。使用 HTML placeholder 屬性替代。規定搜索框內的文本。默認是 "Filter items..."

data-filter-theme

字母 (a-z)

規定搜索過濾的主題顏色。

data-icon

規定列表的圖標

data-inset

true | false

規定列表是否渲染成圓角且帶外邊距

data-split-icon

規定分割按鈕的圖表。默認是 "arrow-r"

data-split-theme

字母 (a-z)

規定分割按鈕的主題顏色。

data-theme

字母 (a-z)

規定列表的主題顏色

列表項

帶有 data-role="listview" 的

或

• 內的
• 。

  Data-屬性

  值

  描述

  data-filtertext

  sometext

  規定當過濾元素時要搜索的文本。該文本將會被過濾，而不是實際的列表項文本

  data-icon

  規定列表項圖標

  data-role

  list-divider

  規定列表項的分隔

  data-theme

  字母 (a-z)

  規定列表項的主題顏色

  注意：data-icon 屬性只作用于帶有鏈接的列表項。

  導航欄

  帶有 data-role="navbar" 容器內部的

• 元素。

  Data-屬性

  值

  描述

  data-icon

  規定列表項的圖標

  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

  字母 (a-z)

  規定后退按鈕的主題顏色

  data-close-btn-text

  字母 (a-z)

  規定對話框上關閉按鈕的一些文本

  data-dom-cache

  true | false

  規定是否清除各個頁面的 jQuery DOM 緩存(如果設置為 true，您必須自己管理 DOM 并在所有移動設備上進行測試)

  data-overlay-theme

  字母 (a-z)

  規定對話框頁面的蒙版(背景)顏色

  data-theme

  字母 (a-z)

  規定頁面的主題顏色。

  data-title

  sometext

  規定頁面標題

  data-url

  url

  更新 URL 的值，而不是用于請求頁面的 URL

  彈窗

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

  Data-屬性

  值

  描述

  data-corners

  true | false

  規定彈窗是否圓角

  data-overlay-theme

  字母 (a-z)

  規定彈出框的蒙版(背景)顏色。默認是透明背景(無)

  data-shadow

  true | false

  規定彈出框是否有陰影

  data-theme

  字母 (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 頁面切換章節。

  單選按鈕

  帶有 type="radio" 的成雙成對的 label 和 input。它們會被自動渲染程按鈕樣式，data-role 不是必需的。

  Data-屬性

  值

  描述

  data-mini

  true | false

  規定按鈕是小尺寸還是常規尺寸

  data-role

  none

  防止 jQuery Mobile 渲染單選按鈕的樣式為增強狀態的按鈕，使元素以 HTML 原生的狀態顯示

  data-theme

  字母 (a-z)

  規定單選按鈕的主題顏色

  如需組合多個單選按鈕，請使用帶有 data-role="controlgroup" 屬性和 data-type="horizontal|vertical" 的容器來規定是否水平或垂直組合單選按鈕。

  選擇

  所有的 元素。這些會被自動渲染成按鈕樣式，date-role 是不必需的。

  Data-屬性

  值

  描述

  data-icon

  規定 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

  字母 (a-z)

  規定 jQuery 自帶的自定義的選擇菜單的主題顏色(與 data-native-menu="false" 一起使用)

  data-placeholder

  true | false

  可在一個非原生的選擇菜單的 元素上設置

  data-role

  none

  防止 jQuery Mobile 把 select 元素渲染成按鈕樣式

  data-theme

  字母 (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

  字母 (a-z)

  規定滑動塊控件(輸入框、手柄和軌道)的主題顏色

  data-track-theme

  字母 (a-z)

  規定滑動塊軌道的主題顏色

  文本輸入框 & 文本輸入域

  帶有 type="text|search|etc." 的 input 或 textarea 元素。這些會被自動渲染成按鈕樣式，date-role 是不必需的。

  Data-屬性

  值

  描述

  data-mini

  true | false

  規定輸入框是小尺寸還是常規尺寸

  data-role

  none

  防止 jQuery Mobile 把輸入框/輸入域渲染成按鈕樣式

  data-theme

  字母 (a-z)

  規定輸入字段的主題顏色

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的jquery html data属性,jQuery Mobile Data 属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。