转自：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. HTML字符转码

    以下是HTML特殊字符的编码表: 标记 编码 实际名称 ™ ™ € € Space   ! ! " " " # # $ $ % % & & & ' ...

  2. ORACLE导入导出工具的使用

    ORACLE导出工具exp的使用:  1.将数据库TEST(远程的数据库必须为连接标志符)完全导出,用户名system,密码manager,导出到D:\daochu.dmp中:       exp s ...

  3. [转载]LeetCode: Gray Code

    The gray code is a binary numeral system where two successive values differ in only one bit. Given a ...

  4. access_token和微信服务地址的获取

    access_token的获取: //获取微信服务器地址:

  5. 【转】socket 通信简介

    转自:http://blog.csdn.net/xiaoweige207/article/details/6211577/ “一切皆Socket!” 话虽些许夸张,但是事实也是,现在的网络编程几乎都是 ...

  6. 20181009-8 选题 Scrum立会报告+燃尽图 07

    Scrum立会报告+燃尽图(07)选题 此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2197 一.小组介绍 组长:刘莹莹 ...

  7. Git 学习之 Git Basics

    最近在用git,但git学习曲线实在是有点高. 好在找到一个文档 https://www.atlassian.com/git/tutorial/,以下就是学习笔记吧! git init git ini ...

  8. （转）Web系统大规模并发——电商秒杀与抢购

    电商的秒杀和抢购,对我们来说,都不是一个陌生的东西.然而,从技术的角度来说,这对于Web系统是一个巨大的考验.当一个Web系统,在一秒钟内收到数以万计甚至更多请求时,系统的优化和稳定至关重要.这次我们 ...

  9. Linux运维学习笔记-目录知识点总结

    目录知识点总结: Note: 1.创建一个/server/scripts目录,用于存放脚本(命令:mkdir -p /server/scripts) 2.安装软件时,安装路径统一为/usr/local ...

  10. C#典型案例及分析

    1.简单工厂计算器