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