Ajax 改造，第 2 部分: 使用 jQuery、Ajax、工具提示和 lightbox 改进现有站点

Ajax 技术改变了大型商业 Web 应用程序的外观，但是许多较小的 Web 站点都不拥有重新构建整个用户界面（UI）的资源。Ajax 的一些新特性能够解决实际中的界面问题并改善用户体验。通过本系列文章，您可以了解如何使用开源客户端库让您的用户界面变得更为时尚。本文将展示如何使用 简单的 lightbox 和工具提示技术消除弹出窗口和导航死角。在实现的过程中坚持渐进增强（progressive enhancement）原理，确保增强后的 UI 特性不损害站点的可访问性，确保站点严格遵守 Web 标准。

关于本文

本文将逐步引导您使用 Ajax 技术改进一个 Web 1.0 购物站点。您可以下载改进 “之前” 和 “之后” 的示例应用程序源代码，也可以在作者的 Web 服务器上看到运行的两个版本。除了 Ajax 技术和最佳实践之外，您还将了解到 Ajax 如何通过 渐进增强 原理改善用户体验。

本文假设您已经牢固掌握 HTML 和 CSS，基本了解 JavaScript 和 Ajax 编程技术。示例应用程序仅使用客户端代码构建；本文演示的技术适用于任何服务器端应用程序框架。要运行示例站点，至少需要一个在本地主机上运行的基本 Web 服务器。此外，您也可以仅跟随源代码在我的 Web 服务器上查看运行中的示例站点。

回页首

重温“Ajax 改造，第 1 部分”

本系列的 第 1 部分 介绍了示例应用程序 Customize Me Now，并开始将它从 Web 1.0 版本改造成受 Ajax 支持的 Web 2.0 版本。该部分从业务和可用性方面讨论了这样做的必要性。此外，也定义了 渐进增强 并介绍了渐进增强原理如何改进用户体验。它还帮助您设置了几个开源工具：jQuery JavaScript 框架和几个插件，包括 ThickBox、jQuery Forms、jTip 和 GreyBox。使用 ThickBox 和 jQuery Forms 可以流线化用户流，将导航弯路转变成了模式对话框。但这仅仅是改进的一部分。现在，您可以使用 jTip 和 GreyBox 进一步优化站点。全部完成后，查看示例应用程序改进“之前”和“之后”的版本并回顾改进的过程。

developerWorks Ajax 资源中心 请访问 Ajax 资源中心，这里几乎囊括了关于 Ajax 编程模型的所有信息，包括各种文章、教程、论坛、blog、wikis、活动和新闻。

使用 jTip 将弹出窗口转换成工具提示

现在已经回顾了第 1 部分中的模式对象的实现，接下来将通过 jTip 把所有弹出窗口转换成工具提示以优化导航。就像 ThickBox 一样，jTip 很容易实现。对于每一个想要转换的链接，只需添加如下属性：

• “jTip”的 class 属性。这个神奇的词语会警告 jTip 的 Document Object Model (DOM)-解析例程应该把此链接转换成工具提示。即使此链接元素已经具有 class 属性，也可以简单地将“jTip”添加为额外的类。
• 针对每个链接，id 属性具有惟一的值，以便 jTip 能够获得该链接的对象引用。id 的值是什么并不重要，只要存在即可。
• name 属性，jTip 使用它在工具提示内呈现标题。同样，只要属性存在，它的值是什么并不重要。如果不想让标题出现，只需将值设置为空字符串。

将这些属性添加到标记之后，每个弹出链接如清单 1 所示：

清单 1. jTip 链接所需的 HTML 代码

<a class="jTip" name="About Pizza" id="pizza" target="productPopup" href="productPopup.html?product=A">Pizza</a>

现 在只需要调整 CSS。随 Customize Me Now 1.0 一起包含的 CSS 文件会以加了红色下划线的文本呈现大多数链接元素，当鼠标悬浮于其上时，这类文本会变化颜色。用户都希望单击加下划线的链接就能进入链接，但这些 jTip 链接却无此功能；当用户将鼠标悬浮其上时，就触发了工具提示。因此，应该改变它们的样式使之与其他链接稍微不同，但同时又要确保它们充分突出以吸引用户与 之交互。为此，可以用一个新的 CSS 声明将某些定制样式添加到 jTip 类。保持红色不变，但去除下划线和悬浮状态。与此同时，添加一个新 CSS 声明以控制工具提示内容的宽度，从而不需要再用到滚动条。这个新声明基于这样一个事实：jTip 把它的工具提示和 JT 的 id 属性包装在同一个 div 里。最后，创建另一个声明以在工具提示内容内隐藏主标题；这样，就可以使用 jTip 通过链接的 name 属性自动生成的 header 了。完成之后，新的 CSS 如清单 2 所示：

清单 2. 用于 jTip 的 CSS

/*restyle tooltip links*/ #CMN a.jTip { text-decoration: none; color: #930; } /*narrow the width of pages that will be rendered by jTip*/ #JT #main.popup { width: 200px; padding: 4px; } /*hide the headline of pages that will be rendered by jTip*/ #JT #main.popup h1 { display: none; }

如果在 Web 浏览器内查看 2.0 Search Results 页面并将鼠标悬浮于产品和产品选项之上，就会看到运行中的 jTip，如图 1 所示：

图 1. 运行中的 jTip 的截图

使用 GreyBox 将 off-site 链接转换成 lightbox

排 除了各种导航弯路的影响之后，Customize Me Now 2.0 就基本成型了。现在所需做的是处理 off-site 链接。查找结果页面仍然包含能连接到厂商网站的弹出链接。与前面用 jTip 替换的弹出窗口不同，这些链接可以转到不受控制的完全功能的 Web 站点。它们太大，因此无法以工具提示的形式呈现，而且它们与其他应用程序过于分开，因此也无法采用模式对话框的形式。GreyBox 正好适用于这种情况。

与多功能的 ThickBox 不同（可以处理 iframe 窗口、Ajax 数据、图片幻灯片和许多其他类型的内容），GreyBox 只有一种功能。它能够使用一种半透明的覆盖层（overlay）覆盖 Web 站点，然后在顶端打开另一个 Web 站点。Lightbox 处理与模式对话框之间的差别很小，但外观却显著不同。可以在这些链接上使用 ThickBox，但使用这种方式就不能如此清晰地区分两个站点。您总是希望用户认为他们看到的是两个完全不同的站点。

到现在为止，您应该比较熟悉使用 GreyBox 启用链接了。只需向链接添加一系列属性。

• title：这会给 GreyBox 覆盖层一个标题。
• rel：添加这个不常用的 HTML 属性并将其值设为“gb_page_fs[]” — 一个启用开源库的特殊属性。

把这些属性添加到 off-site 链接后，每个弹出链接将如清单 3 所示（尽管在现实世界中，Google 并不生产比萨）：

 

本文转自IBM Developerworks中国

        请点击此处查看全文