转自：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>
|