jQuery Mobile JavaScript 库是一种强大的方式，允许用户通过 Web 浏览器直接连接到触摸友好的应用程序，从而让移动和平板设备可以访问移动应用程序。

为了使用本文中的任何示例，您必须下载或包括远程托管的 jQuery Mobile 框架文件，您可以在 中找到相关的链接。

对话框和弹出窗口

对话框是一个重要的 UI 元素，提示用户作出响应，或者只是显示信息。对话框最常用于向用户提供选项，根据用户的响应执行某些命令。通常情况下，您可以通过两种方式提供对话框，作为模式或者非模式窗口（使用 jQuery Mobile，它们可显示为一个模式对话框）。模式对话框阻止用户与对话框下面的 Web 页面进行交互，需要得到用户的响应，它们才可以继续。

要使用 jQuery Mobile 创建一个对话框，您必须在您想打开的超链接上使用一个 data-rel 属性作为 dialog 窗口，并将其值指定为 dialog。下面的代码显示如何将一个简单的 Web 页面超链接转换为一个将关联 Web 页面打开为一个对话框的超链接：

<a href="dialog.html" data-rel="dialog">Open dialog</a>

默认情况下，jQuery Mobile 框架为 Web 页面添加圆角、边距、深色背景，使它显示为放置在 Web 页面之上的一个对话框。

有几种方法可以关闭对话框。第一个选项是简单地链接到另一个页面，这可以与用户的响应关联。对于需要采取的任何处理类型，这都将是一个不错的选择，例如，一个 Save 按钮可以链接到一个 Web 页面，该页面将某些信息保存到数据库，然后带着一个确认消息返回原始的父 Web 页面。第二个选项是在对话框中的超链接上使用 data-rel 属性，并将其值设置为 back，如以下代码所示。当在对话框中包括一个 Cancel 按钮时，这是一个不错的选项。

<a href="parent.html" data-rel="back">Cancel</a>

不幸的是，在不支持 JavaScript 的设备上无法使用该选项。最后的选项是使用 JavaScript 直接调用对话框的 close 方法：

$('#my-dialog').dialog('close');

您也可以使用多种对话框的转换，为您的移动网站添加不一样的风格。您可以通过将 data-transition 属性包含到您装对话框的超链接，来设置转换：

<a href="dialog.html" data-rel="dialog" data-transition="pop">Open dialog</a>

目前可用的数据转换是 pop、slidedown 和 flip；每个函数都正如您所假设的一样。与对话框有关的最常用转换是 pop，但肯定也有可以应用其他转换的场景。

工具栏

jQuery Mobile 框架包括页眉和页脚作为其标准工具栏；然而，由于有 navbar，工具栏也可以用来显示导航。在 jQuery Mobile 中，页眉的默认用法是作为固定在 Web 页面顶部的页面标题；在大部分情况下，页脚是 Web 页面中的最后一个元素，并且包括版权信息、其他超链接等内容。

创建页眉或页脚很容易，就像将 data-role 属性添加到 HTML 元素一样。 显示了创建一个 Header 和 Footer 工具栏有多简单。

清单 1. 利用 jQuery Mobile 框架创建一个页眉和页脚工具栏

<div data-role="header"> <h1>My Page Title</h1> </div> <!-- Some page content... --> <div data-role="footer"> <p>Copyright notice</p> </div>

您可以使用 CSS 自定义页眉和页脚，您也可以使用一些可用的 data- 属性，如 data-position，它可以设置工具栏的位置行为。该属性的默认值是 inline，但您也可以将它的值设置为 fixed，以便将工具栏（如，页眉）保持在一个特定的位置，即使在 Web 页面滚动时，工具栏的位置也不变。另一个值得一提的位置是 fullscreen。fullscreen 模式与 fixed 相同，但在用户开始与 Web 页面交互之前，工具栏不会显示在 Web 页面上。当用户与 Web 页面交互时，工具栏出现，使用户能够与它们进行交互，然后，当用户停止与页面进行交互时，工具栏消失（）。在显示一个视频播放器、照片集或类似的内容时，该选项十分有用。

清单 2. 利用 jQuery Mobile 框架将页眉和页脚工具栏设置为全屏

<div data-role="header" data-position="fullscreen"> <h1>My Page Title</h1> </div> <!-- Some page content... --> <div data-role="footer" data-position="fullscreen"> <p>Copyright notice</p> </div>

navbar 用于在一个页眉或页脚内显示多达五个按钮或导航项。根据您添加到 navbar 的按钮数量，它将这些按钮平均分布，使它们的大小都一样。要创建一个 navbar，您只需将一个 data-role 属性添加到环绕着一个列表的元素，并将其值设置为 navbar（）。该列表被动态转换成悬停、静态和活动状态的水平导航栏，全都可以使用 jQuery Mobile 主题框架进行定制。

清单 3. 使用 navbar 将一个列表转换为一个导航栏

<div data-role="header" data-position="fullscreen"> <div data-role="navbar"> <ul> <li><a href="#">Nav item 1</a></li> <li><a href="#">Nav item 2</a></li> </ul> </div> </div>

navbar 还有另一个很好的特性，您可以在每个按钮内包括自定义图标。jQuery Mobile 框架包括一组标准移动图标，您可以通过 data-icon 属性使用它们，您也可以使用自己创建或购买的任何自定义图标。

布局选项

格式化内容是一个重要途径，可以为用户提供一个可访问的方式来引用和收集在您的网站所提供的信息。随着移动 Web 流量以及对移动网站版本的需求的增加，格式化内容变得更加重要。我们不能够再仅仅依靠我们的用户坐在桌子前花时间与我们的网站进行交互。用户在移动，并且简单、漂亮的格式化内容比以往任何时候都更加重要。

在为移动 Web 页面格式化内容时，重要的是要记住，大多数移动设备的屏幕都较窄。也就是说，仍然存在大量要调用列网格的情况。jQuery Mobile 包括一个布局网格，您可以使用它通过 CSS 类轻松地创建一个数据网格（）。

清单 4. 使用一个布局网格来创建列

<div> <div> Left column </div> <div> Right column </div> </div>

从一组 HTML 元素创建网格时默认使用的 CSS 类是 ui-grid-* 类。星号（*）表示您在网格中选择使用的主题。（有关主题系统的更多信息，请参阅 。）您可以根据自己的选择创建多个列，但我建议最多只使用两列，并且只在有必要时使用。