jQuery Mobile數據屬性

Jquery mobile框架使用html5的 data- 屬性來使初始化標記和配置組件。這些屬性所有都是可選的，而且支持手動調用插件。爲了不命名上的和與其餘也使用html5的 data- 屬性插件與框架的衝突,能夠使用全局設置來自定義命名空間。

按鈕

經過 data-role="button" 來標記按鈕。基於連接的按鈕和表單的button元素會被自動渲染，無需data-role屬性。

data-corners  true | false

data-icon  home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search

data-iconpos  left | right | top | bottom | notext

data-iconshadow  true | false

data-inline  true | false

data-shadow  true | false

data-theme  swatch letter (a-z)

多個按鈕按鈕的狀況下，能夠給這些按鈕的容器添加data-role="controlgroup"屬性，使這些按鈕成爲垂直的按鈕組。給按鈕添加data-type="horizontal" 屬性能夠使按鈕水平並排排列。

複選框

經過type="checkbox"標記的input元素會自動加強，無需data-role屬性。

data-role  none (防止自動加強)

data-theme  a-z

可摺疊區域

一個標題元素和一個用data-role="collapsible"屬標記的容器。

data-collapsed  true | false

data-content-theme  a-z

data-theme  a-z

手風琴組

一個標題元素和一個用data-role="collapsible-set"屬標記的容器。

data-content-theme

data-theme

對話框

用data-role="page"屬性標記的容器或者經過data-rel="dialog"標記的連接所指向的容器

data-close-btn-text  string(對話框關閉按鈕的文字)

data-dom-cache  true | false

data-id  字符串 (頁面的ID)

data-fullscreen  true | false (used in conjunction with fixed toolbars)

data-overlay-theme  a-z

data-theme  a-z

data-title  string(此頁面顯示的時候的標題)

頁面內容

用data-role="content"屬性標記的容器

data-theme  a-z

filed container

data-role   filedcontain

開關

用data-role="slider"屬性標記的列表菜單，只能有兩個option.

data-role  無 (防止自動加強l)

data-theme

data-track-theme

footer

用data-role="footer"屬性標記的容器

data-id  字符串 (unique id, useful in persistent footers)

data-position  fixed

data-theme  a-z

Header

用data-role="header"屬性標記的容器

data-add-back-btn  true | false (只會在header自動添加後退按鈕)

data-back-btn-text  字符串

data-back-btn-theme

data-position  fixed

data-theme

data-title

連接

連接,包括用data-role="button"屬性標記的連接，和表單中的

data-ajax  true | false

data-direction  reverse (翻轉頁面轉場效果)

data-dom-cache   true | false

data-prefetch  true | false

data-rel  back (後退到上一個歷史的記錄的頁面)
dialog (打開對話框，不記錄進歷史記錄中)
external (for linking to another domain)

data-transition  slide | slideup | slidedown | pop | fade | flip

列表

用data-role="listview"屬性標記的ol或ul

data-count-theme

data-dividertheme

data-filter  true | false

data-filter-placeholder

data-filter-theme

data-inset  true | false

data-split-icon  home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search

data-theme  

列表項

data-icon  home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search

data-role  list-divider

data-theme

頁面

用data-role="page"屬性標記的容器

data-close-btn-text

data-dom-cache

data-id

data-fullscreen

data-overlay-theme

data-theme

data-title

單選按鈕

用data-role="header"屬性標記的容器

data-role  none (防止自動加強)

data-theme

列表菜單

select的列表菜單會被自動加強，無需data-role屬性。

data-icon  home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search

data-iconpos

data-inline

data-native-menu  true | false

data-overlay-theme

data-placeholder  true | false - 加到option上

data-role

data-theme

劃杆

type="range"屬性標記的input元素會被自動加強，無需data-role屬性

data-role

data-theme

data-track-theme

文本框和文本域

type="text|number|search|等."類型的文本框或者文本域會自動加強，無需data-role屬性

data-role

data-theme