4、jQueryMobile基本使用Listview(二)
本帖最后由 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">
<ul data-role="listview">
<li>
<!-- 固定搭配img、h2、p这三个标签-->
<a href="#">
<!-- 图片尺寸大于80x80才能填充完整 -->
<img src="http://www.yusian.com/download/sian.png"/>
<h2>标题</h2>
<p>详细内容</p>
</a>
</li>
</ul>
<h2>我的邮件</h2>
<ul data-role="listview">
<!-- class为ui-li-cout的样式可以生成计数的效果 -->
<li><a href="#">收件箱<span class="ui-li-count">35</span></a></li>
<li><a href="#">发件箱<span class="ui-li-count">42</span></a></li>
<li><a href="#">垃圾篓<span class="ui-li-count">0</span></a></li>
</ul>
</div>
<!-- data-role="footer"表示的是页脚底部信息，jQuery会自动加载相关样式 -->
<div data-role="footer"><h4>页脚注释</h4></div>
</div>
</body>
</html>
页:
[1]