转自：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. HDU 4522 (恶心建图)

    湫湫系列故事——过年回家 Time Limit: 500/200 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Total ...

  2. angularJs---route

    route route---‘路由’ ajax的弊端: 1.ajax请求不会留下history记录 2.用户无法直接通过url进入应用中的指定页面(保存书签,分享朋友?) 3.ajax不利于SEO 前 ...

  3. ossim中Spot5模型bug修复

    ossim中Spot5模型在读取像素视线角时存在一个严重的bug,导致某些点的视线角提取错误. 下面是ossim中getPixelLookAngleX 函数的代码: ossimSpotDimapSup ...

  4. JavaScript基本概要

    body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...

  5. 自定义控件---loadingView

    自定义加载框,效果如图: 这个loadingView可以在图片下添加文案(加载中...),还可以自定义动画效果,自定义布局文件,屏蔽用户操作,点击返回键后隐藏. 库类中包含了一个LoadingDial ...

  6. Loj 114 k大异或和

    Loj 114 k大异或和 构造线性基时有所变化.试图构造一个线性基,使得从高到低位走,异或上一个非 \(0\) 的数,总能变大. 构造时让任意两个 \(bas\) 上有值的 \(i,j\) ,满足 ...

  7. BZOJ5125: [Lydsy1712月赛]小Q的书架【决策单调性优化DP】【BIT】【莫队】【分治】

    小Q有n本书,每本书有一个独一无二的编号,现在它们正零乱地在地上排成了一排. 小Q希望把这一排书分成恰好k段,使得每段至少有一本书,然后把每段按照现在的顺序依次放到k层书架的每一层上去.将所有书都放到 ...

  8. WPF 多线程 UI：设计一个异步加载 UI 的容器

    对于 WPF 程序,如果你有某一个 UI 控件非常复杂,很有可能会卡住主 UI,给用户软件很卡的感受.但如果此时能有一个加载动画,那么就不会感受到那么卡顿了.UI 的卡住不同于 IO 操作或者密集的 ...

  9. Python + Djang+ Visual Studio Code（VSCode）

    使用 Visual Studio Code(VSCode)搭建简单的 Python + Django 开发环境 https://www.cnblogs.com/Dy1an/p/10130518.htm ...

  10. MacBook下配置android adb命令使用环境

    想在Mac下使用android adb命令,常用的两种配置方式: 在MacBook下配置adb命令环境(方法一) 1.下载并安装IDE (android studio) 人性化的安装,直接点击下一步下 ...