开始学习 jQuery Mobile

	尽管jQuery Mobile兼容所有的移动设备，但是并不能完全兼容PC机（由于有限的CSS3支持）。 为了更好的阅读本教程，建议您使用 Google Chrome 浏览器。

       
  
 
 
欢迎来到我的主页
 
 
 
我现在是一个移动端开发者!!
 
 
 
底部文本
 
 
  

实例解析：

• data-role="page" 是在浏览器中显示的页面。

• data-role="header" 是在页面顶部创建的工具条 (通常用于标题或者搜索按钮)

• data-role="main" 定义了页面的内容，比如文本， 图片，表单，按钮等。

• "ui-content" 类用于在页面添加内边距和外边距。

• data-role="footer" 用于创建页面底部工具条。

• 在这些容器中你可以添加任何 HTML 元素 - 段落, 图片, 标题, 列表等。

	jQuery Mobile 依赖 HTML5 data-* 属性来支持各种 UI 元素、过渡和页面结构。不支持它们的浏览器将以静默方式弃用它们。

在页面中添加 jQuery Mobile

使用 jQuery Mobile, 你可以再单个 HTML 文件中创建多个不同的页面。

你可以使用不同的href属性来区分使用同一个唯一id的页面：

       
  
 
 
欢迎来到我的主页
 
 
 
欢迎! 点击以下链接跳转到第二个页面。 
 跳转到第二个页面 
 
 
底部文本
 
 
 
 
 
欢迎来到我的主页
 
 
 
这是第二个页面。点击以下链接跳转到第一个页面。
 跳转到第一个页面 
 
 
底部文本
 
 
  

注意：当web应用有大量的内容（文本，图片，脚本等）将会严重影响加载时间。如果你不想使用内页链接可以使用外部文件：

访问外部文件

页面作为对话框使用

对话框是用于显示页面信息显示或者表单信息的输入。

在链接中添加data-rel="dialog"让用户点击链接时弹出对话框:

       
  
 
 
欢迎来到我的主页
 
 
 
欢迎!
 弹出对话框 
 
 
底部文本
 
 
 
 
 
我是一个对话框！
 
 
 
对话框与普通页面不同，它显示在当期页面上, 但又不会填充完整的页面，顶部图标 "X" 用于关闭对话框。
 跳转到第一个页面 
 
 
对话框底部文本