jQuery Mobile 实例：构建响应式移动网页的实践指南
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile 实例</title>
<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>
<div data-role="page" id="home">
<div data-role="header">
<h1>首页</h1>
</div>
<div data-role="content">
<p>这是首页的内容。</p>
<a href="#about" data-role="button" data-inline="true" data-theme="b">查看关于</a>
</div>
<div data-role="footer">
<h4>页脚信息</h4>
</div>
</div>
<div data-role="page" id="about">
<div data-role="header">
<h1>关于</h1>
</div>
<div data-role="content">
<p>这是关于页的内容。</p>
<a href="#home" data-role="button" data-inline="true" data-theme="b">返回首页</a>
</div>
<div data-role="footer">
<h4>页脚信息</h4>
</div>
</div>
</body>
</html>这个代码实例展示了如何使用jQuery Mobile创建一个包含两个页面的简单移动网站。每个页面都有头部、内容区域和尾部。通过使用data-role="page"定义页面，使用data-role="header"、data-role="content"和data-role="footer"定义各个区域。链接被用来在页面间导航，通过href属性指定目的页面的ID。
评论已关闭