2019獨角獸企業重金招聘Python工程師標準>>>

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

轉載于:https://my.oschina.net/lensliao/blog/126263

總結

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

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