jQuery Mobile 图标
2017-06-22 本文已影响39人
蝴蝶结199007
添加图标
在 <button> 或 <input> 或 <a> 元素中使用 data-icon 属性，添加 data-icon = * 属性
data-icon=* | 描述
-
| :-: | -:
data-icon="check" | 检查
data-icon="search" | 搜索
data-icon="arrow-l" | 左箭头
data-icon="arrow-r" | 右箭头
data-icon="arrow-u" | 上箭头
data-icon="arrow-d" | 下箭头
data-icon="plus" | 加
data-icon="minus" | 减
data-icon="delete" | 删除
data-icon="check"
data-icon="info" | 信息
data-icon="info"
data-icon="home" | 主页
data-icon="back" | 返回
data-icon="forward" | 向前
data-icon="refresh" | 刷新
data-icon="grid" | 网格
data-icon="gear" | 齿轮，设置
data-icon="gear"
data-icon="star" | 星星
data-icon="alert" | 提醒，警告
定位图标
data-iconpos : top | right | bottom | left
只显示图标
data-iconpos : notext
实践
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="Resource-type" content="Document"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>button</title>
<link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.4.5.min.js" type="text/javascript"></script>
<style>
.line{height:0;border-top:1px solid #2ad;margin:20px 0;}
</style>
</head>
<body>
<div data-role="page">
<a href="#" data-role="button" data-icon="search">查找</a>
<a href="#" data-role="button" data-icon="arrow-l">左箭头</a>
<a href="#" data-role="button" data-icon="arrow-r">右箭头</a>
<button data-icon="arrow-u">上箭头</button>
<button data-icon="arrow-d">下箭头</button>
<input type="button" value="加" data-icon="plus"/>
<input type="button" value="减" data-icon="minus"/>
<input type="button" value="删除" data-icon="delete"/>
<a href="#" data-role="button" data-icon="check">检查</a>
<a href="#" data-role="button" data-icon="info">信息</a>
<a href="#" data-role="button" data-icon="home">主页</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="star">星星</a>
<a href="#" data-role="button" data-icon="alert">提示</a>
<div class="line"></div>
<!--定位图标-->
<a href="#" data-role="button" data-icon="refresh" data-iconpos="top">定位top</a>
<a href="#" data-role="button" data-icon="grid" data-iconpos="right">定位right</a>
<a href="#" data-role="button" data-icon="gear" data-iconpos="bottom">定位bottom</a>
<a href="#" data-role="button" data-icon="star" data-iconpos="left">定位left</a>
<div class="line"></div>
<!--隐藏文件，只显示图标-->
<a href="#" data-role="button" data-icon="alert" data-iconpos="notext">隐藏文件，只显示图标</a>
</div>
</body>
</html>
