转自：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. poj3734矩阵快速幂

    挑战上面的题目,感觉脑洞很大 分别找红蓝个数全为偶,全为奇,一奇一偶的个数ai,bi,ci 转移矩阵是| 2 1 0 |,是一个对称矩阵(会不会有什么联系.) | 2 2 2 | | 0 1 2 | ...

  2. 卸载oracle11g步骤图解

    卸载oracle11g步骤图解       重启电脑即可

  3. rabbitmq 对多服务器p2p模式配置的一个测试

    一直对rabbitmq p2p 模式的多服务器下做相同配置的 各个服务器数据接受情况比较好奇 今天有空测试了下 xml 文件 <?xml version="1.0" enco ...

  4. javascript浅拷贝和深拷贝

    /* 浅拷贝 */ function extend(parent, child) { var i; child = child || {}; for (i in parent) { if (paren ...

  5. Ubuntu 16.04 日常工具

    shutter sudo apt-get install shutter indicator-sysmonitor 之前需要通过deb包安装,现在可以通过添加PPA安装: sudo add-apt-r ...

  6. 将app现有的icon转化成圆角icon

      选择圆角工具,设置半径120px   设置固定大小,然后在图片左上角开始拖动,勾勒出圆角,建立选取,自由变换,copy 选取,新建图层,删除背景,另存为,齐活   注:索引图片如何解锁: http ...

  7. STL标准库-容器-deque

    技术在于交流.沟通,本文为博主原创文章转载请注明出处并保持作品的完整性. deque双向开口可进可出的容器 我们知道连续内存的容器不能随意扩充,因为这样容易扩充别人那去 deque却可以,它创造了内存 ...

  8. Zabbix监控TCP status

    监控原理 ss -ant | awk 'NR>1 {++s[$1]} END {for(k in s) print k,s[k]}' LAST-ACK 5ESTAB 348FIN-WAIT-1 ...

  9. Yahoo! Finance财经数据PYTHON临时读取方法

    本篇文章转自简书:http://www.jianshu.com/p/85d563d326a9 这段时间在看量化策略,找到了一个比较不错的开源项目,但是yahoo金融的数据源一直没有找到,在网上找到了这 ...

  10. cratedb 集群搭建说明

    此为搭建说明,实际上搭建过es 集群的都是可以的,和es 基本一样 配置文件 crate.yaml 参考集群架构图 集群名称 cluster.name: my_cluster 每个node节点名称 如 ...