jquery中的data-icon和data-role

转自：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>