jQuery Mobile 高级教程（一）

原文：Pro jQuery Mobile

协议：CC BY-NC-SA 4.0

零、简介

我们目前正在见证企业和个人构建和分发移动应用的方式的转变。最初的策略是为每个主要平台构建单独的原生应用。然而，团队很快意识到维护多个平台是不可持续的，因为移动团队失去了灵活性。可以一次构建并在明天发布到所有设备的移动团队将拥有竞争优势，jQuery Mobile 可以帮助您实现这一目标。

jQuery Mobile 是一个框架，用于交付具有统一接口的跨平台移动 web 应用。jQuery Mobile 将响应式布局与渐进式增强相结合，从单一代码库提供尽可能好的用户体验。通过 jQuery Mobile，我们将看到如何为 iOS、Android、Windows Phone、Blackberry 等创建可操作的、响应迅速的、具有本机外观的应用。我们将发现 jQuery Mobile 与其他移动 web 开发平台的不同之处，并且我们将浏览 jQuery Mobile 特性的实际例子，包括设计元素和事件处理。

你将学到什么

jQuery Mobile 的独特功能
jQuery Mobile 的核心特性，包括页面结构、导航、表单元素、列表和网格
如何创造主题化的设计
整个 jQuery Mobile API，包括数据属性、方法和事件
将 web 服务、Google 地图和地理定位集成到您的 jQuery Mobile 应用中
当您需要分发到应用商店或访问设备功能时，如何使用 PhoneGap 扩展 jQuery Mobile
如何将 jQuery Mobile 应用于具体案例，包括 iOS 和 Android 应用

这本书是给谁的

希望掌握 jQuery Mobile 并从单一代码库构建跨平台移动 web 应用的移动开发人员。

下载代码

读者可以在本书主页的源代码部分的[www.apress.com](http://www.apress.com)获得本书的源代码。请随意访问 Apress 网站并在那里下载代码。

一、为什么选择 jQuery Mobile？

jQuery Mobile 是一个简单易用的新 UI 框架，用于构建跨平台的移动 Web 应用。在几分钟内，您就可以创建移动应用(apps ),这些应用已经过优化，可以在目前可用的几乎所有手机、平板电脑、台式机和电子阅读器设备上运行。没错，通过单一的 jQuery Mobile 代码库，我们可以为几乎所有的消费者创造统一的体验。对于任何需要一个简单框架来创建丰富的移动 Web 体验的 Web 设计人员或开发人员来说，jQuery Mobile 是一个理想的框架。这种体验也超越了网络。jQuery Mobile 应用也可以用混合技术编译，在您喜欢的本地应用商店中发布。在开始我们的旅程时，让我们回顾一下使 jQuery Mobile 与众不同的重要特性。

普遍接入

所有带有浏览器的设备都可以访问 jQuery Mobile 应用。这是 jQuery Mobile 的分发模式的有利优势(参见 Figure 1–1)。几乎每个移动设备都带有浏览器。如果你的应用可以被广泛使用，这将是一个主要的竞争优势。下面是 jQuery Mobile 1.0 支持的设备的完整列表，包括大多数手机、平板电脑、桌面浏览器，甚至电子阅读器。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

**图 1–1。**jQuery 1.0 手机浏览器覆盖

支持的设备:

手机/平板电脑
- 安卓 1.6 以上
- 黑莓 5+
- iOS 3+
- Windows Phone 7
- WebOS 1.4 以上版本
- 塞班(诺基亚 S60)
- 火狐手机歌剧移动 11+
- Opera Mini 5+
桌面浏览器
- 铬合金 11+
- 火狐 3.6 以上版本
- Internet Explorer 7+
- 旅行队
电子书阅读器
- 点燃
- 角落

**注:**关于所有支持平台的最新列表，请参考 jQuery Mobile 的支持平台页面(参见jquerymobile.com/gbs/)。

相比之下，本地应用开发有一个非常严格的分布模型(参见 Figure 1–2)。本机应用仅在其本机操作系统上可用。例如，iPhone 应用只能通过 iOS 设备访问。如果你的目标是接触尽可能多的消费者，这种分销模式是有限的。幸运的是，jQuery Mobile 应用没有受到这种分布障碍的限制。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 1–2。 原生 OS 覆盖范围

除了通用访问之外，jQuery Mobile 应用还可以利用我们在 Web 上已经习惯的即时部署功能。对于 jQuery Mobile 应用，在本地应用分发模型中要求的认证审查方面不存在任何障碍。移动 Web 应用可以即时更新并部署到您的生产用户。例如，我最近正在开发一个需要更新的本地企业应用，而重新认证流程花了一周时间才批准了这一更改。平心而论，本地应用商店可以选择提交紧急更新，但关键是你将依赖第三方来推送更新到他们的商店。移动网络的即时部署模式在这方面非常有利。

跨所有移动平台的统一 UI

jQuery Mobile 按照 HTML5 和 CSS3 标准设计，提供了统一的用户界面。移动用户希望他们的用户体验跨平台保持一致(参见图 1–3、图 1–4、图 1–5)。相反，比较 iPhone 和 Android 上的原生 Twitter 应用。体验不统一。jQuery Mobile 应用弥补了这种不一致性，提供了一种熟悉的、可预期的用户体验，而与平台无关。此外，无论最终用户平台如何，统一的用户界面都将提供一致的文档、屏幕截图和培训。例如，如果您的销售人员需要关于正在部署的新移动应用的培训，用户文档将包含适用于所有平台的一致屏幕截图。如果团队中一半人使用 iPhones，另一半人使用 Android 设备，那么所有用户的培训体验和文档都是一样的。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 1-3。 iPhone

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 1–4。 Windows Phone

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 1-5。 Android

jQuery Mobile 还有助于消除对特定于设备的 UI 定制的需求。无需定制，单个 jQuery Mobile 代码库将在所有支持的平台上一致地呈现。与支持每个操作系统的本地代码库的组织相比，这是一个非常经济高效的解决方案。从支持和维护成本的角度来看，支持单一代码库更具成本效益(参见图 1–6)。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 1–6。 通过移动技术叠加成本乘数

简化的标记驱动开发

jQuery Mobile 页面采用 HTML5 标记样式(参见清单 1–1)。).除了 HTML5 中引入的新的自定义数据属性之外，对于 Web 设计人员和开发人员来说，一切都应该非常熟悉。如果您已经熟悉 HTML5，那么迁移到 jQuery Mobile 应该是一个相对无缝的过渡。关于 JavaScript 和 CSS，默认情况下，jQuery Mobile 完成了所有繁重的工作。但是，在某些情况下，您可能需要依靠 JavaScript 来创建更动态或增强的页面体验。除了设计页面所需的简单标记外，它还允许用户界面的快速原型化。很快，我们可以创建一个功能页面、过渡和小部件的静态工作流，以帮助我们的客户用最少的努力看到真实的原型。

清单 1–1。 在此插入清单标题。

Title

Page Header

Hello jQuery Mobile!

Page Footer

渐进增强

jQuery Mobile 将为设备呈现最优雅的用户体验。例如，看看图 1–7 中的 jQuery Mobile switch 控件。这是 A 级浏览器上的开关控件。 ¹

A 级浏览器支持媒体查询，并将呈现 jQuery Mobile CSS3 风格的最佳体验。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 1–7。 A 级体验

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 1–8。 C 级经验

jQuery Mobile 呈现应用了完整 CSS3 样式的控件。或者，Figure 1–8 是在更老的 C 级浏览器上呈现的相同开关控件。²C 级浏览器不渲染完整的 CSS3 样式。

**重要提示:**尽管 C 级体验不是最具视觉吸引力的，但它证明了优雅降级的有用性。随着用户升级到更新的设备，C 级浏览器市场最终将会缩小。在这种交叉发生之前，C 级浏览器在运行 jQuery Mobile 应用时仍将获得功能性用户体验。

本机应用并不总是优雅地降级。在大多数情况下，如果您的设备不支持本机应用功能，您甚至不允许下载该应用。例如，iOS 5 中的一个新功能是 iCloud persistence。这项新功能简化了多个设备之间的数据同步。为了兼容性，如果我们创建一个包含这一新功能的新 iOS 应用，我们将需要为我们的应用设置“最低允许的 SDK”为 5.0。现在，我们的应用将只对运行 iOS 5.0 或更高版本的用户可见。jQuery Mobile 应用在这方面更加灵活。

C 级浏览器不支持媒体查询，也不会从 jQuery Mobile 获得样式增强。

响应式设计

jQuery Mobile UI 将在不同的显示尺寸之间做出相应的呈现。例如，相同的用户界面将适当地显示在手机上(参见图 1–9)或更大的设备上，如平板电脑、台式机或电视(参见图 1–10)。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 1–9。 手机显示

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 1–10。 平板电脑/台式机/电视显示器

一次构建，随处运行的神话

有没有可能构建一个对所有消费者(手机、台式机、平板电脑)通用的单一应用？是的，这是可能的。网络提供全球分销。jQuery Mobile 提供跨浏览器支持。有了 CSS 媒体查询，我们可以开始定制我们的用户界面，以最适合的形式因素。例如，在小型设备上，我们可以提供带有简短内容的小图像，而在大型设备上，我们可以提供带有详细内容的大图像。如今，大多数拥有移动设备的组织通常同时支持桌面网站和移动网站。你必须支持一个应用的多个发行版，这是浪费时间。组织拥抱移动存在的速度，加上他们避免浪费的需要，将推动“构建一次，随处运行”的神话成为现实。

响应式

在某些情况下，jQuery Mobile 会为您创建响应式设计。下图显示了 jQuery Mobile 的响应式设计在纵向和横向模式下应用于表单域定位的效果。例如，在纵向视图中(参见图 1–11)，标签位于表单字段上方。或者，在横向重新定位设备时(参见图 1–12)，表单域和标签并排出现。这种响应式设计基于可用于筛选房地产的设备提供了最有用的体验。jQuery Mobile 为您提供了许多这些好的 UX 原则，而无需您付出任何努力！

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 1–11。 响应式设计(人像)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 1–12。 响应式设计(景观)

主题风格

jQuery Mobile 支持主题化设计，允许设计者快速地重新设计他们的 UI。默认情况下，jQuery Mobile 提供了五种主题设计，可以灵活地交换所有组件的主题，包括页面、页眉、内容和页脚组件。创建自定义主题最有用的工具是滚轮 ³ 。

重新设计一个用户界面需要最少的努力。例如，我可以快速获得一个默认主题的 jQuery Mobile 应用(参见 Figure 1–13)，然后在几秒钟内用另一个内置主题重新设计它。在我修改主题的情况下(见图 1–14，我从列表中选择了一个替换主题。唯一需要的标记是添加一个数据主题属性。我们将在《??》第七章中更详细地讨论主题。

³ 见[jqueryui.com/themeroller/](http://jqueryui.com/themeroller/)。ThemeRoller 是一个基于 web 的工具，可以自动生成新的基于 CSS 的主题。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 1–13。 默认主题

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 1–14。 交替主题

可及

默认情况下，jQuery Mobile 应用符合 508 标准，这一特性对任何人都很有价值。 ⁴

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

特别是，政府或国家机构要求他们的应用 100%可访问。此外，移动屏幕阅读器的使用正在上升。根据 WebAIM ⁵ 的调查，66.7%的屏幕阅读器用户在他们的移动设备上使用屏幕阅读器。

⁴ 508 合规性是一项联邦法律，要求残疾用户能够访问应用。移动网络上最常用的辅助技术是屏幕阅读器。

⁵ 见[webaim.org/projects/screenreadersurvey3/#mobileusage](http://webaim.org/projects/screenreadersurvey3/#mobileusage)。

**提示:**有兴趣测试你的移动网站是否符合 508 标准吗？使用 WAVE 评估您的移动网站。 ⁶

除了用 WAVE 测试你的移动应用的可访问性，用实际的辅助技术测试你的移动网络应用也是有价值的。例如，如果你有一个 iOS 设备，激活苹果的辅助工具，VoiceOver ⁷ 并亲自体验该行为。

**注意:**如果您有兴趣查看现有的 jQuery Mobile 应用，可以使用在线 jQuery Mobile 图库获取想法和灵感(参见[www.jqmgallery.com/](http://www.jqmgallery.com/))。

总结

在本章中，我们回顾了使 jQuery Mobile 独一无二的重要特性:

jQuery Mobile 应用可以在所有带浏览器的设备上通用，并且已经过优化，可以在目前几乎所有的手机、平板电脑、台式机和电子阅读器设备上运行。
jQuery Mobile 应用可以利用我们在 Web 上已经习惯的即时部署功能。
无需定制，单个 jQuery Mobile 代码库将在所有支持的平台上一致地呈现。与为每个操作系统或客户端构建应用的替代方案相比，这是一个非常经济高效的解决方案。
jQuery Mobile 是一个简化的标记驱动框架，Web 设计人员和开发人员应该对此非常熟悉。您可能会感到非常惊讶和兴奋，因为您可以用 100%的标记构建 jQuery Mobile 应用！
jQuery Mobile 利用渐进式增强技术为所有 A 级设备提供非常丰富的体验，并为旧的 C 级浏览器提供可用的体验。
jQuery Mobile UI 将在各种大小的设备上响应性地呈现，包括手机、平板电脑、台式机或电视。
jQuery Mobile 支持主题化设计，允许设计者在全球范围内快速地重新设计他们的 UI。
所有 jQuery Mobile 应用都符合 508 标准。

⁶ 见[wave.webaim.org/](http://wave.webaim.org/)。

⁷ 见[www.apple.com/accessibility/iphone/vision.html](http://www.apple.com/accessibility/iphone/vision.html)。

二、jQuery Mobile 入门

在第一章中，我们回顾了 jQuery Mobile 的独特之处。现在，我们将回顾 jQuery Mobile 的基础知识，以便我们可以快速启动并运行它。我们将从 jQuery Mobile 页面模板的概述开始。实际上有两种页面模板可供选择，我们将讨论每种模板的优势。接下来，我们将深入了解 jQuery Mobile 如何将我们的语义标记增强为优化的移动体验。此外，我们将探索 jQuery Mobile 导航模型是如何工作的。尽管 jQuery Mobile 管理着整个导航体验，但是理解导航模型是如何工作的也很重要。最后，我们将向您展示如何让页面过渡真正“流行”急着出发吗？让我们从一个 jQuery Mobile 页面的例子开始。

jQuery Mobile 页面模板

一个 jQuery Mobile 页面模板显示在清单 2–1 中。在我们继续下一步之前，让我们开始吧。复制 HTML 模板(ch2/template.html)，将其粘贴到桌面上，并从您喜欢的浏览器中启动它。您现在正在运行一个 jQuery Mobile 应用，无论您使用什么浏览器，它看起来都应该与图 2–1 一样！该模板是语义 HTML5，包含 jQuery Mobile 特定的属性和资产文件(CSS、js)。在清单 2–1 中突出显示并解释了每个特定的 jQuery Mobile 资产和属性。

清单 2–1。 jQuery 手机页面模板(ch2/template.html)

Title **** 1 **** 2 **** 5

*<div data-role=“page”>       *                                                6
    <div data-role=“header”>                                                 7

Page Header

<div data-role=“content”> 8

Hello jQuery Mobile!

<div data-role=“footer”> 9

Page Footer

这是 jQuery Mobile 的推荐视口配置。device-width值表示我们希望内容缩放设备的整个宽度。initial-scale设置设定用于查看网页的初始比例或缩放系数。值 1 显示未缩放的文档。作为 jQuery Mobile 开发人员，您可以根据自己的应用需求定制视口设置。例如，如果你想禁用缩放，你可以添加user-scalable=no。但是，禁用缩放是一种您希望尽量避免的做法，因为它会破坏可访问性。
jQuery Mobile 的 CSS 将为所有 A 级和 B 级浏览器应用风格增强。您可以根据需要自定义或添加自己的 CSS。
jQuery 库是 jQuery Mobile 的核心依赖项，如果您的应用需要更动态的行为，强烈建议您在移动页面中利用 jQuery 的核心 API。
如果您需要覆盖 jQuery Mobile 的默认配置，可以在这里应用您的定制。有关定制 jQuery Mobile 默认配置的详细信息，请参考第八章，配置 jQuery Mobile。
jQuery Mobile JavaScript 库必须在 jQuery 和任何自定义脚本之后声明。jQuery Mobile 库是增强整个移动体验的核心。
data-role=“page”为 jQuery Mobile 页面定义页面容器。只有在构建多页面设计时才需要这个元素(参见清单 2–3)。
data-role="header"是如图图 2–1 所示的标题或标题栏。该属性是可选的。
data-role=“content”是内容体的包装容器。该属性是可选的。
data-role=“footer”包含如图图 2–1 所示的页脚条。该属性是可选的。

**重要提示:**CSS 和 JavaScript 文件的顺序必须按照清单 2–1 中列出的顺序出现。在 jQuery Mobile 引用依赖项之前，需要对依赖项进行排序以正确初始化。此外，建议从内容交付网络(CDN)下载这些文件。特别是，您可以从 jQuery Mobile CDN 下载它们。¹cdn 中的文件经过高度优化，将为您的用户提供更灵敏的体验。它们被压缩、缓存、缩小，并且可以并行加载！

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 2–1。 你好 jQuery 手机

¹ 见【http://jquerymobile.com/download/】的。

**提示:**要将页脚定位在屏幕的最底部，向页脚元素添加data-position=“fixed”。默认页脚位于内容之后，而不是设备的底部。例如，如果你的内容只占设备高度的一半，页脚就会出现在屏幕的中间。

<div data-role=“footer” 数据-位置= “固定” >

jQuery Mobile 页面增强功能

jQuery Mobile 如何增强标记以优化移动体验？有关目测，请参考图 2–2。

首先，jQuery Mobile 将加载语义 HTML 标记(参见清单 2–1)。
接下来，jQuery Mobile 将迭代每个页面组件，由它们的数据角色属性定义。随着 jQuery Mobile 迭代每个页面组件，它将增强标记，并为每个组件应用移动优化的 CSS3 增强。jQuery Mobile 最终将标记增强为一个页面，可以在所有移动平台上通用地呈现。
最后，在页面增强完成后，jQuery Mobile 将显示优化后的页面。请参见清单 2–2 查看由移动浏览器呈现的增强源代码。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 2–2。 jQuery Mobile 页面增强示意图

**清单 2–2。**jQuery Mobile 增强版 DOM

Page Header

Hello jQuery Mobile!

Page Footer

loading

base 标签的@href指定了页面上所有链接的默认地址或默认目标。例如，jQuery Mobile 将在加载特定于页面的资产(图片、CSS、js 等)时利用@href。).
body 标签包含了header, content,和footer组件的增强样式。默认情况下，所有组件都使用了默认主题及其特定于移动设备的 CSS 增强功能。另外，由于增加了 WAI-ARIA 角色和级别，所有组件现在都支持可访问性。您可以免费获得所有这些增强功能！

到目前为止，您应该对设计一个基本的 jQuery Mobile 页面感到满意了。已经向您介绍了核心页面组件(page, header, content, footer)，并且已经看到了增强的 jQuery Mobile 页面的 DOM 结果。接下来我们将探索 jQuery Mobile 的多页面模板。

多页模板

jQuery Mobile 支持在单个 HTML 文档中嵌入多个页面的能力，如清单 2–3 所示。这种策略可用于预先预取多个页面，并在加载子页时实现更快的响应时间。正如您在下面的示例中看到的，多页文档与我们之前看到的单页模板完全相同，只是在第一页之后附加了第二页。下面突出显示并讨论了多页的具体细节。

清单 2–3。*ch2/multi-page.html*多页模板

`

  Multi Page Example

<a href=“#contact” data-role=“button”>Contact Us 2

        Contact information…

多页文档中的每一页都必须包含唯一的id。一个页面可以有一个page或dialog的data-role。当最初显示多页文档时，仅增强并显示第一页。例如，当请求multi-page.html文档时，将显示带有id=“home”的页面，因为它是多页文档中列出的第一页。如果您想要请求带有id=“contact”的页面，您可以请求带有您想要显示的内部页面散列的多页文档(multi-page.html#contact)。当加载多页文档时，只会增强和显示初始页面。后续页面在被请求并缓存在 DOM 中时会得到增强。这种行为非常适合快速响应。要设置每个内部页面的标题，添加data-title属性。
当链接到内部页面时，您必须通过页面id引用它。例如，链接到联系人页面的 href 必须设置为href=“#contact”。
如果您想将脚本的范围限定在特定的页面上，它们必须放在页面容器中。这条规则也适用于通过 Ajax 加载的页面，我们将在下一节进一步讨论。例如，multi-page.html#home将无法访问任何在multi-page.html#contact上内部声明的 JavaScript。只能访问活动页面的脚本。然而，所有的脚本，包括 jQuery、jQuery Mobile 和您自己在父文档的 head 标签中声明的定制脚本，对于所有内部和 Ajax 加载的页面都是可用的。

设置内部页面的页面标题

需要注意的是，内部页面的标题将按照以下优先顺序设置:

如果存在一个data-ti2–tle值，它将被用作内部页面的标题。例如，“multi-page.html#home”的标题将被设置为“Home”。
如果不存在data-title值，页眉将被用作内页的标题。例如，如果"multi-page.html#home"没有data-title属性，那么标题将被设置为"Welcome Home"，即它的header标签的值。
最后，如果内部页面上既没有data-title也没有标题，那么 head 标签中的 title 元素将被用作内部页面的标题。例如，如果"multi-page.html#home没有data-title属性和标题，那么标题将被设置为"Multi Page Example"，即父文档标题标签的值。

**重要提示:**当链接到一个包含多个页面的页面时，必须将rel="external"添加到其链接中。

`
Home

Home`

这将执行整页刷新。这是必需的，因为 jQuery Mobile 不能将多页面文档加载到活动页面的 DOM 中。这将导致与 jQuery Mobile 如何利用 URL 哈希(#)的名称空间冲突。jQuery Mobile 利用哈希值来识别多页面文档中的内部页面。

此外，因为 jQuery Mobile 利用散列来识别 DOM 中的唯一页面，所以不可能利用锚标记书签特性(index.html#my-bookmark)。jQuery Mobile 将my-bookmark视为页面标识符，而不是书签。Ajax 驱动的导航将在下一节详细讨论。

单页文档与多页文档

您需要确定页面访问趋势，以确定从带宽和响应时间的角度来看哪种策略最有意义。多页文档在初始加载时会消耗更多的带宽，但它们只需要一个服务器请求，因此它们的子页面加载的响应时间非常快。单页文档每次请求消耗的带宽较少，但是每页需要一个服务器请求，这导致响应时间非常慢。

如果你有几个经常按顺序访问的页面，它们是在同一文档中预先加载的理想选择。最初的带宽命中率稍高，但我们在访问下一页时实现了即时响应。但是，如果用户访问两个页面的概率很低，那么您应该选择将文件分开，并在初始加载时达到较低的带宽。

有工具可以帮助您收集页面访问趋势和其他指标，以帮助优化您的页面访问策略。比如 Google Analytics²或者 Omniture ³ 都是移动 Web 应用常见的分析解决方案。

² 见【http://www.google.com/analytics/】的。

³ 见【http://www.omniture.com/】的。

**提示:**在大多数情况下，建议利用单页面模型，在后台将流行页面动态追加到 DOM 中。我们可以通过向任何想要动态加载的链接添加data-prefetch属性来实现这种行为:

<a href="load-page-dynamically.html" data-prefetch></a>

这种混合方法允许我们选择性地选择我们想要加载和缓存的链接。同样，这种模式只推荐用于访问非常频繁的页面，因为这种行为会触发一个额外的 HTTP 请求来动态加载页面。

Ajax 驱动的导航

在上面的多页面示例中(参见清单 2–3)，我们看到了 jQuery Mobile 如何从一个内部页面导航到另一个页面。当多页面文档初始化时，两个内部页面都已经添加到 DOM 中，因此从一个内部页面到另一个内部页面的页面转换速度非常快。当从一页导航到另一页时，我们可以配置要应用的过渡类型。默认情况下，框架会对所有过渡应用一个"slide"效果。我们将在本章的后面讨论过渡和可供选择的过渡类型。

当一个单页面过渡到另一个单页面时，导航模型是不同的。例如，我们可以将多页面中的联系页面提取到它自己的文件中(contact.html)。现在我们的主页(hijax.html)可以像普通 HTTP 链接引用一样访问联系人页面:

清单 2–4。【Ajax 导航(ch2/hijax.html )

<a href=“contact.html” data-role=“button”>Contact Us

当点击上面的“联系我们”链接时，jQuery Mobile 将按如下方式处理该请求:

jQuery Mobile will parse the href and load the page via an Ajax request (Hijax). For a visual, refer to Figure 2–3. If the page is loaded successfully, it will be added to the DOM of the current page.

图 2–3。 jQuery Mobile Hijax 请求

页面成功添加到 DOM 后，jQuery Mobile 将根据需要增强页面，更新base元素的@href，并设置data-url属性(如果没有显式设置的话)。
然后，框架将转换到新页面，并应用默认的“slide”转换。*框架能够实现无缝的 CSS 转换，因为“from”和“to”页面同时存在于 DOM 中。*过渡完成后，当前可见或活动的页面将被赋予“ui-page-active”CSS 类。
The resulting URL is also bookmarkable. For example, if you want to deep link to the contact page you may access it from its full path: [host:port/ch2/contact.html](http://<host:port>/ch2/contact.html).

**注意:**作为一个额外的好处，基于 Ajax 的导航也将在支持 HTML5 的 pushState 的浏览器中产生干净的 URL。桌面 Safari、Chrome、Firefox 和 Opera 的最新版本都支持该功能。Android (2.2+)和 iOS5 也支持 pushState。在不支持此功能的浏览器中，将使用基于散列的 URL([host:port/hijax.html#contact.html](http://<host:port>/hijax.html#contact.html))来保留共享和标记 URL 的能力。
如果任何页面在 jQuery Mobile 中加载失败，将会显示一个“加载页面错误”的小错误消息覆盖图并淡出(参见图 2–4)。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 2–4。 错误加载屏幕

$.mobile.changePage()

changePage 函数处理从一个页面转换到另一个页面的所有细节。您可以切换到除同一页面之外的任何页面。可用过渡类型的完整列表如表 2–1 所示。

用法

$.mobile.changePage(“选项”)

论据

**toPage**(字符串或 jQuery 集合)。要转换到的页面。
- toPage(字符串)。文件 URL ( "contact.html")或内部元素的 ID(#contact)。
- toPage (jQuery 集合)。包含页面元素作为第一个参数的 jQuery 集合。
**options**(对象)。配置 changePage 请求的一组键/值对。所有设置都是可选的。
- transition (字符串，默认:$ . mobile . default transition)。申请变更页面的过渡。默认过渡是"slide"。
- reverse (布尔，默认:false)。以指示过渡应该向前还是向后。默认转换是向前。
- changeHash (布尔，默认:true)。当页面更改完成时，将哈希更新为页面的 URL。
- role (字符串，默认:"page")。显示页面时要使用的数据角色值。对于对话框，使用"dialog"。
- pageContainer (jQuery 集合，默认:$.mobile.pageContainer)。指定页面加载后应包含的元素。
- type (字符串，默认:"get")。指定发出页面请求时使用的方法(“get或“post”)。
- data (字符串或对象，默认:未定义)。发送到 Ajax 页面请求的数据。
- reloadPage (布尔，默认:false)。强制重新加载页面，即使它已经在页面容器的 DOM 中。
- showLoadMsg (布尔，默认:true)。请求页面时显示加载消息。
- fromHashChange (布尔，默认:false)。指示 changePage 是否来自 hashchange 事件。

例#1:

`//Transition to the “contact.html” page.
$.mobile.changePage( “contact.html” );

例 2:

`// Go to an internal “#contact” page with a reverse “pop” transition.
$.mobile.changePage( ‘#contact’, { transition: “pop”, reverse: true } );

Contact `

例 3:

`/* Dynamically create a new page and open it */

// Create page markup
var newPage = $(“

Hi

Hello Again! ”);

// Add page to page container
newPage.appendTo( $.mobile.pageContainer );

// Enhance and open new page
$.mobile.changePage( newPage );`

重要提示: Ajax 导航不会用于加载外部链接的情况:

`
<a href=“multi-page.html” rel=“external”>Home

<a href=“multi-page.html” target=“_blank”>Home`

在这些情况下，将进行正常的 HTTP 请求处理。此外，不会应用 CSS 过渡。如前所述，该框架能够通过将“from”和“to”页面动态加载到同一个 DOM 中，然后应用平滑的 CSS 过渡来实现平滑过渡。如果没有 Ajax 导航，转换将不会平滑，并且在转换过程中不会显示默认的加载消息($.mobile.loadingMessage)。

配置 Ajax 导航

Ajax 导航是全局启用的，但是如果 DOM 大小是一个问题，或者如果您需要支持不支持哈希历史更新的特定设备，您可以禁用这个特性(参见下面的注释)。默认情况下，jQuery Mobile 将为我们管理 DOM 大小或缓存，只将活动页面转换中涉及的“from”和“to”页面合并到 DOM 中。要禁用 Ajax 导航，请在绑定到 mobileinit 事件时设置$.mobile.ajaxEnabled = false。有关配置 jQuery Mobile 或管理 DOM 缓存的更多信息，请参考第八章。

注意: Ajax 导航已经在已知与哈希历史更新冲突的平台上被禁用。例如，jQuery Mobile 已经为黑莓 5、Opera Mini (5.0-6.0)、诺基亚 Symbian³ 和 Windows Phone 6.5 禁用了 Ajax 导航($.mobile.ajaxEnabled = false)。当使用常规 HTTP 和整页刷新浏览时，这些设备更有用。

过渡

jQuery Mobile 在页面之间转换时有六种基于 CSS 的转换效果可供选择。默认情况下，框架会对所有过渡应用一个"slide"效果。我们可以通过将data-transition属性添加到任何链接、按钮或表单来设置替代转换:

<a href="dialog.html" **data-transition="slideup"**>Show Dialog</a>

过渡效果的完整列表在表 2–1 中描述:

从页面到页面的转换过程按以下步骤进行:

用户点击按钮导航至下一页(参见图 2–5)。
框架将使用 Hijax 请求加载下一个页面，并将其添加到当前页面的 DOM 中。当两页基本并排时，平滑过渡就要开始了(见图 2–6)。
框架转换到下一页(见图 2–7)。此示例使用默认的“幻灯片”过渡。
显示下一页，过渡完成(参见图 2–8)。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 2–5。 第一步:点击按钮导航到另一个页面

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 2–6。 第二步:框架并排加载下一页

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 2–7。 第三步:框架转换到下一页

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 2–8。 第四步:过渡完成

**提示:**你可以通过在链接中添加data-direction="reverse"来设置“向后”过渡。向前的"slide"转换将向左滑动，相反，反向的"slide"转换将向右滑动。例如，当转换回历史时，默认情况下会应用反向转换。但是，如果您的标题上有一个“主页”链接，您将需要应用 data-direction="reverse" 属性，否则将出现默认的“转发”效果:

<a href="home.html" data-icon="home" data-iconpos="notext" **data-direction="reverse"** class="ui-btn-right jqm-home"> Home </a>

对话框

对话框类似于页面，除了它们的边框是内嵌的，给它们一个模态对话框的外观。jQuery Mobile 在设计对话框样式方面非常灵活。我们可以创建确认对话框(见图 2–9)、警告对话框(见图 2–10)，甚至行动单样式的对话框(见图 2–11、图 2–12)。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 2–9。 确认对话框(ch2/dialog.html )

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 2–10。 警报对话框(ch2/alert.html )

我们可以在链接或页面组件上将页面转换成对话框。在一个链接上，添加如清单 2–5 所示的data-rel="dialog"属性。添加该属性将自动加载目标页面，并将其增强为模式对话框。

清单 2–5。 链路级转换

`
<a href=“#terms” data-rel=“dialog” data-transition=“slidedown”>Terms

Do you agree to these terms?

Disagree
Agree

我们还可以在页面容器中配置对话框。将data-role="dialog"属性添加到页面容器中，当组件加载时，它将被增强为一个模态对话框(参见清单 2–6)。

清单 2–6。*ch2/dialog.html*页面级转换

`
Terms and Conditions

Do you agree to these terms?

Disagree
Agree

**注意:**任何带有data-rel="dialog"的链接或者任何带有data-role="dialog"的页面都不会出现在历史中，也不能被书签标记。例如，如果您导航到一个对话框，关闭该对话框，然后点击浏览器的前进按钮，您将不会前进到该对话框，因为它将不存在于历史中。

链接对比页面配置

有两个打开对话框的选项，我们应该选择哪一个？我更喜欢页面配置(data-role="dialog")，因为它允许我们在页面容器中配置一次对话框，导航到对话框的按钮不需要任何修改。例如，如果我们有三个按钮链接到我们的对话框，基于页面的配置只需要一个修改。而基于链接的配置需要三次更改，每个按钮一次。

jQuery Mobile dialog API 还公开了一个close方法，您可以在以编程方式处理对话框时利用它。例如，如果我们想以编程方式处理图 2–9 中“同意”按钮的处理，我们可以处理点击事件，处理任何必要的业务逻辑，并在完成时关闭对话框:

`function processAgreement(){
// Save the agreement…

// Close the dialog
$(‘.ui-dialog’).dialog(‘close’);
}`

行动表

除了传统的对话框，我们还可以将对话框设计成行动表(参见图 2–11 和图 2–12)。只需移除标题，添加小的样式更新(见清单 2–7)，你的对话框就会显示为一个动作表。行动表通常用于征求用户的回应。为了获得最佳用户体验，建议对动作表使用slidedown过渡。方便的是，当对话框关闭时，它们会自动应用反向转换。例如，当您关闭此动作表时，将应用反向slideup转换。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 2-11。 动作表#1 ( ch2/action-sheet1.html )

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 2–12。 动作表#2 ( ch2/action-sheet2.html )

清单 2–7。 动作单(ch2/action-sheet1.html )

`
<a href=“#logout” data-transition=“slidedown”>Logout

Are you sure?

Yes, I’m Sure!
No Way!

这也是我们第一次接触到数据主题属性。我们可以简单地用这个属性为所有 jQuery Mobile 组件添加对比和样式。在我们的对话框例子中，我们可以设置背景和按钮的主题。当设计对话框按钮时，通常会对比取消和动作按钮的风格。jQuery Mobile 中的主题在第七章中有更深入的讨论。

对话框 UX 指南

设计 UI 组件时，一致性是最重要的设计目标。关于特定对话指南，苹果手机界面指南 ⁴ 中的一些提示包括:

提示:对话框的最大宽度默认设置为 500 像素。这将在较小的移动显示器上全屏显示，并在桌面和平板电脑屏幕上显示 500 像素宽。如果您需要覆盖默认宽度，请在您的主题中使用以下 CSS:

ui-dialog .ui-header, .ui-dialog .ui-content, .ui-dialog .ui-footer { max-width: 100%; }

警报:

优先选择显示影响应用使用的重要信息的警告(参见图 2–10)。警报是而不是用户发起的。
警告按钮要么是浅色的，要么是深色的。对于单按钮警报，按钮总是浅色的。对于双按钮对话框，左按钮总是暗的，右按钮总是亮的(参见图 2–9)。
在一个双按钮对话框中，建议一个人们可能会选择的有利动作，取消该动作的按钮应该在左边，并且是深色的(参见 Figure 2–9)。
在两个按钮的对话框中，建议一个有潜在风险的操作(删除)，取消操作的按钮应该在右边并且是浅色的。通常执行危险动作的按钮是红色的。

行动表:

优选行动表来收集对用户发起的任务的确认(参见图 2–11)。行动表也可用于为用户提供当前任务的选择范围(参见图 2–12)。
动作表总是包含至少两个按钮，允许用户选择如何完成他们的任务。
包括允许用户放弃任务的取消按钮。“取消”按钮位于操作表的底部，以鼓励用户在做出选择之前通读所有选项。“取消”按钮的颜色应该与背景的颜色相对应。

⁴ 见developer . apple . com/library/IOs/documentation/user experience/conceptual/mobile hig/mobile hig . pdf。

有媒体查询的响应式布局

要使用 jQuery Mobile 创建响应式设计，建议利用 CSS3 媒体查询的强大功能。 ⁵

`@media (orientation: portrait) {
/* Apply portrait orientation enhancements here… */
}

@media (orientation: landscape) {
/* apply landscape orientation enhancements here… */
}`

在某些情况下，jQuery Mobile 会为您创建响应式设计。下图显示了 jQuery Mobile 的响应式设计在纵向和横向模式下对表单字段定位的表现。例如，在纵向视图中(参见图 2–13)，标签位于表单字段上方。或者，在横向重新定位设备时(参见图 2–14)，表单域和标签并排出现。这种响应式设计基于设备可用的屏幕空间提供了最有用的体验。jQuery Mobile 为您提供了许多这些好的 UX 原则！

⁵ 见www . w3 . org/tr/CSS 3-mediaquiries/。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 2–13。 (肖像)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 2–14。 (风景)有求必应

**警告:**如果你在 iOS 中启动图 2–14(ch2/responsive.html)并切换到横向，你可能已经注意到了移动 Safari 中的 iOS 缩放问题。 ⁶ "当 meta viewport 标签设置为content="width=device-width, initial-scale=1"或任何允许用户缩放的值时，将设备更改为横向会导致页面缩放大于 1.0。因此，页面的一部分被从右边裁剪掉，用户必须双击(有时不止一次)才能让页面正确缩放到视图中。”

在 Mobile Safari 解决此问题之前，您有几个选项可以解决此问题:

您可以禁用缩放。尽管如此，禁用缩放是一种您希望尽量避免的做法，因为它会破坏可访问性。<meta name="viewport" content="width=device-width, **minimum-scale=1.0, maximum-scale=1.0"**
当用户缩放时，您可以动态调整 meta 标签。 ⁷

⁶ 见【http://filamentgroup.com/examples/iosScaleBug/】的。

⁷ 见adaptio . com/journal/4470/。

在上面的例子中(参见图 2–13)，jQuery Mobile 能够通过利用最小-最大宽度媒体特性来应用响应式设计。例如，当浏览器支持大于 450 像素的宽度时，表单元素浮动在其标签旁边。支持文本输入行为的 CSS 如下所示:

`label.ui-input-text {
display: block;
}

@media all and (min-width: 450px){
label.ui-input-text { display: inline-block; }
}`

**重要提示:**Windows Phone 7(Internet Explorer 8 及以下版本)不支持媒体查询。如果你想在不支持媒体查询的浏览器上支持响应式设计，建议利用 respond . js .^{8respond . js 为不支持媒体查询的浏览器提供媒体查询支持。}

还有一组有限的特定于 Webkit 的媒体扩展，您可能会觉得有用。例如，要为配有高清 retina 显示屏的新款 iOS 设备应用 CSS 增强功能，您可以使用webkit-min-device-pixel-ratio媒体功能:

//Webkit-specific media query for the iOS high-resolution Retina display @media screen and **(-webkit-min-device-pixel-ratio: 2)**{ // Apply retina display enhancements }

作为对 iOS 用户的额外奖励，jQuery Mobile 包含了一整套针对 retina 优化的图标，可以自动应用于任何具有非常高分辨率显示屏的 iOS 设备。

**注意:**如果你选择在单独的文件中分离特定于媒体的样式，你可以用 HTML <链接>媒体属性来引用它们。这种做法促进了关注点的良好分离，但是从性能的角度来看，这是因为每个单独的文件都需要一个额外的 HTTP 请求:

⁸ 见【https://github.com/scottjehl/Respond】??。

总结

在这一章中，我们回顾了 jQuery Mobile 的基础知识，并了解了如何快速启动和运行 jQuery Mobile 应用。我们回顾了两种 jQuery Mobile 页面模板，并讨论了它们在性能和导航流程方面的优势。我们还看了一下 jQuery Mobile 如何将我们的语义标记增强为优化的移动体验。此外，我们回顾了所有可用的页面转换，并讨论了每种转换的常见使用模式。最后，我们看到了许多不同的对话框样式来创建一个有效的界面，用于通知用户或从用户那里收集反馈。在第三章中，我们将进一步了解 jQuery Mobile 的导航，以及如何最好地利用页眉和页脚控件来管理我们的移动应用数据。

三、使用标题、工具栏和标签栏导航

所有移动应用都需要工具栏来帮助导航或管理屏幕上的数据。在本章中，我们将回顾提供这些特性的 jQuery Mobile 组件。主要组件是页眉和页脚。标题通常用于显示页面标题，并且可以选择包含控件来帮助导航或管理屏幕上的对象。页脚的设计类似于页眉，但它们的职责通常由工具栏或选项卡栏来管理。此外，我们将发现分段控件的功能。分段控件是一种特殊的控件，我们可以将其放置在页眉或页脚中，以帮助显示数据的可选视图。我们将探索每一个组件，并演示如何用文本、标准图标甚至自定义图标来设计它们的样式。

标题栏

标题栏显示当前屏幕的标题。此外，您可以添加用于导航的按钮，或者添加管理页面中各项的控件。虽然页眉是可选的，但它通常用于为活动页面提供标题。让我们从查看标题结构开始，看看如何向标题添加额外的控件来帮助管理页面上的项目。

页眉基础

关于标题有几点很重要。它们包括:

标题是用data-role="header"属性定义的。
标题是一个可选组件。
除非您明确启用后退按钮，否则它不会显示在标题中。下一节将详细讨论后退按钮。
您可以使用data-theme属性调整页眉的主题。如果没有为标题设置主题，它将从页面组件继承主题。默认主题是黑色(data-theme="a")。
默认情况下，所有标题级别(H1-H6)的样式相同，以保持视觉一致性。
您可以通过添加data-position="fixed"属性来固定标题。

**提示:**您也可以使用表头作为分段控件，如图图 3–5 所示。分段控件允许用户显示相关数据的不同视图。

表头结构

页眉的基本用途是简单地显示活动页面的标题。最简单形式的标题如下所示。

`<div data-role=“header”>

Header Title

表头定位

有三种样式可用于定位页眉。它们包括:

默认:一个默认的标题将显示在屏幕的顶部，当你滚动时会滑出屏幕。`

Default Header
`
固定:一个固定的标题将始终保持定位，并在屏幕的顶部边缘可见。然而，在滚动事件期间，标题将会消失，直到滚动完成。我们可以创建一个添加了data-position="fixed"属性的固定头。`

Fixed Header
`

**注意:**为了实现真正的固定工具栏，浏览器需要支持位置:固定或溢出:自动。幸运的是，WebKit (iOS5)的新版本开始支持这种行为。在 jQuery Mobile 中，我们可以通过将touchOverflowEnabled配置选项设置为 true 来启用这种行为(参见第八章的中的“可配置的 jQuery Mobile 选项”了解更多细节)。

响应式:当我们创建一个全屏页面时，内容会边对边地出现，页眉和页脚会根据触摸响应相应地出现和消失。全屏模式对于照片或视频显示非常有用。要创建全屏页面，将data-fullscreen="true"添加到页面容器中，并在页眉和页脚元素中包含data-position="fixed"属性(参见清单 3–1)。例如，在图 3–1 中，我们有一个显示照片的全屏页面。如果用户点击屏幕，页眉和页脚将相应地出现和消失(参见图 3–2)。在本例中，我们有一个照片查看器，其页眉显示图像面板的计数器，页脚显示一个工具栏来帮助导航、发送电子邮件或删除图像。

清单 3–1。 【全屏(ch3/position-fullscreen.html )

`<div data-role=“page” data-fullscreen=“true”>
<div data-role=“header” data-position=“fixed”>

Header

Footer

图 3–1。 全屏

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 3–2。 全屏显示，页眉页脚响应灵敏

**注意:**在 iOS 和 Android 中查看 jQuery Mobile 页面时，浏览器的地址栏会被隐藏。这是一个方便的功能，允许用户查看更多可用的屏幕空间，并平滑过渡。但是，如果您需要查看地址栏，向下拖动页面，地址栏将变得可见。

标题按钮

有些情况下，您需要在标题中添加控件来帮助管理屏幕内容。例如,“保存”和“取消”按钮是编辑数据时可用的常见控件。有三种样式的按钮可以添加到标题中。它们包括:

只有文本的按钮。
只有图标的按钮(参见图 3–4)。一个纯图标按钮需要添加两个属性:data-icon和data-iconpos="notext"。关于data-icon值的完整列表，请参考表 4-1 。
一个带有文本和图标的按钮(参见图 3–3)。这个按钮还需要data-icon属性。这里显示了每个示例:`
Done

<a href=“#” data-icon=“plus” data-iconpos=“notext”>

<a href=“#” data-icon=“check”>Done`

带文字和图标的按钮

在图 3–3 中，我们有一个带有“取消”和“完成”按钮的标题来帮助管理电影评论的条目。如清单 3–2 所示，按钮被设计成普通链接。我们还为每个按钮附加了一个带有data-icon属性的图标。要创建纯文本按钮，只需删除data-icon属性。在标题中，按钮是根据它们的语义顺序来定位的。例如，第一个按钮左对齐，第二个按钮右对齐。如果你的标题只包含一个按钮，你可以通过添加class="ui-btn-right"到按钮的标记来右对齐按钮。

清单 3–2。 【页眉按钮】(ch3/header-buttons.html )

Cancel

Add Review

Done

` ![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https://gitee.com/OpenDocCN/vkdoc-frontend-framework-zh/raw/master/docs/pro-jqmobi/img/0303.jpg&pos_id=img-6t0AxJA8-1723865485861)

图 3–3。 带按钮的表头

只有图标的按钮

jQuery Mobile 包括几个标准图标(见表 4-1 )，你可以用它们来创建纯图标按钮。例如，"info"图标通常与"flip"转换一起使用，以显示配置选项或更多信息。使用标准图标消耗很少的空间，并且它们的含义在所有设备上相对一致。例如，如果我们想在现有列表中添加一个条目，我们可以选择显示一个"plus"图标，允许用户在列表中添加条目(见图 3–4)。在这个例子中，我们有一个电影评论列表，用户可以点击“add”图标来创建他们的评论。要创建一个只有图标的按钮，需要两个属性，如清单 3–3 所示。

清单 3–3。 【标题与图标(ch3/header-icons.html )

Reviews

图 3–4。 带图标的表头

带有分段控件的标题栏

分段控件是一组内嵌控件，每个控件显示不同的视图。例如，图 3–5 中的分段控件按特定类别显示电影。这种分段控制允许用户根据他们选择的类别快速观看电影:在影院，即将上映，或顶级。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 3–5。 分段控制

建议将分段控件放置在主标题内，如清单 3–4 所示。如果您选择将标题定位为固定控件，这种定位允许分段控件与主标题无缝集成。通过增加一些小的样式更新，我们现在有了一个分段的控件，允许用户在不同的视图中快速查看数据！

清单 3–4。 【分段控制】ch3/header-segmented-control.html

<div data-role="header" data-theme="b" data-position="fixed"> <h1>Movies</h1> <div class="segmented-control ui-bar-d"> `

         In Theatres


        Coming Soon


        Top Rated

固定截断的页眉或页脚…

jQuery Mobile 将截断带有长标题的页眉和页脚(参见图 3–6)。当文本太长时，jQuery Mobile 会截断文本并在末尾添加省略号。如果您遇到这种情况，并且想要显示完整的文本(参见图 3–7，您可以调整 CSS 选择器来解决这个问题，如清单 3–5 所示。

清单 3–5。 截断修罗(ch3/truncation-fixed.html )

.ui-header .ui-title, .ui-footer .ui-title { **margin-right: 0 !important; margin-left: 0 !important;** } 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 3–6。 截断发行

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 3–7。 截断修复

后退按钮

后退按钮(见图 3–8)会在 UX 设计师中引起激烈的争论。我们应该添加自己的后退按钮，还是应该利用一些设备和所有浏览器上可用的硬件/软件后退按钮？幸运的是，jQuery Mobile 为您提供了全局自动启用或禁用它们的选择。您还可以选择逐页添加或删除它们。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 3–8。 后退按钮必须明确启用。

默认情况下，jQuery Mobile 中的后退按钮是禁用的。如果您需要 back 按钮出现在页眉中，您有几个选项来添加它们:

您可以通过在页面容器上添加data-auto-back-btn="true"来将后退按钮添加到特定页面。
绑定mobileinit选项时，通过将addBackBtn选项设置为true可以全局启用后退按钮。设置此选项后，如果历史堆栈中存在页面，后退按钮将自动出现。在幕后，一个后退按钮简单地执行window.history.back()。如下所示，您也可以覆盖默认的后退按钮文本和主题。例如，用上一页的标题标记后退按钮是很常见的。data-back-btn-text属性可以用于这个约定。有关设置全局配置选项的更多详细信息，请参考第八章，配置 jQuery Mobile。

// Globally enable the back button, set the default back button text,
// and set back button theme
$KaTeX parse error: Expected '}', got 'EOF' at end of input: \dotsction(){ **$ .mobile.page.prototype.options.addBackBtn = true;**
$. m o bi l e . p a g e . p ro t o t y p e . o pt i o n s . ba c k Bt n T e x t = " P re v i o u s "; * * * *$ .mobile.page.prototype.options.backBtnTheme = “b”;
});`

此外，如果您全局启用了后退按钮，您可以通过在页面标题上添加data-add-back-btn="false"属性来选择禁用特定页面上的后退按钮。这将从特定页面的页眉中删除“后退”按钮。

**提示:**虽然后退按钮在所有的移动浏览器中都可用，但是在 jQuery Mobile 中有一些特殊情况下，您可能需要后退按钮或替代导航:

建议所有页面都包含一个返回主屏幕的链接，无论是通过链接的徽标还是主页按钮。目标是永远不要让用户陷入导航流程的死胡同。当用户访问深层链接或书签页面时，可能会出现一种常见的情况。如果你唯一的导航机制是后退按钮，并且历史堆栈是空的，那么自动后退按钮将不会出现，让用户陷入死胡同。因此，在标题栏的右侧包含一个主页图标链接是一个非常好的做法。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传在设计 PhoneGap 集成时，如果您的目标操作系统不支持基于硬件的导航，如 iOS 或 WebOS，您需要考虑使用后退按钮。

回溯链接

如果你想创建一个行为类似后退按钮的按钮，你可以添加data-rel="back"到任何锚元素:

<a href="home.html" **data-rel="back"** data-role="button">Go Back</a>

使用data-rel="back"，链接将模仿后退按钮，后退一个历史条目(window.history.back())，并忽略链接的默认 href。对于 C 级浏览器或不支持 JavaScript 的浏览器，data-rel将被忽略，而href属性将作为后备。

页脚栏

页脚组件与页眉组件几乎相同，只有很小的不同。主要的区别是页脚在按钮的放置上更加灵活。例如，当处理标题时，第一个按钮左对齐，第二个按钮右对齐。页脚将其按钮从左到右按顺序内联放置。这种灵活性允许我们将页脚设计成工具栏或标签栏。我们将看到两者的例子，但首先让我们从基础开始。

页脚基础知识

页脚有几点很重要。它们包括:

页脚用data-role="footer"属性定义。
页脚将其按钮从左到右按顺序内联放置。这允许灵活地创建工具栏和选项卡栏。
页脚是一个可选组件。
您可以使用data-theme属性调整页脚的主题。如果没有为页脚设置主题，它将从页面组件继承主题。默认主题是黑色(data-theme="a")。
您可以通过添加data-position="fixed"属性来固定页脚。
默认情况下，所有页脚(H1-H6)的样式相同，以保持视觉一致性。

页脚结构

最简单的页脚如下面的代码所示。data-role="footer"是唯一必需的属性。在页脚中，您可以包含任何语义 HTML。页脚通常用于包含工具栏和选项卡控件。工具栏提供了一组用户可以在当前上下文中执行的操作。选项卡栏让用户能够在应用的不同视图之间切换。

`<div data-role=“footer”>

**提示:**要将页脚定位在屏幕的最底部，向页脚元素添加data-position="fixed"。默认页脚位于内容之后，而不是屏幕的底部边缘(参见图 3–9)。例如，如果你的内容只占了屏幕高度的一半，页脚就会出现在屏幕的中间。我们可以通过向页脚元素添加data-position="fixed"来将页脚定位在屏幕的底部。

<div data-role="footer" **data-position="fixed"**> 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 3–9。 默认页脚位置

页脚定位

页眉的三种定位样式也适用于页脚。它们包括:

Default:默认页脚位于内容部分之后。例如，如果您的内容超出了视窗的高度，页脚将不会显示，直到您滚动到内容的末尾。`
`
固定:一个固定的页脚，将始终保持定位，并在屏幕的底部边缘可见。然而，在滚动事件期间，页脚将会消失，直到滚动完成。我们可以创建一个添加了data-position="fixed"属性的固定页脚。`<div data-role=“footer” data-position=“fixed”>

Fixed Footer
`
响应式:当我们创建一个全屏页面时，内容会边对边显示，页眉和页脚会根据触摸响应相应地出现和消失。全屏模式对于照片或视频显示非常有用。要创建全屏页面，请将data-fullscreen="true"添加到页面容器中，并在页眉和页脚元素中包含data-position="fixed"属性。有关示例，请参考图 3–1。

页脚按钮

有三种样式的按钮可以添加到页脚。它们包括:

只有文本的按钮。这种风格的按钮在工具栏中工作良好，因为工具栏的外观没有选项卡栏大。页脚中的普通链接将显示为纯文本按钮:<a href="#">Sync</a>
A button with only an icon. This style of button also works well within a toolbar. An icon-only button requires the addition of two attributes, data-icon and data-iconpos="notext":

<a href="#"data-icon = " plus " data-iconpos = " notext ">
关于data-icon值的完整列表，请参考表 4-1 。
带有文本和图标的按钮。这种风格的按钮在标签栏中工作良好:
Home

提示: jQuery Mobile 是一个优秀的框架，用于构建能够在移动、平板和桌面浏览器上响应显示的应用。虽然页眉和页脚组件在移动设备上提供了一种“原生”的感觉，但在桌面上看时，它们的翻译效果很差。如果您的 jQuery Mobile 应用针对不同的浏览器大小，您可能希望省略页眉和页脚组件。或者，您可能会发现直接在内容部分中添加自定义页眉或页脚标记更为有益。

工具栏

工具栏有助于管理当前屏幕的内容。例如，邮件应用经常使用工具栏来帮助管理你的电子邮件。在用户需要执行与当前屏幕上的对象相关的操作的情况下，工具栏提供了有用的体验。构建工具栏时，我们可以选择使用图标或文本。在下面的例子中，我们将看到工具栏的例子，其中包含了图标、文本和分段控件样式的按钮。

带图标的工具栏

只有图标的工具栏是最常见的。它们的主要优势是，与文本相比，它们占用的屏幕空间更少。选择图标时，重要的是选择表达清晰含义的标准图标。在图 3–10 中，我们有一个显示电影评论的屏幕。为了帮助用户管理评论，我们还包括了一个带有标准图标的工具栏。工具栏允许用户执行五个

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 3–10。 带有标准图标的工具栏可能的操作:

Navigate to pre-audit.
Reply and comment.
Mark comments as favorites.
Add a new comment to the movie.
Navigate to the next comment.

创建工具栏需要最少的标记(见清单 3–6)。我们只需要一个无序的按钮列表，用data-role="navbar"属性包装在一个 div 中。工具栏按钮是灵活的，将根据设备的宽度均匀分布。在这个例子中，我们使用了 jQuery Mobile 标准可用图标套件中的图标(参见表 4-1 )。

清单 3–6。 工具栏(ch3/toolbar-icons-standard.html )

**提示:**如果你想在导航条上添加耀斑，那么导航条组件同样可以很好地与自定义图标配合使用！如果对自定义图标解决方案感兴趣，我们将在清单 3–10 中演示该解决方案。

带有分段控件的工具栏

您还可以在工具栏中放置一个分段控件，使用户可以访问应用数据的不同视角或不同的应用视图。在 Figure 3–11 中，我们将分段控件放置在工具栏中，以允许用户显示他们日历数据的不同视图。您可能已经注意到，这个分段控件(参见清单 3–7)与我们的标题示例中显示的分段控件示例相同。我们可以在页眉和页脚组件中重用分段控件。分段控件只是一组包装在控件组中的按钮，并根据您的需要进行样式化。在下一节中，我们将展示带有标签栏的分段控件的另一种用法！

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 3–11。 工具栏带分段控件

清单 3–7。 工具栏带有分段控件(ch3/toolbar-segmented-control.html)

List Day Month `

标签栏

我们也可以将页脚设计成标签栏。选项卡栏使用户能够在应用的不同视图之间切换。如果你不太熟悉标签栏，它们的行为与你在网上找到的基于标签的导航非常相似。选项卡栏通常作为一个持久的页脚放置在屏幕的底部边缘，从应用的任何位置都可以访问它。为了清晰起见，标签栏通常包含同时显示图标和文本的按钮。在下面的例子中，我们将看看三种风格的标签栏。第一个选项卡栏示例将包括 jQuery Mobile 中已经提供的几个标准图标。其次，我们将看到一个使用自定义图标的标签栏示例。jQuery Mobile 可以方便地集成您选择的自定义图标。最后，我们将在同一个 UI 中组合标签栏和分段控件，以允许用户在同一个屏幕上导航和查看不同形式的数据。

带有标准图标的标签栏

最简单的标签栏解决方案(参见图 3–12)是使用 jQuery Mobile 的标准图标集，如清单 3–8 中所详述。关于标准 jQuery Mobile 图标的完整列表，请参考表 4-1 。如果你使用这些标准图标，你的标签栏就不需要额外的样式。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 3–12。 带标准图标的标签栏

清单 3–8。 带标准图标的标签栏(ch3/tabbar-icons-standard.html )

持久标签栏

为了使我们的标签栏持久，我们需要添加一个额外的属性到页脚。为了在页面转换过程中保持页脚的持久性，将data-id属性添加到每个选项卡栏的页脚，并将它们的值设置为相同的标识符。例如，在清单 3–9 中，每个标签栏都包含一个标识符data-id="main-tabbar"。有了这项新增功能，您的标签栏将在过渡期间保持不变。例如，如果我们点击一个不活动的标签栏，屏幕会“滑动”,而标签栏在转换过程中保持固定不变的状态。此外，当从一个选项卡转换到另一个选项卡时，为了保持每个选项卡栏的活动状态，添加一个类ui-state-persist和ui-btn-active。下面突出显示了持久选项卡栏的标记。

清单 3–9。 持久标签栏

标签栏带有自定义图标

想在标签栏或工具栏上添加自定义图标吗？jQuery Mobile 支持添加自定义图标，只需要很少的标记。例如，在下面的标签栏示例中(参见图 3–13)，我们包含了来自 Glyphish 的几个第三方图标。 ¹

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 3–13。 带自定义图标的标签栏

为了支持自定义图标的添加，我们需要添加data-icon="custom"属性、一些用于定位的自定义样式，以及将每个按钮与其样式相关联的 id 引用。下面的清单 3–10 重点介绍了这些新增内容。

¹ 见[glyphish.com/](http://glyphish.com/)。图标由 Joseph Wain 创作，并根据知识共享署名 3.0 美国许可证进行许可。

**提示:**这个自定义图标解决方案同样适用于工具栏。事实上，通过简单地删除按钮上的文本，就可以创建一个带有自定义图标的细长工具栏！

清单 3–10。 标签栏带有自定义图标(ch3/tabbar-icons-custom.html)

带分段控件的标签栏

至此，我们已经看到了标签栏和分段控件的例子。把两者融合在一起怎么样！我们可以利用持久标签栏来帮助导航我们的站点，并且我们可以利用分段控件来显示我们数据的不同视图。在下面的示例中(参见图 3–14)，我们创建了一个用户界面，允许用户在家庭、电影和剧院选项卡之间导航。当用户选择电影选项卡时，我们在标题中显示分段控件，以允许用户帮助过滤他们的电影列表。在本例中，我们完全删除了标题文本，因为活动选项卡突出显示了页面的标题。有关本示例的完整源代码列表，请参考 CH3/tabbar-and-segmented-control . html。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 3–14。 带分段控件的标签栏

总结

在本章中，我们发现了 jQuery Mobile 中几乎所有可能的页眉和页脚组合。jQuery Mobile 有一组丰富的组件，可以极大地简化导航和数据管理需求。我们看到标签栏解决方案提供了在应用内不同视图之间切换的能力。我们回顾了几种有助于管理当前屏幕上的对象的工具栏配置。我们还添加了分段控件，让用户能够访问应用数据的不同视角。此外，每个组件的外观都很灵活。每个组件都是可主题化的，我们可以用图标、文本或者两者的组合来设计我们的按钮。在下一章中，我们将回顾所有可能的按钮样式选项，并看看我们可以在 jQuery Mobile 中用于基于表单的开发的组件。

四、表单元素和按钮

移动应用必须支持高效的用户体验。由于这个原因，很少看到有大量表单字段的移动应用。事实上，我们的应用对用户的要求越少，用户和应用的效率就越高。移动网络正在慢慢采用设备 API¹，这些 API 允许开发者通过最少的用户交互来收集大量信息。例如，74%的移动开发者在他们的应用 ² 中使用地理定位。地理定位允许我们通过简单的点击确认按钮来收集用户的国家、州、城市、邮政编码和地址信息。尽管这些设备 API 使用户体验更加高效，但对于设备不支持地理定位的用户来说，我们仍然需要用表单字段的传统方式来捕获数据。

在这一章中，我们将从最流行的移动用户界面组件开始，按钮。按钮的样式和配置方式有很多种。我们将会看到用文本、图标以及两者的组合来设计按钮的例子。

接下来，我们将详细了解每一个标准 HTML 表单组件，并确定它们能很好解决的常见用例。您会惊喜地发现每个表单组件都被 jQuery Mobile 自动优化了——这个特性可以方便地在所有设备上提供统一的用户体验。我们还将回顾每个表单元素特有的 jQuery Mobile 数据属性，并查看修改这些属性来配置和样式化表单的代码示例。此外，我们将回顾与每个表单组件相关联的插件，看看当用户需要更动态的体验时，我们如何利用插件 API 来动态地创建、增强和更新我们自己的组件。

¹ 见[www.w3.org/2009/dap/](http://www.w3.org/2009/dap/)。

² 见[www.webdirections.org/sotmw2011/](http://www.webdirections.org/sotmw2011/)。

最后，我们将探索Mobiscroll插件的特性，它为日期选择器、搜索过滤器或自定义列表提供了一个优雅而灵活的界面。

按钮

按钮是移动应用中最常用的控件，因为它们提供了非常高效的用户体验。我们已经在很多例子中看到了按钮，包括对话框、动作表、分段控件和标题。jQuery Mobile 按钮有多种风格。我们有链接按钮、表单按钮、图像按钮、纯图标按钮以及文本和图标相结合的按钮。正如所料，jQuery Mobile 按钮的样式都是一致的。无论你有一个链接按钮还是一个基于表单的按钮，框架都会给它们相同的样式。在回顾这些按钮时，我们还将确定每种按钮的常见使用案例。

链接按钮

链接按钮是最常用的按钮类型。每当你需要将一个普通的链接设计成一个按钮时，给链接添加data-role=”button”属性(参见 Figure 4–1)。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 4–1。 链接按钮

默认情况下，页面内容部分中的按钮被设计为块级元素，因此它们将填充其外部容器的整个宽度。然而，如果你想要一个更紧凑的按钮，其宽度仅与里面的文本和图标一样，那么添加data-inline="true"属性(参见清单 4–1)。

清单 4–1。 链接按钮(ch4/link-buttons.html)

<a href="#" **data-role="button"**>Link button</a> <a href=*"#"* **data-role=*"button"* data-inline=*"true"***>Disagree</a> <a href=*"#"* **data-role=*"button"* data-inline=*"true"***>Agree</a>

**注意:**如果你想让按钮并排放置，占据整个屏幕宽度，使用两列网格。我们将在第六章的中更详细地探讨灵活的网格布局。具体来说，对于 2 列网格布局，参考列表 6-2 。

表单按钮

基于表单的按钮(见清单 4–2)实际上比基于链接的按钮更容易设计，因为你不需要做任何修改。为了简单起见，框架会自动将任何button或input元素转换成一个移动样式的按钮(见图 4–2)。

清单 4–2。 表单按钮(ch4/form-buttons.html)

<button type="submit">Button element</button> <input type="button" value="button" /> <input type="submit" value="submit" /> <input type="reset" value="reset" /> 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 4–2。 表单按钮

提示如果您想要禁用表单按钮或任何其他控件的自动初始化，您可以将data-role=”none”属性添加到元素中，jQuery Mobile 不会增强该控件:

<button data-role=”none”>Button element</button>

图像按钮

将图像设计成按钮只需要您最少的努力。当用锚点标签包装图像时，不需要修改(参见图 4–3 和清单 4–3 中的相关代码)。但是，当将图像附加到输入元素时，您需要添加data-role="none"属性。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 4–3。 图像按钮

清单 4–3。 图片按钮(ch4/image-buttons.html)

 <input type="image" src="cloud.png" data-role="none" /> ![images](https://gitee.com/OpenDocCN/vkdoc-frontend-framework-zh/raw/master/docs/pro-jqmobi/img/U0401.jpg)

用图标设计按钮的样式

jQuery Mobile 包括一组在移动应用中常用的标准图标，其中包括一个白色图标精灵，该精灵在图标后面有一个半透明的黑色圆圈，以确保在任何背景颜色上都有良好的对比度(参见图 4–4)。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 4–4。 带有标准图标的按钮

通过添加data-icon属性并指定显示哪个图标，可以将图标添加到任何按钮上(参见清单 4–4)。

清单 4–4。 按钮带图标(CH4/icon-Buttons-standard . html)

 <input type="button" value="Delete" **data-icon="delete"**/> <a href=*"#"* data-role=*"button"* **data-icon=*"plus"***>Button link</a> <button **data-icon=*"minus"***>Button element</button>

Table 4–1 包含每个data-icon属性值及其对应的图标图像。除了data-icon="custom".之外，每个属性值都有一个关联的图像，我们将在下一节看到一个与自定义图标集成的例子。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

纯图标按钮

只有图标的按钮通常用在标题、工具栏和标签栏中，因为它们占用很少的空间(见 Figure 4–5)。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 4–5。 图标按钮

在上一章中，我们看到了几个纯图标按钮的例子。我们最初在图 3-4 中看到一个"plus"图标，允许用户点击“添加”图标来创建一个新的电影评论。我们还看到工具栏中使用的纯图标按钮(见图 3-10 )和标签栏(见图 3-12 )来帮助表达每个按钮的含义。要创建一个只有图标的按钮，将data-iconpos=”notext”属性添加到按钮中(参见清单 4–5)。

清单 4–5。 图标专用按钮(ch4/icon-only-buttons.html)

<a href=*""* data-role=*"button"* data-icon=*"plus"* **data-iconpos=*"notext"***></a> <button data-icon=*"search"* **data-iconpos=*"notext"***>Search</button>

**注意:**每个白色图标后面的半透明黑色圆圈确保了在任何背景颜色上的良好对比度，并且与 jQuery Mobile 主题化系统配合良好。例如，在下图中，第一行中的图标采用 data-theme="a "样式，第二行中的图标采用 data-theme="c "样式。为了保持视觉一致性，建议创建一个 18 × 18 像素的白色图标，保存为 PNG-8，具有 alpha 透明度。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图标定位

默认情况下，图标是左对齐的(参见图 4–6)。然而，你可以通过添加按钮的data-iconpos属性来明确地将图标对齐到任意一边，该属性的值对应于对齐的一边(参见清单 4–6)。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 4–6。 图标定位

清单 4–6。 图标专用按钮(ch4/icon-positioning.html)

<a href=”#” data-role=*"button"* data-icon=*"arrow-u"***data-iconpos="top"**> <a href=*"#"* data-role=*"button"* data-icon=*"arrow-l"* **data-iconpos=”left”**> <a href=*"#"* data-role=*"button"* data-icon=*"arrow-r"* **data-iconpos=*"right"***> <a href=*"#"* data-role=*"button"* data-icon=*"arrow-d"* **data-iconpos=*"bottom"***>

带有自定义图标的按钮

还记得我们在图 3-13 中给我们的标签栏添加自定义的图形图标吗？我们可以以同样的方式将按钮与自定义图标集成在一起(参见图 4–7)。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 4–7。 自定义图标

然而，通过按钮，我们可以应用一个更简单的解决方案，如清单 4–7 所示。向按钮添加自定义图标需要两个步骤:

Add a data-icon attribute to the link. The value of this property must uniquely identify the custom icon. For example, data-icon=”my-custom-icon”.
Create a CSS class property to set the background source for our custom image. The name of the property must be named ". ui-icon- 。 For example, if our data icon value is “my-custom-icon”, our new CSS class attribute will be ". ui-icon-my-custom-icon ”。

清单 4–7。 自定义图标集成(CH4/icon-buttons-Custom . html)

<style> ** .ui-icon-custom1 {** background**:**url(data:image/png;base64,iVBORw0...)50% 50% no-repeat; background-size: 14px 14px; } </style> <a href="#" data-role="button" **data-icon="custom1"**>Custom</a>

**提示:**我们定制图像的背景源是用数据 URI 方案加载的。这可能是从外部加载小图像的一种高性能替代方法。例如，通过内嵌自定义图像，我们消除了一个 HTTP 请求。然而，这种技术的主要缺点是 base64 编码的字符串比原始图像大 1/3 倍。要查看完整的 base64 编码字符串，请参考 ch4/icon-buttons-custom.html 中的源代码清单。

分组按钮

到目前为止，所示的每个按钮示例都将每个按钮与其他按钮分开。但是，如果您想将按钮组合在一起，可以将按钮包装在一个控件组中。例如，我们在第三章中的分段控制示例就是这样分组的(参见图 4–8)。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 4–8。 分组按钮

为了获得这种效果，将一组按钮包装在具有data-role=”controlgroup”属性的容器中(参见清单 4–8)。

清单 4–8。 分组按钮(CH3/header-segmented-control . html)

`<div data-role=“controlgroup” data-type=“horizontal”>
    In Theatres
    Coming Soon
    Top Rated

默认情况下，框架会将按钮垂直分组，移除所有的边距，并在按钮之间添加边框。此外，为了在视觉上增强该组，第一个和最后一个元素将采用圆角样式。

因为默认情况下按钮是垂直放置的，所以我们可以通过添加data-type=”horizontal”属性来设计它们的水平样式。与占用其外部容器整个宽度的垂直按钮不同，水平按钮只和其内容一样宽。

**注意:**水平分组按钮时，控件组宽度超出屏幕宽度时会换行。

主题按钮

像所有 jQuery Mobile 组件一样，按钮将从它们的父容器继承主题。此外，当你需要用不同的颜色设计按钮时，你可以将你选择的主题应用到任何添加了data-theme属性的按钮上(参见清单 4–9)。

清单 4–9。 主题按钮(ch2/action-sheet2.html)

<a href="#home" data-role="button" **data-theme="b"**>YouTube</a> <a href="#home" data-role="button" **data-theme="b"**>Facebook</a> <a href="#home" data-role="button" **data-theme="b"**>Email</a> <a href="#home" data-role="button" **data-theme="c"**>Cancel</a>

例如，在我们的对话框和动作表示例中，我们根据第二章中的“对话框 UX 指南”来设计按钮，以提高可用性(参见图 4–9)。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 4–9。 主题按钮

动态按钮

button插件是自动增强原生按钮的小部件。我们可以利用这个插件来动态地创建、启用和禁用按钮。如果您需要在代码中动态创建按钮，有两个选项可用。您可以使用标记驱动的方法或者通过显式设置button插件上的选项来动态创建按钮。

在标记驱动的解决方案中，我们为新按钮创建 jQuery Mobile 标记，将其附加到内容容器中，并对其进行增强(参见清单 4–10)。

清单 4–10。 创建带有标记驱动选项的动态按钮(ch4/dynamic-buttons.html)

`// Add link button to content container and enhance it
$( ‘Star’ )
.appendTo( “.ui-content” )
.button();

// Add form button after the first button and enhance it $( ‘’ )
.insertAfter( “#b1” )
.button();`

对于选项驱动的解决方案，我们创建一个本地链接，将按钮插入页面，然后应用我们的按钮增强(参见清单 4–11)。

清单 4–11。 创建带有插件驱动选项的动态按钮(ch4/dynamic-buttons.html)

// Create a new button, insert it after button 2, and enhance it. $**(** '<a href="#">Home</a>' **)** .insertAfter( “#b2” ) **.**button**({** 'icon'**:**'home'**,** 'inline'**:** true**,** 'shadow'**:** true**,** 'theme'**:** 'b' **})**;

在我们的最后一个例子中，我们创建了多个表单按钮，而不是为每个按钮单独调用button插件，我们通过触发页面容器上的“create”方法来增强它们(参见清单 4–12)。button插件还公开了enable和disable方法，我们可以利用它们来动态启用和禁用按钮，如清单 4–12 所示。

清单 4–12。 创建按钮并动态禁用/启用按钮(ch4/dynamic-buttons.html)

`// Create multiple form buttons
$( ‘Button3’ ).insertAfter( “#button2” );
$( ‘Button4’ ).insertAfter( “#button3” );

// Enhance all widgets on the page
$.mobile.pageContainer.trigger( “create” );

// Disable form button
$( “#button3” ).button( “disable” );

// Enable form button
$( “#button3” ).button( “enable” );`

**提示:**触发页面容器上的“create”方法会增强页面上的所有组件:$ . mobile . page container . trigger(" create ")；当您需要一次增强多个页面组件时，这是一种方便的方法。

按钮选项

框架用来动态增强按钮的button插件有以下选项:

**corners** *boolean*

**default:** true

默认情况下，按钮会有圆角。将此选项设置为 false 将删除圆角。该选项也作为数据属性公开:data-corners=”false”.

$( “#button1” ).button({ corners: false });

**icon** *string*

**default:** null

设置按钮的图标。该选项也作为数据属性公开:data-icon=”plus”.

$( “#button1” ).button({ icon: “home” });

**iconpos** *string*

**default:** “left”

设置图标位置。可能的值有:“left”, “right”, “top”, “bottom”,和“notext”。“notext”值将把按钮显示为没有文本的纯图标按钮。该选项也作为数据属性公开:data-iconpos=”notext”.

$( “#button1” ).button({ iconpos: “notext” });

**iconshadow** *boolean*

**default: true**

如果为真，框架将为图标添加阴影。该选项也作为数据属性公开:data-iconshadow=”false”.

$( “#button1” ).button({ iconshadow: false });

**initSelector** *CSS selector string*

**default:** "button, [type='button'], [type='submit'], [type='reset'], [type='image']"

initSelector 用于定义选择器(元素类型、数据角色等。)用于触发widget插件的自动初始化。例如，默认选择器匹配的所有元素都将被button插件增强。要覆盖这个选择器，绑定到mobileinit事件，并根据需要更新选择器:

$( document ).bind( "mobileinit", function(){ $.mobile.button.prototype.options.initSelector = "..."; });

**inline** *boolean*

**default:** false

如果设置为 true，这将使按钮显示为内嵌按钮。默认情况下，按钮将占用其容器的整个宽度。相比之下，内嵌按钮只占用文本的宽度。该选项也作为数据属性公开:data-inline=”true”.

$( “#button1” ).button({ inline: true });

**shadow** *boolean*

**default:** true

默认情况下，按钮会应用投影。将此选项设置为 false 将会移除投影。该选项也作为数据属性公开:data-shadow=”false”.

$( “#button1” ).button({ shadow: false });

按钮方法

button插件有以下几种方法:

**enable**:启用被禁用的按钮
$( "#button1" ).button( "enable" );

**disable**:禁用一个按钮
$( "#button1" ).button( "disable" );

按钮事件

button插件支持以下事件:

create创建按钮时触发

创建自定义按钮时会触发此事件。它不用于创建自定义按钮。

$( '<a href="#" id="button2">Button2</a>' ) .insertAfter( "#button1" ) .button({ theme: 'a', create: function(event) { console.log( "Creating button..." ); } })

表格元素

jQuery Mobile 将增强所有原生表单元素，使它们在移动设备上更具吸引力和可用性。然而，不支持这些增强功能的旧浏览器将逐渐回归到原生元素，以保持可用的体验。

表格基础知识

在 jQuery Mobile 中构建基于表单的应用的方法与我们传统上在 Web 上构建表单的方法非常相似。尽管为了清楚起见，应该指定一个action和method属性，但它们不是必需的。默认情况下，action默认为当前页面的相对路径，可以用$.mobile.path.get()找到，未指定的method默认为get。

当提交表单时，它们会以默认的“slide”转换方式转换到下一页。然而，我们可以用之前用来管理链接的相同数据属性来配置表单转换行为(参见清单 4–13)。

清单 4–13。 提交表格(ch4/form-request.html)

`<form action=“/save.html” method=“post” data-transition=“pop”>
        <label for=“email”>Email:
        <input type=“email” name=“email” id=“email” value=“” />
        <button type=“submit” name=“submit”>Submit

我们可以向表单元素添加以下属性来管理转换或禁用 Ajax:

data-transition=”pop”
data-direction=”reverse”
data-ajax=”false

**注意:**确保每个表单的id属性在整个站点中是唯一的，这一点很重要。如前所述，在转换时，jQuery Mobile 会将“from”和“to”页面同时加载到 DOM 中，以完成平稳的转换。为了避免任何冲突，表单 id 必须是唯一的。

**提示:**在构建表单时，建议将每个表单字段与其对应的标签进行语义关联。标签的 for 属性和输入的 id 属性建立了这样的关系:

`<label for=“name”>Name:

<input type=“text” name=“name” id=“name” value=“” />`

该协会创建了辅助技术可访问的符合 508 的应用。政府或国家机构经常要求可访问性。您可以使用 WAVE ³ 工具测试您的移动应用的兼容性。

文本输入

文本输入是移动设备上最麻烦的表单域。除非你是世界短信冠军，否则在物理或虚拟的 QWERTY 键盘上输入文本是低效的。这就是为什么自动收集尽可能多的用户信息是有价值的。如前所述，设备 API 可以帮助简化这种用户体验。尽管最小化这些繁琐的任务是一个好的目标，但有时我们必须通过文本输入收集用户反馈。最常见的文本表单字段如图 4–10 所示。

³ 见[wave.webaim.org/](http://wave.webaim.org/)。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 4–10。 文字输入

从开发人员的角度来看，我们可以创建 jQuery Mobile 表单和文本输入，而不需要额外的标记(参见清单 4–14)。可选地，我们可以为我们的文本输入选择一个合适的主题，方法是将data-theme属性添加到 input 元素中，以增强表单字段的对比度。

清单 4–14。 文本输入(ch4/text-inputs.html)

<input **type="text"** name="text" value=”” id=”text” **placeholder="Text"**/> <input **type="number"** name="number" value="" id=”number” /> <input **type="email"** name="email" value="" id="email" data-theme=”d” /> <input **type="url"** name="url" value="" id="url" /> <input **type="tel"** name="tel" value="" id=”tel” /> <input **type=*"search"*** name=*"search"* value=*""* *id="search"* /> **<textarea** cols=*"40"* rows=*"8"* name=*"textarea"* id=*"textarea"*></textarea>

**提示:**要以一种可访问的方式隐藏标签，将 ui-hidden-accessible 样式附加到元素上。例如，我们将这种技术应用于图 4-10 中的搜索字段。这将优雅地隐藏标签，同时保持 508 合规性:

<label for="search" **class="ui-hidden-accessible"**>Search</label> <input type="search" id="search" placeholder="Search" />

构建表单时，将输入字段与其语义类型相关联是很重要的。这种联系有两个好处。首先，当输入字段获得焦点时，它会用适当的键盘提示用户。例如，指定为type=”number”的字段将自动提示数字键盘(参见图 4–11)。同样，映射有type=”tel”的字段将提示电话专用键盘(参见图 4–12)。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 4–11。 数字键盘

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 4–12。 电话键盘

此外，该规范允许浏览器应用适用于字段类型的验证规则。提交表单时，浏览器对自动验证的支持仍然很少，但会随着时间的推移而改进。有关移动输入类型和属性的完整列表，请参考 Peter-Paul Koch 的“移动输入测试” ⁴ 。它显示了所有可用的移动输入类型和属性及其相关的浏览器支持。

大多数移动浏览器都支持的另一个特性是placeholder属性。该属性为文本输入添加一个提示或标签，当字段获得焦点时自动消失(参见清单 4–14)。

**注意:**搜索字段(type=”search”)的样式和行为与其他输入类型略有不同。它包含一个左对齐的“搜索”图标，它的角是药丸形状，当用户输入文本时，一个“删除”图标将出现在右对齐的位置，以帮助清除字段。

动态文本输入

textinput插件是自动增强文本输入和文本区域的小部件。我们可以利用这个插件来动态地创建、启用和禁用文本输入(参见清单 4–15)。

清单 4–15。 textinput 插件示例(ch4/dynmic-text-input.html)

`// Create text input with markup-driven options
$( ‘’ )
.insertAfter( “#firstName” )
.textinput();

// Create text input with plugin-driven options
$( ‘’ )
        .insertAfter( “#text1” )
        .textinput({
                theme: ‘c’
        });

// Disable text input
$( “#text1” ).textinput( “disable” );

// Enable text input
$( “#text1” ).textinput( “enable” );`

⁴ 见[www.quirksmode.org/html5/inputs_mobile.html](http://www.quirksmode.org/html5/inputs_mobile.html)。

文本输入选项

textinput插件有以下选项:

**initSelector** *CSS selector string*

**default:** "input[type='text'], input[type='search'], :jqmData(type='search'), input[type='number'], :jqmData(type='number'), input[type='password'], input[type='email'], input[type='url'], input[type='tel'], textarea"

initSelector 用于定义选择器(元素类型、数据角色等。)用于触发widge t 插件的自动初始化。例如，默认选择器匹配的所有元素都将被textinput插件增强。要覆盖这个选择器，绑定到mobileinit事件，并根据需要更新选择器:

$( document ).bind( "mobileinit", function(){ $.mobile.textinput.prototype.options.initSelector = "..."; });

**theme** *string*

**default:** null. Inherited from parent.

为文本元素设置主题样本配色方案。这是一个从 a 到 z 的字母，映射到你的主题中包含的样本。默认情况下，如果没有显式设置，所有元素都将继承与其父容器相同的样本颜色。该选项也作为数据属性公开:data-theme=”a”.

$( “#text1” ).textinput({ theme: "a" });

文字输入方法

textinput插件有以下方法:

**enable:** 启用一个禁用的文本输入或文本区。

$( “textarea” ).textinput( “enable” );

disable: 禁用一个 textinput 或 textarea。

$( “textarea” ).textinput( “disable” );

文本输入事件

textinput插件支持以下事件:

**create** *triggered when a text input is created*

创建自定义文本输入时触发此事件。它不用于创建自定义输入。

$( '<input type="text" name="text2" id="text2" value="" />' ) .textinput({ theme: 'c', create: function(event) { console.log( "Creating text input..." ); } }) .insertAfter( “#text1” );

选择菜单

jQuery Mobile framework 将自动增强所有本地 select 元素，不需要额外的标记(参见清单 4–16)。

清单 4–16。 原生选择菜单(CH4/select-menu-Native . html)

<label for="genre">Genre:</label> <select name="genre" id="genre"> <option value="action">Action</option> <option value="comedy">Comedy</option> <option value="drama">Drama</option> </select>

这个转换将用一个 jQuery Mobile 样式的按钮替换原来的 select，该按钮包含一个右对齐的向下箭头图标。默认情况下，点击此选择按钮将启动操作系统的本机选择选择器(参见图 4–13)。或者，正如我们将在下一节中看到的，我们可以配置 jQuery Mobile 来显示定制的选择菜单。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 4–13。 选择菜单

用户做出选择后，选择按钮将显示所选选项的值。如果文本值对于按钮来说太大，文本将被截断，并显示一个尾随省略号。此外，在选择多个选项后，多选按钮将显示一个计数气泡或标记(参见图 4–13)。这是一种突出显示所选选项数量的视觉效果。

**注意:**在创建带有multiple="multiple"属性的选择菜单时，一些移动平台不支持多选功能。因此，建议在必要时使用自定义菜单。

自定义选择菜单

作为本地呈现选项列表的替代，我们可以选择在自定义 HTML/CSS 视图中呈现我们的选择菜单(参见图 4–14)。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 4–14。 自定义选择菜单

对于这个视图，向 select 元素添加一个data-native-menu="false"属性(参见清单 4–17)。

清单 4–17。 自定义选择菜单(ch4/select-menu-cstom.html)

<label for="genre">Genre:</label> <select name="genre" id="genre" **data-native-menu="false"** data-theme=”a”> <option value="">Select one...</option> <option value="action">Action</option> <option value="comedy">Comedy</option> <option value="drama">Drama</option> </select>

下面列出了客户优势与本地优势的对比。

定制优势:

为所有设备提供统一的用户体验。
自定义菜单为多选选项列表提供了通用支持。
添加了一种处理占位符选项的优雅方式。我们将在下一节回顾占位符选项。
自定义菜单是可主题化的(参见清单 4–17)。

定制缺点:

不如本地呈现的选择菜单性能好。当比较包含许多选项的菜单时，这一点会更加明显。

**注意:**你也可以利用Mobiscroll ⁵ 插件作为定制选择菜单的另一种选择。在本章的最后，我们包括了这个插件的几个例子，因为我们演示了它的日期选择器和搜索过滤器的用法。

占位符选项

占位符是自定义选择菜单独有的功能。占位符有三个好处:

占位符要求用户做出选择。默认情况下，如果没有配置占位符，将选择列表中的第一个选项。
占位符可用于显示未选中选择按钮的提示文本(参见图 4–14)。例如，未选中的票据交付字段显示为占位符文本“选择一个…”。
显示选项列表时，一个占位符也作为标题出现(参见图 4–14)。

⁵ 见[code.google.com/p/mobiscroll/](http://code.google.com/p/mobiscroll/)。

我们可以通过三种方式配置占位符:

我们可以向没有值的选项添加文本。
<option value="">Select one...</option>
当选项包含文本和值时，我们可以将data-placeholder=”true”属性添加到选项中:
<option value="null" data-placeholder="true">Select one...</option>
当您想使该字段成为没有提示文本或标题的必填字段时，请使用空选项:
<option value=""></option>

动态选择菜单

selectmenu插件是自动增强选择菜单的小部件。有了这个插件，我们可以动态地创建、启用、禁用、打开和关闭选择菜单(参见清单 4–18)。

清单 4–18。 动态选择菜单(CH4/Dynamic-select-menu . html)

`// Create select menu with markup-driven options
$( ‘…’ )
        .insertAfter( “#foo” )
        .selectmenu();

// Create select menu with plugin-driven options
$( ‘…’ )
        .insertAfter( “#select1” )
        .selectmenu({
                theme**😗* “e”,
                overlayTheme**😗* “c”,
                disabled**😗* false**,**
                nativeMenu**😗* false
        });`

选择菜单选项

selectmenu插件有以下选项:

**corners** *boolean*

**default:** true

与其他按钮类型一样，默认情况下，选择菜单按钮具有圆角。将此选项设置为 false 将删除圆角。该选项也作为数据属性公开:data-corners=”false”.

$( “#select1” ).selectmenu({ corners: false });

**disabled** *boolean*

**default:** false

禁用元素。selectmenu插件也有enable和disable方法来动态启用和禁用控件。

$( “#select1” ).selectmenu({ disabled: true });

**hidePlaceholderMenuItems** *boolean*

**default:** true

默认情况下，当选择菜单打开时，占位符菜单项将从视图中隐藏。要使占位符项可选，请将该值设置为 false。

$( “#select1” ).selectmenu({ hidePlaceholderMenuItems: false });

**icon** *string*

**default:** “arrow-d”

设置选择按钮的图标。该选项也作为数据属性公开:data-icon=”plus”.

$( “#select1” ).selectmenu({ icon: “plus” });

**iconpos** *string*

**default:** “right”

设置图标位置。可能的值有:“left”, “right”, “none”,和“notext”.``“notext”值将选择显示为一个只有图标的按钮，没有占位符文本。“none”值将完全移除图标。这个选项也作为一个数据属性公开:data-iconpos=”none”.

$( “#select1” ).selectmenu({ iconpos: “notext” });

**iconshadow** *boolean*

**default:** true

如果为真，框架将为图标添加阴影。该选项也作为数据属性公开:data-iconshadow=”false”.

$( “#select1” ).selectmenu({ iconshadow: false });

**initSelector** *CSS selector string*

**default:** "select:not(:jqmData(role='slider'))"

initSelector 用于定义选择器(元素类型、数据角色等。)来触发widget插件的自动初始化。例如，默认选择器匹配的所有元素都将被selectmenu插件增强。要覆盖这个选择器，绑定到mobileinit事件，并根据需要更新选择器:

$( document ).bind( "mobileinit", function(){ $.mobile.selectmenu.prototype.options.initSelector = "..";

});

**inline** *boolean*

**default:** false

如果设置为 true，这将使选择按钮显示为内嵌按钮。默认情况下，选择按钮将占用其容器的整个宽度。相比之下，内嵌按钮只占用占位符文本的宽度。这个选项也公开为一个数据属性:data-inline=”true”。

$( “#select1” ).selectmenu({ inline: true });

**nativeMenu** *boolean*

**default:** true

默认情况下，选择按钮将启动操作系统的本机选择选择器。要在自定义 HTML/CSS 视图中呈现选择菜单，请将该值设置为 false。该选项也作为数据属性公开:data-native-menu=”false”.

$( “#select1” ).selectmenu({ nativeMenu: false });

**shadow** *boolean*

**default:** true

默认情况下，选择按钮将应用投影。将此选项设置为 false 将会移除投影。该选项也作为数据属性公开:data-shadow=”false”.

$( “#select1” ).selectmenu({ shadow: false });

**theme** *string*

**default:** null. Inherited from parent.

设置元素的主题样本配色方案。这是一个从 a 到 z 的字母，映射到你的主题中包含的样本。默认情况下，这将继承与其父容器相同的样本颜色。该选项也作为数据属性公开:data-theme=”a”.

$( “#select1” ).selectmenu({ theme: "a" });

选择菜单方式

selectmenu插件有以下方法:

**enable:** 启用一个禁用的选择菜单

$( “#select1” ).selectmenu( “enable”);

**disable** : 禁用选择菜单。

$( “#select1” ).selectmenu( “disable” );

**open** : 打开一个关闭的选择菜单。此方法仅适用于自定义选择。

$( “#select1” ).selectmenu( “open” );

**close:** 关闭一个打开的选择菜单。此方法仅适用于自定义选择。

$( “#select1” ).selectmenu( “close” );

**refresh** : 更新自定义选择菜单。

这将更新自定义选择菜单，以反映本地选择元素的值。例如，如果本地选择的 selectedIndex 被更新，我们可以调用“刷新”来重建自定义选择。如果传递一个 true 参数，可以强制进行刷新和重建。

`// Select the third menu option and refresh the menu
        var myselect = $( “#select1” );
        myselect[0].selectedIndex = 2;
        myselect.selectmenu( “refresh” );

// refresh and rebuild the list
myselect.selectmenu( “refresh”, true );`

选择菜单事件

selectmenu插件支持以下事件:

**create:**创建选择菜单时触发

创建自定义选择菜单时会触发此事件。它不用于创建自定义元素。

$( '<select name="select2" id="select2">...</select>' ) ** .**insertAfter**(** “#select1”**)** .selectmenu**({** create**:** function**(**event**) {** console.log**(** "Creating select menu..." **);** **}** ** });**

单选按钮

单选按钮将用户的选择限制为单一项目(参见图 4–15)。例如，从几个选项中选择一个应用设置通常是通过单选按钮来完成的，单选按钮因其简单易用而受到青睐。用户可以点击单选按钮的任意位置进行选择，jQuery Mobile 将自动更新底层的表单控件。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 4–15。 单选按钮

在清单 4-19 中，我们添加了三个额外的属性来帮助样式和定位我们的单选按钮。第一个属性，data-role=”controlgroup”,用圆角优雅地将按钮组合在一起。第二个属性, data-type=”horizontal”,覆盖默认的定位——垂直——并水平显示按钮。最后，我们为我们的按钮设置了主题。默认情况下，单选按钮将继承其父控件的主题。然而，如果你想为你的单选按钮应用一个替换主题，你可以将data-theme属性添加到相应单选按钮的标签中。

清单 4–19。 水平单选按钮(ch4/radio-buttons.html)

`
    Map view:

    <label for=“map1” data-theme=”b”>Map

<label for=“map2” data-theme=”b”>Satellite

<label for=“map3” data-theme=”b”>Hybrid

**注意:**如果水平单选按钮的容器不够宽，无法在一行中显示，它们将会换行。如果换行有问题，您可以减小字体大小:.ui-controlgroup-horizontal .ui-radio label **{**font-size: 13px !important;**}**

动态单选按钮

checkboxradio插件是一个可重用的小部件，可以自动增强单选按钮和复选框。有了这个插件，我们可以动态地创建、启用、禁用和刷新我们的单选按钮(参见清单 4–20)。

清单 4–20。 动态单选按钮(CH4/Dynamic-radio-buttons . html)

`// Create radio buttons with markup-driven options
$( ‘
        Map view:

        Map…’)
**        .insertAfter(** “#radio1” );
$.mobile.pageContainer.trigger( “create” );

// Create radio buttons with plugin-driven options
$( ‘
        Map view:

        Map…’ )
        .insertAfter( “#radio1” );
$( “#map1” ).checkboxradio({ theme**😗* “e” });
$( “#map2” ).checkboxradio({ theme**😗* “e” });
$.mobile.pageContainer.trigger( “create” );`

复选框和单选按钮选项

checkboxradio插件有以下选项:

**initSelector** CSS 选择器字符串

**default:** "input[type='checkbox'],input[type='radio']"

initSelector 用于定义选择器(元素类型、数据角色等。)用于触发小部件插件的自动初始化。例如，默认选择器匹配的所有元素都将被checkboxradio插件增强。要覆盖这个选择器，绑定到mobileinit事件，并根据需要更新选择器:

$( document ).bind( "mobileinit", function(){ $.mobile.checkboxradio.prototype.options.initSelector = "..."; });

**theme** *string*

**default:** null. Inherited from parent.

为复选框或单选按钮设置主题样本配色方案。这是一个从 a 到 z 的字母，映射到你的主题中包含的样本。默认情况下，这将继承与其父容器相同的样本颜色。该选项也作为数据属性公开:data-theme=”a”.

$( “#element1” ).checkboxradio({ theme: "a" });

复选框和单选按钮方法

checkboxradio插件有以下方法:

**enable:** 启用已禁用的复选框或单选按钮。

$(“#element1” ).checkboxradio( “enable” );

disable: disable a checkbox or radio button.

$( “#element1” ).checkboxradio( “disable” );

**refresh:** 更新自定义复选框或单选按钮

这将更新自定义复选框或单选按钮，以反映本地元素的值。例如，我们可以动态检查一个单选按钮并调用“refresh”来重新构建增强的控件。

// Dynamically set a checkbox or radio element and refresh it. $( "#elem1" ).attr( "checked", true ).checkboxradio( "refresh" );

复选框和单选按钮事件

checkboxradio插件支持以下事件:

**create:**创建复选框或单选按钮时触发

创建自定义复选框或单选按钮时会触发此事件。它不用于创建自定义元素。

$( '#element1' ) .checkboxradio({ theme: "e", create: function(event) { console.log( "Creating new element..." ); } });

复选框

复选框是一种常见的表单控件，允许用户从许多选项的列表中选择多个值(参见 Figure 4–16)。用户可以点击复选框按钮的任意位置进行选择，jQuery Mobile 将自动更新底层的表单控件。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 4–16复选框

样式和定位复选框的标记与我们之前用于单选按钮的标记相同(参见清单 4–21)。同样，我们添加了三个附加属性来帮助设置复选框的样式和位置。第一个属性data-role=”controlgroup”,用圆角优雅地将复选框元素组合在一起。第二个属性data-type=”horizontal”,覆盖按钮的默认垂直位置，并水平显示它们。最后，我们为我们的按钮设置了主题。默认情况下，复选框将继承其父控件的主题。然而，如果你想应用一个替换主题，你可以在相应复选框的标签上添加data-theme属性。

清单 4–21。 横向复选框(ch4/checkboxes.html)

`<fieldset data-role=“controlgroup” data-type=“horizontal”>
        Genre:

       <label for=“c1” data-theme=”c”>Action

<label for=“c2” data-theme=”c”>Comedy

<label for=“c3” data-theme=”c”>Drama

**注意:**如果水平复选框的容器不够宽，无法在一行中显示，它们将会换行。如果换行有问题，您可以减小字体大小:

.ui-controlgroup-horizontal .ui-checkbox label { font-size: 11px !important; }

动态复选框

同样，checkboxradio插件是自动增强复选框和单选按钮的小部件。有了这个插件，我们可以动态地创建、启用、禁用和刷新我们的复选框(参见清单 4–22)。checkboxradio插件的完整列表在“动态单选按钮”一节中已有记载。单选按钮和复选框可以重用相同的 API。

清单 4–22。 动态复选框(CH4/Dynamic-checkboxes . html)

`// Create checkboxes with markup-driven options
$( ‘
        Genre:

        Action…’ )
        .insertAfter( “#element1” );
$.mobile.pageContainer.trigger( “create” );

// Create checkboxes with plugin-driven options
$( ‘
        Genre:

        Action…’ )
        .insertAfter( “#create-cb2” );
$( ‘#c3’ ).checkboxradio({ theme: “e” });
$( ‘#c4’ ).checkboxradio({ theme: “e” });
$.mobile.pageContainer.trigger( “create” );`

滑块

滑块是一种常见的表单控件，允许用户在最小和最大范围之间选择一个值(见图 4–17)。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 4–17。 滑块

例如，在我们的例子中，我们用一个滑块来调整音量或亮度，以调整高低设置之间的范围。我们可以调整滑块的最小和最大边界，还可以设置它的默认值。用户可以通过滑动控件或在滑块的相应文本字段中输入值来调整滑块。如清单 4–23 所示，jQuery Mobile 不需要额外的标记来增强我们的滑块。任何带有type=”range”的输入元素都会被自动优化。

清单 4–23。 滑块(ch4/slider.html)

<label for="volume">Volume:</label> <input type="range" name="volume" id="volume" value="5" min="0" max="9"/>

滑块由两个可主题化的组件组成。有被称为滑块的前景组件和被称为轨道的背景组件。这些组件中的每一个都可以单独设置主题。要主题化滑块，将data-theme=”a”属性添加到input元素中。此外，为了给音轨添加主题，将data-track-theme=”a”属性添加到input元素中:

<input type="range" name="brightness" id="brightness" min="0" max="10" **data-theme="b"** **data-track-theme="a"**/>

动态滑块

slider插件是一个多用途的小工具，可以自动增强滑块和开关控制。有了这个插件，我们可以动态地创建、启用、禁用和打开开关控制(参见清单 4–24)。

清单 4–24。 动态滑块(ch4/dynamic-slider.html)

`// Create slider with markup-driven options
$( ‘Brightness:
<input type=“range” name=“s1” id=“s1” min=”0” max=”9” data-theme="d”/>’)
** .insertAfter(** “#element1” );
$( “#s1” ).slider();

// Create slider with plugin-driven options
$( ‘Brightness:
    ’ )
        .insertAfter( “#create-s2” );
$( “#s1” ).slider({
        theme: “d”,
        trackTheme: “a”,
        disabled: false
});`

滑块选项

slider插件有以下选项:

**disabled** *boolean*

**default:** false

禁用控件。slider插件也有enable和disable方法来动态启用和禁用控件。

$( “#element1” ).slider({ disabled: true });

**initSelector** CSS 选择器字符串

**default:** "input[type='range'], :jqmData(type='range'), :jqmData(role='slider')"

initSelector 用于定义选择器(元素类型、数据角色等。)来触发widget插件的自动初始化。例如，默认选择器匹配的所有元素都将被 slider插件增强。要覆盖这个选择器，绑定到mobileinit事件，并根据需要更新选择器:

$( document ).bind( "mobileinit", function(){ $.mobile.slider.prototype.options.initSelector = "...";

});

**theme** *string*

**default:** null. Inherited from parent.

设置滑块的主题样本配色方案。这是一个从 a 到 z 的字母，映射到你的主题中包含的样本。默认情况下，这将继承与其父容器相同的样本颜色。该选项也作为数据属性公开:data-theme=”a”.

$( “#element1” ).slider({ theme: "a" });

**trackTheme** *string*

**default:** null. Inherited from parent.

为滑块滑动的轨道设置主题样本配色方案。这是一个从 a 到 z 的字母，映射到你的主题中包含的样本。默认情况下，如果没有显式设置，它将继承与其父容器相同的样本颜色。该选项也作为数据属性公开:data-track-theme=”a”.

$( “#element1” ).slider({ trackTheme: "a" });

滑块方法

slider插件有以下几种方法:

enable: 启用禁用的滑块或开关控制。

$(“#element1” ).slider( “enable” );

disable: 禁用滑块或开关控制。

$( “#element1” ).slider( “disable” );

refresh: 更新自定义滑块或开关控件。

这将更新自定义滑块或开关，以反映本机元素的值。例如，我们可以动态更新我们的开关或滑块，并调用“refresh”来重建控件。

// Set the switch to “on” and refresh it var switch **=** $**(** "#switch1" **);** switch**[**0**].**selectedIndex **=** 1**;**

switch**.**slider**(** "refresh" **);**

// Maximize the slider's volume control and refresh it $**(** "#volume" **).**val**(** 10 **).**slider**(** "refresh" **);**

滑块事件

slider插件支持以下事件:

create: 当滑块或开关控件被创建时触发

创建自定义滑块或开关控件时会触发此事件。它不用于创建自定义元素。

$( '<select name="switch2" id="switch2">...</select>' ) .insertAfter( “#element1” ) .slider({ create: function(event) { console.log( "Creating new element..." ); });

开关控制

开关控制(见图 4–18)通常用于管理布尔开/关标志。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 4–18。 开关控制

例如，开关控件通常是允许用户操作应用设置的首选方式，因为它们简单易用。要翻转开关，用户可以轻触控件或滑动开关。要创建一个开关控件，添加一个带有data-role=”slider”和两个选项的选择元素来管理开/关状态(参见清单 4–25)。

清单 4–25。 开关控制(ch4/switch-control.html)

<label for="alerts">Alerts:</label> <select name="slider" id="alerts" **data-role="slider"**> **<option value="off">Off</option>** **<option value="on">On</option>** </select>

开关控件也由两个主题化组件组成。有被称为滑块的前景组件和被称为轨道的背景组件。这些组件中的每一个都可以单独设置主题。要主题化滑块，将data-theme=”a”属性添加到select元素中。此外，为了给音轨添加主题，将data-track-theme=”a”属性添加到select元素中:

<select name="slider" **data-theme="b" data-track-theme="c"** data-role="slider"> <option value="off">Off</option> <option value="on">On</option> </select>

动态开关控制

如前所述，slider插件是自动增强开关控制的小部件。有了这个插件，我们可以动态地创建、启用、禁用和打开开关(参见清单 4–26)。slider插件的完整列表在之前的“动态滑块”一节中有记载。相同的 API 可重复用于滑块和开关。

清单 4–26。 动态开关控件(CH4/Dynamic-switch-control . html)

`// Create switch with markup-driven options
$( ‘’ )
.insertAfter( “#foo” )
.slider();

// Create switch with plugin-driven options
$( ‘…’ )
        .insertAfter( “#switch1” )
        .slider({
                theme: “b”,
                trackTheme: “c”,
                disabled: false
        });`

原生形态元素

jQuery Mobile 自动增强页面中定义的所有表单元素。然而，如果你想回到本地控制(见图 4–18)这可以在全局或现场级配置(见清单 4–27)。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 4–19。 原生形态元素

清单 4-27。 原生表单元素(ch4/native.html)

`// Selectively choose which elements are native with data-role=”none”
Text Input
<input type=“text” name=“name” id=“name” value=“” data-role=“none” />

Switch:
<select name=“slider2” id=“slider2” data-role=“none”>
Off
On

// Globally configure native elements by selector
$KaTeX parse error: Expected '}', got 'EOF' at end of input: \dotsn(){ **$ .mobile.page.prototype.options.keepNative = “input, select”;**
});`

要单独设置一个表单字段以显示其本地控件，请将data-role=”none”属性添加到其元素中。或者，当mobileinit事件初始化时，您可以通过设置keepNative选择器来全局配置哪些表单元素应该本地呈现。例如，在清单 4–27 中，我们配置了我们的选择器来自动显示所有的input和select元素的原始外观。我们将在第八章“配置 jQuery Mobile”中更深入地讨论如何配置 jQuery Mobile。

HTML5 提供了几个新的输入类型来帮助收集日期和时间输入。我们现在有了时间、日期、月、周、日期时间和日期时间本地输入类型(参见清单 4–28)。

清单 4–28。 HTML5 日期(ch4/dates.html)

<input **type="time"** name="time" /> <input **type="datetime-local"** name="dtl" /> <input **type="date"** name="date" /> <input **type="month"** name="month" /> <input **type="week"** name="week" /> <input **type="datetime"** name="dt" />

对这些新的 HTML5 输入类型的支持依赖于浏览器(见[www.quirksmode.org/html5/inputs.html](http://www.quirksmode.org/html5/inputs.html))。支持这些功能的新浏览器将显示有用的日期选择器(见图 4–20),不支持的浏览器将退回到文本输入。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 4–20。 HTML5 日期

Mobiscroll Date Picker

Mobiscroll ⁶ 是一款针对触摸屏设备优化的日期选择器。Mobiscroll API 是可配置的， ⁷ 允许显示多个日期和时间组合(参见图 4–21)。此外，Mobiscroll 是可主题化的，也可以定制以显示任何必要的数据(参见图 4–22)。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 4–21。 移动滚动日期选择器

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图 4–22。 用自定义列表移动鼠标

例如，我们可以更新 MobiScroll 选项来创建一个定制的电影搜索(参见清单 4–29)。Mobiscroll 插件是一个灵活的控件，可以用于许多不同的用例。

⁶ 见[code.google.com/p/mobiscroll/](http://code.google.com/p/mobiscroll/)。

⁷ 见 http://code.google.com/p/mobiscroll/wiki/Documentation 。

清单 4-29。【mobis roll(CH4/mobis roll . html)

`// Import the Mobiscroll resources

// Display the default date picker (see Figure 4–21).
$( “#element1” ).scroller();

// Display a custom filter for a movie search (see Figure 4–22).
$( “#element2” ).scroller({
        setText: ‘Search’,
        theme: ‘sense-ui’,
        wheels: [{
                ‘Rating’: { ‘5-star’: ‘*****’, ‘4–star’: ‘****’ … },
                ‘Genre’: { ‘action’: ‘Action’, ‘comedy’: ‘Comedy’, …},
                ‘Screen’: { ‘3d’: ‘3D’, ‘imax’: ‘IMAX’, ‘wide’: ‘Wide’ }
        }]
});`

总结

在本章中，我们回顾了每个标准 HTML 表单组件，并了解了 jQuery Mobile 如何自动增强每个组件，以便在所有设备上提供统一的用户体验。

当我们回顾每个组件时，我们讨论了它的用法，并确定了它能很好解决的常见用例。我们还回顾了每个表单元素特有的 jQuery Mobile 数据属性，并查看了如何修改这些属性来配置和样式化表单的代码示例。此外，我们回顾了与每个表单组件相关联的插件，并了解了当用户需要更动态的体验时，我们如何利用插件 API 来动态地创建、增强和更新我们自己的组件。

最后，我们探索了 Mobiscroll 插件的特性，并了解了它如何为日期选择器、搜索过滤器或自定义列表提供优雅而灵活的界面。

在第五章中，我们的重点将从收集用户信息转移到呈现用户信息。特别是，我们将看到我们可以样式化和配置信息列表的许多方法。

jQuery Mobile 高级教程（一）

零、简介

你将学到什么

这本书是给谁的

下载代码

一、为什么选择 jQuery Mobile？

普遍接入

跨所有移动平台的统一 UI

简化的标记驱动开发

Page Header

Page Footer

渐进增强

响应式设计

一次构建，随处运行的神话

响应式

主题风格

可及

总结

二、jQuery Mobile 入门

jQuery Mobile 页面模板

Page Header

Page Footer

jQuery Mobile 页面增强功能

Page Header

Page Footer

loading

多页模板

设置内部页面的页面标题

单页文档与多页文档

Ajax 驱动的导航

$.mobile.changePage()

用法

论据

Hi

配置 Ajax 导航

过渡

对话框

链接对比页面配置

行动表

对话框 UX 指南

警报:

行动表:

有媒体查询的响应式布局

总结

三、使用标题、工具栏和标签栏导航

标题栏

页眉基础

表头结构

Header Title

表头定位

Default Header

Fixed Header

Header

Footer

标题按钮

带文字和图标的按钮

Add Review

只有图标的按钮

Reviews

带有分段控件的标题栏

固定截断的页眉或页脚…

后退按钮

回溯链接

页脚栏

页脚基础知识

页脚结构

页脚定位

Fixed Footer

页脚按钮

工具栏

带图标的工具栏

带有分段控件的工具栏

标签栏

带有标准图标的标签栏

持久标签栏

标签栏带有自定义图标

带分段控件的标签栏

总结

四、表单元素和按钮

按钮