转自：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    提醒图标

XML/HTML code

 

?

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>

 

jquery中的data-icon和data-role的更多相关文章

  1. jQuery中attr()、prop()、data()用法及区别

    .attr(),此方法从jq1.0开始一直存在,官方文档写的作用是读/写DOM的attribute值,其实1.6之前有时候是attribute,有时候又是property..prop(),此方法jq1 ...

  2. jquery中attr、prop、data

    在高版本的jquery中获取标签的属性,可以使用attr().prop().data(),那么这些方法有什么区别呢? 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. 对于HTML元 ...

  3. jquery中prop，attr，data的区别

    这两天翻了jq的源码,今天看到了jq关于数据存储的几个方法,遂总结一下,和小伙伴没分享一下,哪里说的不对,还望批评指正~~~ 废话不多说,直接上代码: $(function(){ $('#div1') ...

  4. jQuery中使用data()方法读取HTML5自定义属性data-*实例

    如果你使用jQuery类库,那么你可以非常愉悦的使用jquery的data()方法存取data-* 自定义属性,方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险 主要的方法如 ...

  5. 深入jQuery中的data()

    引入 data函数在jQuery中看起来很不起眼, 就像沙滩上一颗平凡的沙子, 但仔细一瞅, 却惊讶的发现data是jQuery中无比重要的一环, 甚至jQuery中各种事件都基于此. data有什么 ...

  6. jQuery中data()方法用法实例

    语法结构一: 复制代码代码如下: $(selector).data(name,value) 参数列表: 参数 描述 name 存储的数据名称. value 将要存储的任意数据. 实例代码: 复制代码代 ...

  7. jQuery 中 data 方法的实现原理

    前言:jQuery 作为前端使用最多最广泛的 JS 库,其源码每个 JSer 都应该研究一下.早就打算看却一直被各种事拖着,上次某公司面试时被问到 jQuery 中 data 方法是如何实现的,结果答 ...

  8. 关于Jquery中ajax方法data参数用法的总结

    data 发送到服务器的数据.将自动转换为请求字符串格式.GET 请求中将附加在 URL 后.查看 processData 选项说明以禁止此自动转换.必须为 Key/Value 格式.如果为数组,jQ ...

  9. 关于JQuery中$.data绑定数据原理或逻辑

    问题: JQuery中,对于.data([key],[value])函数,当使用其进行数据绑定时,假设要绑定的数据是“引用数据类型”,也就是对象:那么.data函数绑定的是该对象的副本还是该对象的一个 ...

  10. 总结Jquery中获取自定义属性使用.attr()和.data()以及.prop()的区别

    一..attr()和.data()的区别: .attr()和.data()本质上属于DOM属性和Jquery对象属性的区别. 看一个例子: <!DOCTYPE html> <html ...

随机推荐

  1. poj1087最大流拆点

    刚开始看这题太长了就放着,后来做了之后才发现并不难,就是构造图有点麻烦 一开始写了180行@.@结果tle了,后来想到用map直接访问的话可能会快点,就不用每次循环了 #include<map& ...

  2. cf812B 搜索

    B. Sagheer, the Hausmeister time limit per test 1 second memory limit per test 256 megabytes input s ...

  3. 最小生成树prim和kruskal模板

    prim: int cost[MAX_V][MAX_V]; //cost[u][v]表示边e=(u,v)的权值(不存在的情况下设为INF) int mincost[MAX_V]; //从集合X出发的每 ...

  4. nginx会话保持之sticky模块

    nginx会话保持之nginx-sticky-module模块 在使用负载均衡的时候会遇到会话保持的问题,常用的方法有:1.ip hash,根据客户端的IP,将请求分配到不同的服务器上:2.cooki ...

  5. 【Matplotlib】线设置，坐标显示范围

    改变线的颜色和线宽 参考文章: controlling line properties Line API 线有很多属性你可以设置:线宽,线型,抗锯齿等等:具体请参考matplotlib.lines.L ...

  6. PostgresException: 42883: function ifnull(integer, integer) does not exist

    原因在于PostGresql并没有自带IFNULL函数,可以用COALESCE来替代IFNULL,且COALESCE功能更强大,可以输入更多参数,顺序判断并返回第一个非null值. 例如: SELEC ...

  7. 实现react中的自动保存--定时任务

    1. 定义和用法 setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或 ...

  8. nginx 配置 getsimplecms 配置文件

    getsimplecms的安装需要两个php类库,一个是dom操作,一个是gd library. 所以先安装这两个类库,重启php解释器. yum install php-xml; yum insta ...

  9. leisure time

    终于把论文翻译完了,天哪,现在感觉解脱一般. 这些天看电视,玩游戏,也不止学了写什么,现在调整了下心情,重新确定下目标吧. 最近很想学Python和Qt,哎,技术永远都是学不完了,理解操作系统和组成原 ...

  10. BZOJ3211: 花神游历各国（线段树）

    3211: 花神游历各国 Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 5692  Solved: 2114[Submit][Status][Discu ...