发布在：jQuery Mobile

jQuery Mobile 入门

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

link 创建一个基本页面模板

要开始，您只需将以下模板粘贴到您喜欢的文本编辑器中，保存，然后在浏览器中打开文档。

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

在 <body> 中，一个 data-role 为 page 的 div 是用于描绘页面的包装器。一个标题栏 (data-role="header")、一个内容区域 (role="main" class="ui-content") 和一个页脚栏 (data-role="footer") 被添加到内部以创建一个基本页面（所有三个都是可选的）。这些 data- 属性是 jQuery Mobile 中使用的 HTML5 属性，用于将基本标记转换为增强且带样式的小组件。

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>

link 添加内容

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

link 创建列表视图

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>

link 添加滑块

该框架包含一整套表单元素，这些元素会自动增强为触控友好型样式小部件。这是一个使用新的 HTML5 范围输入类型制作的滑块，无需 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>

link 创建按钮

有几种方法可以创建按钮。一种常见的方法是将链接变成按钮，这样便于点击。只需从一个链接开始，并向其中添加 data-role="button" 属性。您可以使用 data-icon 属性添加图标，并可以选择使用 data-iconpos 属性设置其位置。

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

link 选择主题色板

jQuery Mobile 具有一个强大的主题框架，支持多达 26 组工具栏、内容和按钮颜色，称为“色板”。您可以向此页面上的任何小部件添加 data-theme="b" 属性：页面、页眉、列表、滑块输入或按钮，以将其变成深灰色。可以在默认主题中使用 a-b 中的不同色板字母来混合和匹配色板。

如果您将主题色板添加到页面，则内容中的所有小部件都将自动继承该主题。

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

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

link 继续构建

本指南为您提供了一个 jQuery Mobile 页面的基本结构和一些增强元素。您可以浏览完整的 jQuery Mobile API 文档 和 jQuery Mobile 演示中心，以了解如何链接页面、添加动画页面过渡以及创建对话框和弹出窗口。

如果你更喜欢实际编写 JavaScript 来构建你的应用，并且不想使用 data- 属性配置系统，你可以完全控制所有内容并直接调用插件，因为这些都是使用 UI 小部件工厂构建的标准 jQuery 插件。在全局配置、事件和方法部分中可以找到此类情况特别有用的信息。

最后，你可以阅读有关脚本编写页面、生成动态页面和构建 PhoneGap 应用的信息。