<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- 第一页 -->
<div data-role="page" id="page1">
<div data-role="header">
<h1>jQuery Mobile 实例</h1>
</div>
<div data-role="content">
<p>欢迎来到 jQuery Mobile 实例页面！</p>
<!-- 按钮链接到第二页 -->
<a href="#page2" data-role="button" data-transition="slide">进入第二页</a>
<!-- 表单 -->
<form>
<label for="username">用户名:</label>
<input type="text" name="username" id="username" placeholder="请输入用户名">
<label for="password">密码:</label>
<input type="password" name="password" id="password" placeholder="请输入密码">
<button type="submit" data-theme="b">登录</button>
</form>
</div>
<div data-role="footer">
<h4>页脚文本</h4>
</div>
</div>
<!-- 第二页 -->
<div data-role="page" id="page2">
<div data-role="header">
<h1>第二页</h1>
</div>
<div data-role="content">
<p>这是第二页的内容。</p>
<!-- 返回按钮 -->
<a href="#page1" data-role="button" data-rel="back" data-transition="slide">返回第一页</a>
</div>
<div data-role="footer">
<h4>页脚文本</h4>
</div>
</div>
</body>
</html>
在这个例子中，有两个页面（#page1 和 #page2）。第一页包含一个简单的欢迎信息、一个按钮链接到第二页以及一个登录表单。第二页包含一些示例内容和一个返回按钮。这个实例演示了如何使用 jQuery Mobile 创建页面、按钮和表单，并进行页面之间的导航。你可以根据需求扩展和修改这个例子。
转载请注明出处：http://www.pingtaimeng.com/article/detail/14468/jQuery Mobile