<!doctype html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width,inital-scale=1">
<title>18.1jqueryMoblie HelloWorld</title>
<!--引入jqueryMobile样式-->
<link rel="stylesheet" type="text/css" href="jquerymobile/jquery.mobile-1.4.5.css">
<script src="jquerymobile/jquery-2.1.4.min.js"></script>
<script src="jquerymobile/jquery.mobile-1.4.5.min.js"></script>
</head>
<!--
data-role="page"是在浏览器中显示的页面
data-role="header"是在页面顶部创建的工具条
data-role="footer"是在页面底部创建的工具条
-->
<body>
<div data-role="page" id="one">
<div data-role="header" data-position="fixed">
<h1>欢迎来到我的主页</h1>
</div>
<div data-role="content">
<!--
data-inset="true" 列表样式的圆角和边缘
data-role="list-divider"指定列表分割
-->
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">服装</li>
<li>
<a href="#two">第一页 男装</a>
</li>
<li>
<a href="#three">第三页 女装</a>
</li>
<li data-role="list-divider">电子产品</li>
<li>
<a href="#three">第四页 手机</a>
</li>
<li>
<a href="#three">第五页 电脑</a>
</li>
</ul>
</div>
<div data-role="footer" data-position="fixed" data-theme="a">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="home">首页</a></li>
<li><a href="#" data-icon="info">新闻</a></li>
<li><a href="#" data-icon="gear">设置</a></li>
<li><a href="#" data-icon="star">我的</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="two">
<div data-role="header" data-position="fixed">
<h1>第2个页</h1>
<a href="#one">首页</a>
</div>
<div data-role="content">
<ul data-role="listview" data-autodividers=''true>
<li>
<a href="#three">adda</a>
</li>
<li>
<a href="#three">audi</a>
</li>
<li>
<a href="#three">bbb</a>
</li>
<li>
<a href="#three">bcd</a>
</li>
<li>
<a href="#three">ddd</a>
</li>
<li>
<a href="#three">ggg</a>
</li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h1>页面底部</h1>
</div>
</div>
<div data-role="page" id="three">
<div data-role="header" data-position="fixed">
<h1>第3个页</h1>
<a href="#one">首页</a>
</div>
<div data-role="main" class="ui-content">
</div>
<div data-role="footer" data-position="fixed">
<h1>页面底部</h1>
</div>
</div>
</body>
</html>
