論壇 | 最新的Web開發教程
 

jQuery Mobile數據屬性


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-inlinetrue | false 指定按鈕是否應為內聯與否
data-minitrue | false 指定按鈕是否應該是小的或常規尺寸的
data-shadow true | false 指定按鈕是否應該有陰影或不
data-theme letter (a-z) 指定按鈕的主題顏色

將多個按鈕,請使用帶容器data-role="controlgroup"連同屬性data-type="horizontal|vertical"應否組按鈕水平或垂直指定。


複選框

與標籤和輸入的雙type="checkbox"

數據屬性 描述
data-minitrue | false 指定複選框是否應為小型或規模
data-rolenone 防止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-minitrue | 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-minitrue | 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-minitrue | false 指定組是否應為小型或規模
data-theme letter (a-z) 指定controlgroup的主題色
data-typehorizontal | vertical 指定是否應該將該組水平或垂直顯示

對話

與容器data-dialog="true"

數據屬性 描述
data-close-btn left | right | none 指定關閉按鈕的位置
data-close-btn-text sometext 指定關閉按鈕文本
data-corners true | false  指定對話框是否應該圓角或不
data-dom-cachetrue | 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-fullscreentrue | 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-minitrue | false 指定交換機是否應該是小的或常規尺寸的
data-on-text sometext 指定“的”翻轉開關上的文本(默認為"On"
data-off-text sometext 指定翻轉開關“關”文本(默認為"Off"

頁腳

與容器data-role="footer"

數據屬性 描述
data-id sometext 指定一個唯一的ID。 需要持續頁腳
data-position inline | fixed 指定頁腳是否應與頁面內容是inline或仍位於底部
data-fullscreentrue | false 指定是否頁腳應始終被放置在底部,並通過網頁內容(略透視)或不
data-theme letter (a-z) 指定頁腳的主題色

注意:要啟用全屏位置,使用data-position="fixed" ,然後添加data-fullscreen屬性的元素。


與容器data-role="header"

數據屬性 描述
data-id sometext 指定一個唯一的ID。 需要持續的頭
data-position inline | fixed 指定標題是否應與網頁內容是內聯或保持定位在頂部
data-fullscreentrue | false 指定標頭是否應始終被放置在頂部和在頁面內容(略透視)或不
data-theme letter (a-z) 指定標題的主題色

注意:要啟用全屏位置,使用data-position="fixed" ,然後添加data-fullscreen屬性的元素。


輸入

與輸入type="text|search|etc."textarea elements

數據屬性 描述
data-clear-btntrue | false 指定輸入是否應該有一個"clear"按鈕
data-clear-btn-text text 指定“清除”按鈕的文本。 默認值是"clear text"
data-minitrue | false 指定輸入是否應該是小的或常規尺寸的
data-rolenone 防止jQuery Mobile的樣式輸入/文字區域,按鈕
data-theme letter (a-z)  指定輸入字段的主題色

鏈接

所有鏈接。

數據屬性 描述
data-ajax true | false 指定是否加載通過AJAX用於改善用戶體驗和轉換頁面。 如果設置為false,jQuery Mobile的會做一個正常的頁面請求。
data-directionreverse 反向過渡動畫(僅適用於網頁或對話框)
data-dom-cachetrue | false 指定是否清除jQuery的DOM緩存或不是單個頁面(如果設置為true,你需要照顧好自己和徹底的測試管理DOM上的所有移動設備)
data-prefetchtrue | false 指定是否當用戶訪問這些頁面預取到DOM,讓他們可用
data-relback | 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-autodividerstrue | false 指定是否自動將列表中的項目或不
data-count-theme letter (a-z) 指定計數泡沫的主題色
data-divider-theme letter (a-z) 指定列表分頻器的主題色
data-filtertrue | false 指定是否添加一個搜索框列表或不
data-filter-placeholder sometext 不推薦使用1.4版本。 使用HTML佔位符代替屬性,指定搜索框內的文字。 默認值是“過濾器項目......”
data-filter-theme letter (a-z) 指定搜索過濾器的主題色
data-icon Icons Reference 指定列表的圖標
data-insettrue | 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-rolelist-divider 指定列表項的分隔
data-theme letter (a-z)  指定列表項的主題色

注:數據圖標屬性上的鏈接列表項唯一的工作。


導航欄

<li>的容器中的元素與data-role="navbar"

數據屬性 描述
data-icon Icons Reference 指定列表項目的圖標
data-iconposleft | right | top | bottom | notext 指定圖標的位置

Navbars繼承父容器的主題樣本。 這是不可能的數據主題屬性設置為導航欄。 數據-theme屬性可以單獨設置為導航欄裡面的每一個環節。


與容器data-role="page"

數據屬性 描述
data-dom-cachetrue | false 指定是否清除jQuery的DOM緩存或不是單個頁面(如果設置為true,你需要照顧好自己和徹底的測試管理DOM上的所有移動設備)
data-overlay-theme letter (a-z)  指定對話框頁面的疊加(背景)顏色
data-theme letter (a-z)  指定頁面的主題顏色
data-title sometext 指定頁面標題
data-urlurl 用於更新的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-tolerance30, 15, 30, 15 指定從窗口的邊緣的距離( top, right, bottom, left

有固定data-rel="popup"

數據屬性 描述
data-position-to origin | jQuery selector | window 指定的彈出框的位置。 原產地 - 默認。 在位置打開該鏈接彈出。 jQuery選擇 - 定位在指定的元素彈出。 窗口 - 定位窗口屏幕中央彈出。
data-relpopup 對於打開彈出框
data-transitionfade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none 指定如何轉型從一個頁面到下一個。 看到我們的jQuery Mobile的過渡章。

單選按鈕

與標籤和輸入的雙type="radio"

數據屬性 描述
data-minitrue | false 指定按鈕是否應該是小的或常規尺寸的
data-rolenone 防止jQuery Mobile的樣式radiobuttons增強的按鈕
data-theme letter (a-z) 指定單選按鈕的主題顏色

到組多個無線電按鈕,使用data-role="controlgroup"連同data-type="horizontal|vertical"水平或垂直指定是否組中的按鈕。


選擇

所有<select>元素。

數據屬性 描述
data-icon Icons Reference 指定選擇元素的圖標。 默認為"arrow-d"
data-iconposleft | right | top | bottom | notext 指定圖標的位置
data-inlinetrue | false 指定選擇元素是否應為內聯與否
data-minitrue | false 指定是否選擇應該是小型或規模
data-native-menu true | false 如果設置為false,它使用jQuery的自己的自定義選擇菜單(如果你想選擇菜單來顯示所有移動設備相同的建議)
data-overlay-theme letter (a-z) 指定jQuery的自定義選擇菜單的主題顏色(與一起使用data-native-menu="false"
data-placeholdertrue | false 可以是一個上設置<option>的非本地選擇元素
data-rolenone 防止jQuery Mobile的樣式選擇元素按鈕
data-theme letter (a-z) 指定選擇元素的主題色

將多個選擇元素,使用data-role="controlgroup"連同data-type="horizontal|vertical"水平或垂直指定是否組的元素。


滑塊

與輸入type="range"

數據屬性 描述
data-highlighttrue | false 指定滑塊軌道是否應當強調或不
data-minitrue | false 指定滑塊是否應該是小的或常規尺寸的
data-rolenone 防止jQuery Mobile的樣式滑塊控件按鈕
data-theme letter (a-z) 指定滑塊控件的主題顏色(輸入,處理和跟踪)
data-track-theme letter (a-z) 指定滑塊軌道的主題色