jQuery Mobile 页面
使用 jQuery Mobile 入门
提示：尽管 jQuery Mobile 适用于所有移动设备，它在台式计算机上仍然可能存在兼容性问题（由于有限的 CSS3 支持）。
因此在本教程中，我们推荐您使用谷歌的 Chrome 浏览器，以获得最好的阅读体验。
实例
<!DOCTYPE html><html><head><link rel="stylesheet" href="https://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" /><script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script src="https://libs.baidu.com/jquerymobile/1.3.0/jquery.mobile-1.3.0.min.js"></script></head><body><div data-role="page"><div data-role="header"><h1>欢迎访问我的主页</h1></div><div data-role="content"><p>我是一名移动开发者！</p></div><div data-role="footer"><h1>页脚文本</h1></div></div></body></html>
例子解释：
- data-role="page" 是显示在浏览器中的页面
- data-role="header" 创建页面上方的工具栏（常用于标题和搜索按钮）
- data-role="content" 定义页面的内容，比如文本、图像、表单和按钮，等等。
- data-role="footer" 创建页面底部的工具栏。
在这些容器中，您可以添加任意 HTML 元素 - 段落、图像、标题、列表等等。
提示：HTML5 data-* 属性用于通过 jQuery Mobile 为移动设备创建 "对触屏友好的" 交互外观。
在 jQuery Mobile 中添加页面
在 jQuery Mobile，您可以在单一 HTML 文件中创建多个页面。
请通过唯一的 id 来分隔每张页面，并使用 href 属性来连接彼此：
实例
<div data-role="page" id="pageone"><div data-role="content"><a href="#pagetwo">转到页面二</a></div></div><div data-role="page" id="pagetwo"><div data-role="content"><a href="#pageone">转到页面一</a></div></div>
注释：包含大量内容的 web 应用程序会影响加载时间（比如文本、链接、图像和脚本等等）。如果您不希望在内部链接页面，请使用外部文件：
<a href="externalfile.html">转到外部页面</a>
将页面用作对话框
对话框是用来显示信息或请求输入的视窗类型。
如需在用户点击（轻触）链接时创建一个对话框，请向该链接添加 data-rel="dialog"：
实例
<div data-role="page" id="pageone"><div data-role="content"><a href="#pagetwo" data-rel="dialog">转到页面二</a></div></div><div data-role="page" id="pagetwo"><div data-role="content"><a href="#pageone">转到页面一</a></div></div>