转自：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. linux三尖刀

    序 我们都知道,一个可执行程序的基本的生命过程是如此的: (编辑)源文件--->(编译)目标文件--->(链接)可执行文件--->(调试排错)稳定执行 所以,在这个过程中,我们很容易 ...

  2. Spring 调度任务@scheduled学习总结

    官网Api:http://docs.spring.io/spring/docs/current/spring-framework-reference/html/scheduling.html#sche ...

  3. iOS UI-静态单元格与动态单元格

  4. J2EE课程设计——企业人力资源管理系统

    一.项目名称:企业人力资源管理系统 小组成员:冯雨倩 汤杰 二.项目需求: 随着现在计算机技术的不断完善,以及现代经济的不断发展,传统的管理技术不再满足企业的需要,越来越多的企业注重计算机信息管理系统 ...

  5. 【LeetCode 36_哈希表】Valid Sudoku

    //occupyed_1检查行是否占用 //occupyed_2检查列是否占用 //occupyed_3检查块是否占用 bool isValidSudoku(vector<vector<c ...

  6. show()是非模式窗体. showDialog()是模式窗体.

    show()仅仅是显示出来窗口界面而已```也就是和你执行的结果在同一窗口显示```所显示的窗口可以在后台运行```而showDialog()是一个对话框窗口界面```执行结果以新窗口界面出现```不 ...

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

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

  8. 用Navicat复制数据库到本地（导入.sql文件运行）

    今天装数据库的机子没开,项目运行不了,于是还是决定在自己电脑上装数据库,由于新学数据库操作,记录一下 一.转储sql文件 右键点击数据库,转储sql文件,点击结构和数据 存放在本地,开始转储 转储完成 ...

  9. streamsets excel 数据处理

    streamsets 有一个directory的origin 可以方便的进行文件的处理,支持的格式也比较多,使用简单 pipeline flow 配置 excel 数据copy 因为使用的是容器,会有 ...

  10. hasura graphql server (haskell)构建

    安装 &&运行pg(docker) version: '3.6' services: postgres: image: postgres environment: - "PO ...