2、jQueryMobile按钮的基本样式
本帖最后由 Sian 于 2016-2-15 17:43 编辑<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- data-role="page"代表的是一个页面，当前页面只会显示该div内的内容 -->
<div data-role="page">
<!-- data-role="header"表示的是表头信息，jQuery会自动加载相关样式 -->
<div data-role="header"><h1>页头信息</h1></div>
<!-- data-role="content"表示的是内容信息，jQuery会自动加载相关样式 -->
<div data-role="content">
<p>
<!-- data-icon="arrow-u"为jQuery内置的图标名称 -->
<a href="#" data-inline="true" data-role="button" data-icon="arrow-u">上</a>
<a href="#" data-inline="true" data-role="button" data-icon="arrow-d">下</a>
<a href="#" data-inline="true" data-role="button" data-icon="arrow-l">左</a>
<a href="#" data-inline="true" data-role="button" data-icon="arrow-r">右</a>
</p>
<p>
<!-- data-iconpos为jQuery内置的图标位置 -->
<a href="#" data-inline="true" data-role="button" data-icon="arrow-u" data-iconpos="top">上</a>
<a href="#" data-inline="true" data-role="button" data-icon="arrow-d" data-iconpos="bottom">下</a>
<a href="#" data-inline="true" data-role="button" data-icon="arrow-l" data-iconpos="left">左</a>
<a href="#" data-inline="true" data-role="button" data-icon="arrow-r" data-iconpos="right">右</a>
</p>
<p>
<!-- data-iconpos值为notext时即隐藏按钮文字 -->
<a href="#" data-inline="true" data-role="button" data-icon="home" data-iconpos="notext">主页</a>
<a href="#" data-inline="true" data-role="button" data-icon="search" data-iconpos="notext">搜索</a>
<a href="#" data-inline="true" data-role="button" data-icon="info" data-iconpos="notext">消息</a>
</p>
</div>
<!-- data-role="footer"表示的是页脚底部信息，jQuery会自动加载相关样式 -->
<div data-role="footer"><h4>页脚注释</h4></div>
</div>
</body>
</html>
页:
[1]