轉自：https://blog.csdn.net/Sayesan/article/details/83378524
jquery中的data-icon和data-role
data-role參數表：
page 頁面容器，其內部的mobile元素將會繼承這個容器上所設置的屬性
header 頁面標題容器，這個容器內部可以包含文字、返回按鈕、功能按鈕等元素
footer 頁面頁腳容器，這個容器內部也可以包含文字、返回按鈕、功能按鈕等元素
content 頁面內容容器，這是一個很寬容的容器，內部可以包含標准的html元素和jQueryMobile元素
controlgroup 將幾個元素設置成一組，一般是幾個相同的元素類型
fieldcontain 區域包裹容器，用增加邊距和分割線的方式將容器內的元素和容器外的元素明顯分隔
navbar 功能導航容器，通俗的講就是工具條
listview 列表展示容器，類似手機中聯系人列表的展示方式
list-divider 列表展示容器的表頭，用來展示一組列表的標題，內部不可包含鏈接
button 按鈕，將鏈接和普通按鈕的樣式設置成為jQueryMobile的風格
none 阻止框架對元素進行渲染，使元素以html原生的狀態顯示，主要用於form元素。
data-transition參數表：
slide 從右側向左滑入頁面
slideup 從底部向上滑入
slidedown 從上向下滑入
pop 從中心漸顯展開
fade 漸顯
flip 翻轉
data-icon參數表：
arrow-l 左箭頭圖標
arrow-r 右箭頭圖標
arrow-u 上箭頭圖標
arrow-d 下箭頭圖標
plus 加號圖標
minus 減號圖標
delete 刪除圖標
check 檢查圖標
home 首頁圖標
info 信息圖標
back 后退圖標
forward 向前圖標
refresh 刷新圖標
grid 網格圖標
gear 齒輪圖標
search 搜索圖標
star 星形圖標
alert 提醒圖標
|
2
4
6
8
10
12
14
16
18
20
22
24
26
28
30
32
34
36
38
40
42
44
46
48
50
52
54
56
58
60
62
64
66
68
70
|
<!DOCTYPE html>
<
html
>
<
head
>
<
link
rel
=
"stylesheet"
href
=
"http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"
>
<
script
src
=
"http://code.jquery.com/jquery-1.8.3.min.js"
></
script
>
<
script
src
=
"http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"
></
script
>
</
head
>
<
body
>
<
div
data-role
=
"page"
id
=
"pageone"
>
<
div
data-role
=
"content"
>
<
a
href
=
"#"
data-role
=
"button"
data-icon
=
"arrow-l"
>左箭頭圖標</
a
>
<
a
href
=
"#"
data-role
=
"button"
data-icon
=
"arrow-r"
>右箭頭圖標</
a
>
<
a
href
=
"#"
data-role
=
"button"
data-icon
=
"arrow-u"
>上箭頭圖標</
a
>
<
a
href
=
"#"
data-role
=
"button"
data-icon
=
"arrow-d"
>下箭頭圖標</
a
>
<
a
href
=
"#"
data-role
=
"button"
data-icon
=
"plus"
>加號圖標</
a
>
<
a
href
=
"#"
data-role
=
"button"
data-icon
=
"minus"
>減號圖標</
a
>
<
a
href
=
"#"
data-role
=
"button"
data-icon
=
"delete"
>刪除圖標</
a
>
<
a
href
=
"#"
data-role
=
"button"
data-icon
=
"check"
>檢查圖標</
a
>
<
a
href
=
"#"
data-role
=
"button"
data-icon
=
"home"
>首頁圖標</
a
>
<
a
href
=
"#"
data-role
=
"button"
data-icon
=
"info"
>信息圖標</
a
>
<
a
href
=
"#"
data-role
=
"button"
data-icon
=
"back"
>后退圖標</
a
>
<
a
href
=
"#"
data-role
=
"button"
data-icon
=
"forward"
>向前圖標</
a
>
<
a
href
=
"#"
data-role
=
"button"
data-icon
=
"refresh"
>刷新圖標</
a
>
<
a
href
=
"#"
data-role
=
"button"
data-icon
=
"grid"
>網格圖標</
a
>
<
a
href
=
"#"
data-role
=
"button"
data-icon
=
"gear"
>齒輪圖標</
a
>
<
a
href
=
"#"
data-role
=
"button"
data-icon
=
"search"
>搜索圖標</
a
>
<
a
href
=
"#"
data-role
=
"button"
data-icon
=
"star"
>星形圖標</
a
>
<
a
href
=
"#"
data-role
=
"button"
data-icon
=
"alert"
>提醒圖標</
a
>
</
div
>
</
div
>
</
body
>
</
html
>
|