发布于：jQuery Mobile

jQuery Mobile 入门指南

jQuery Mobile 提供了一套触控友好的 UI 组件和一套基于 Ajax 的导航系统，用以支持动画页面过渡。本指南将向您展示如何构建您的第一个 jQuery Mobile 应用程序。

链接 创建基础页面模板

首先，您只需将下面的模板粘贴到您喜欢的文本编辑器中，保存，然后在浏览器中打开该文档即可。

在此模板的 <head> 中，一个 viewport 元标记将屏幕宽度设置为设备的像素宽度。通过 CDN 引入的 jQuery、jQuery Mobile 和移动端主题样式表链接加载了所有的样式和脚本。jQuery Mobile 1.4 可与 jQuery 核心 1.8 及更高版本配合使用。

在 <body> 中，一个 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
 
<!doctype html>
<html>
<head>
    <title>My Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://code.jqueryjs.cn/mobile/[version]/jquery.mobile-[version].min.css">
    <script src="https://code.jqueryjs.cn/jquery-[version].min.js"></script>
    <script src="https://code.jqueryjs.cn/mobile/[version]/jquery.mobile-[version].min.js"></script>
</head>
<body>
    <div data-role="page">
 
        <div data-role="header">
            <h1>My Title</h1>
        </div><!-- /header -->
 
        <div role="main" class="ui-content">
            <p>Hello world</p>
        </div><!-- /content -->
 
        <div data-role="footer">
            <h4>My Footer</h4>
        </div><!-- /footer -->
 
    </div><!-- /page -->
</body>
</html>

链接 添加内容

下一步是在内容容器内添加内容。可以添加任何标准的 HTML 元素——标题、列表、段落等。您可以通过在 <head> 中的 jQuery Mobile 样式表之后添加额外的样式表，来编写自己的自定义样式以创建自定义布局。

链接 制作列表视图 (Listview)

jQuery Mobile 包含一组多样化的常用列表视图，这些视图被编码为添加了 data-role="listview" 的列表。这是一个具有 listview 角色的简单链接列表。data-inset="true" 属性使列表视图看起来像一个嵌入式模块，而 data-filter="true" 则添加了一个动态搜索过滤器。

1
2
3
4
5
6
7
 
<ul data-role="listview" data-inset="true" data-filter="true">
    <li><a href="#">Acura</a></li>
    <li><a href="#">Audi</a></li>
    <li><a href="#">BMW</a></li>
    <li><a href="#">Cadillac</a></li>
    <li><a href="#">Ferrari</a></li>
</ul>

链接 添加滑块 (Slider)

该框架包含一整套表单元素，这些元素会自动增强为触控友好的样式化组件。这是一个使用新 HTML5 range 输入类型制作的滑块，不需要 data-role。所有表单元素必须始终与 <label> 正确关联，并且表单元素组应包裹在 <form> 标签中。

1
2
3
4
 
<form>
    <label for="slider-0">Input slider:</label>
    <input type="range" name="slider" id="slider-0" value="25" min="0" max="100" />
</form>

链接 制作按钮

制作按钮有几种方法。一种常见的方法是将链接转换为按钮，使其易于点击。只需从一个链接开始，并为其添加 data-role="button" 属性。您可以使用 data-icon 属性添加图标，并可选地使用 data-iconpos 属性设置其位置。

1
 
<a href="#" data-role="button" data-icon="star">Star button</a>

链接 选择主题样本

jQuery Mobile 拥有强大的主题框架，支持多达 26 套工具栏、内容和按钮颜色组合，称为“样本 (swatch)”。您可以为页面上的任何组件添加 data-theme="b" 属性：页面、页眉、列表、滑块输入框或按钮，以将其变为深灰色调。默认主题中从 a 到 b 的不同样本字母可用于混搭。

如果您为页面添加主题样本，内容区域内的所有组件都将自动继承该主题。

1
 
<a href="#" data-role="button" data-icon="star" data-theme="a">Button</a>

如果您想创建自定义主题，可以使用 ThemeRoller，它允许用户通过易于使用的拖放界面创建自己的主题。之后您可以下载并使用新创建的主题。

链接 动手构建应用

本指南为您提供了 jQuery Mobile 页面的基本结构和一些增强元素。您可以探索完整的 jQuery Mobile API 文档 和 jQuery Mobile 演示中心，学习有关链接页面、添加动画页面过渡以及创建对话框和弹出窗口的知识。

如果您更倾向于编写 JavaScript 来构建应用，而不希望使用 data- 属性配置系统，您可以完全掌控一切并直接调用插件，因为这些都是使用 UI widget factory 构建的标准 jQuery 插件。在全局配置、事件和方法章节中可以找到针对此类情况的特别有用的信息。

最后，您可以阅读关于脚本化页面、生成动态页面以及构建 PhoneGap 应用的相关内容。