jQuery Mobile 提供了一套触控友好的 UI 组件和一套基于 Ajax 的导航系统，用以支持动画页面过渡。本指南将向您展示如何构建您的第一个 jQuery Mobile 应用程序。
链接 创建基础页面模板首先，您只需将下面的模板粘贴到您喜欢的文本编辑器中，保存，然后在浏览器中打开该文档即可。
在此模板的
中，一个 viewport 元标记将屏幕宽度设置为设备的像素宽度。通过 CDN 引入的 jQuery、jQuery Mobile 和移动端主题样式表链接加载了所有的样式和脚本。jQuery Mobile 1.4 可与 jQuery 核心 1.8 及更高版本配合使用。在
中，一个 data-role 为 page 的 div 是用于定义页面的包装容器。内部添加了页眉栏（data-role="header"）、内容区域（role="main" class="ui-content"）和页脚栏（data-role="footer"）以创建一个基础页面（这三个部分都是可选的）。这些 data- 属性是 HTML5 属性，在 jQuery Mobile 中广泛使用，用于将基础标记转换为增强型且具有样式的组件。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
My Title
Hello world
My Footer
链接 添加内容下一步是在内容容器内添加内容。可以添加任何标准的 HTML 元素——标题、列表、段落等。您可以通过在
中的 jQuery Mobile 样式表之后添加额外的样式表，来编写自己的自定义样式以创建自定义布局。链接 制作列表视图 (Listview)jQuery Mobile 包含一组多样化的常用列表视图，这些视图被编码为添加了 data-role="listview" 的列表。这是一个具有 listview 角色的简单链接列表。data-inset="true" 属性使列表视图看起来像一个嵌入式模块，而 data-filter="true" 则添加了一个动态搜索过滤器。
1
2
3
4
5
6
7
链接 添加滑块 (Slider)该框架包含一整套表单元素，这些元素会自动增强为触控友好的样式化组件。这是一个使用新 HTML5 range 输入类型制作的滑块，不需要 data-role。所有表单元素必须始终与
1
2
3
4
链接 制作按钮制作按钮有几种方法。一种常见的方法是将链接转换为按钮，使其易于点击。只需从一个链接开始，并为其添加 data-role="button" 属性。您可以使用 data-icon 属性添加图标，并可选地使用 data-iconpos 属性设置其位置。
1
链接 选择主题样本jQuery Mobile 拥有强大的主题框架，支持多达 26 套工具栏、内容和按钮颜色组合，称为“样本 (swatch)”。您可以为页面上的任何组件添加 data-theme="b" 属性：页面、页眉、列表、滑块输入框或按钮，以将其变为深灰色调。默认主题中从 a 到 b 的不同样本字母可用于混搭。
如果您为页面添加主题样本，内容区域内的所有组件都将自动继承该主题。
1
如果您想创建自定义主题，可以使用 ThemeRoller，它允许用户通过易于使用的拖放界面创建自己的主题。之后您可以下载并使用新创建的主题。
链接 动手构建应用本指南为您提供了 jQuery Mobile 页面的基本结构和一些增强元素。您可以探索完整的 jQuery Mobile API 文档 和 jQuery Mobile 演示中心，学习有关链接页面、添加动画页面过渡以及创建对话框和弹出窗口的知识。
如果您更倾向于编写 JavaScript 来构建应用，而不希望使用 data- 属性配置系统，您可以完全掌控一切并直接调用插件，因为这些都是使用 UI widget factory 构建的标准 jQuery 插件。在全局配置、事件和方法章节中可以找到针对此类情况的特别有用的信息。
最后，您可以阅读关于脚本化页面、生成动态页面以及构建 PhoneGap 应用的相关内容。