Ajax改造，第3部分:用jQuery、Ajax选项卡和照片carousel改进现有的站点

Ajax改造，第3部分:用jQuery、Ajax选项卡和照片carousel改进现有的站点2010-06-30 IBM Brian J. DillardAjax 技术已经改变了大型商用 Web 应用程序的面貌，但是许多小型 Web 站点不具备重新构建整个用户界面所需的资源。新特性应该能够解决现实的界面问题并改进用户体验，以此证明它们的价值。本系列讲解如何用开放源码的客户端库逐步改进用户界面。在本期中，学习如何使用 DHTML 和 Ajax 把缓慢、混乱、烦人的产品细节页面改造成快速优雅的页面。我们将采用渐进式改进方法，从而确保所有用户代理仍然能够访问您的站点。

关于本文

本文讲解用 Ajax 技术改进一个 Web 1.0 购物站点的步骤。可以下载改进之前和之后的示例应用程序源代码。还可以在作者的 Web 站点上看到这两个版本的运行效果。除了 Ajax 技术和最佳实践之外，还要学习如何通过渐进式改进、易用性和用户体验设计（UxD）原理用 Ajax 改进用户体验。

本文假设读者充分了解 HTML 和 CSS，至少基本了解 JavaScript 和 Ajax 编程技术。示例应用程序是只使用客户端代码构建的；但是，演示的技术也可以应用于任何服务器端应用程序框架。要想运行示例站点，至少需要在本地主机上运行一个基本的 Web 服务器。您也可以研究源代码并在作者的 Web 站点上查看示例站点的运行效果。

回顾第 1 部分和第 2 部分

本系列的第 1 部分和第 2 部分介绍了示例应用程序 Customize Me Now，并开始从 Web 1.0 版本到 Ajax 支持的 Web 2.0 版本的改进过程。它们讨论了这种改进的业务原因和易用性原因。它们还帮助您设置几个开放源码工具，包括 jQuery JavaScript 框架以及它的几个插件。通过使用这些库，把弹出消息、离站链接和导航边栏替换为模态对话框、工具提示和 lightbox，从而改进了 Customize Me Now 的用户操作流。在这个过程中，采用了渐进式改进原理；在禁用 JavaScript 的情况下，改进的 Web 2.0 应用程序的页面会自动退化到 Web 1.0 体验。

第 3 部分的目标

在本期中，我们将把产品细节页面的内容放到一个选项卡式界面中，从而提高它的可管理性。还要在一个图像 carousel 中显示产品图像，从而提高对图像的控制能力。您将学习如何通过简单的 Dynamic HTML（DHTML）或比较复杂的 Ajax 代码应用这两种技术。无论采用哪种方法，都应用渐进式改进原理，使页面在禁用 JavaScript 时仍然是可访问的。为了实现这些目标，将使用另外两个 jQuery 插件：用于实现图像幻灯片的 jCarousel 和用于实现选项卡的 jQuery UI Tabs。

为了理解本期中的概念，先请看一下 Customize Me Now 1.1，这是原示例站点稍加改进后的版本。我们将通过修改 1.1 版创建 Customize Me Now 2.1，这个版本包含整个系列介绍的所有改进。

两种产品细节页面：单页面和多页面

在电子商务 Web 站点中，最复杂的部分之一是产品细节部分。站点会把大量关于产品的信息集中在一起，从简单的说明和技术规格到从用户社区收集的内容（比如用户评论）。当然，还有产品图像，而且每种产品常常有多个图像。从用户体验的角度来看，难题在于向用户显示决定购买产品所需的数据，同时避免过多的信息困扰用户。

在某种程度上，Customize Me Now 1.0 比较容易进行 Ajax 改造。它显示的产品细节内容很容易放在单一页面上。在 Customize Me Now 2.0 中，通过使用和 Thickbox，把原来的页面替换为一个模态对话框。这有助于改进从搜索到购买的用户操作流程。

但是，现在需求改变了。Customize Me Now 1.1 显示的产品细节信息远远多于 1.0 版。这些内容包括许多很长的文本块和许多大照片（图像来自流行的 Web 2.0 照片共享站点 Flickr）。在 Ajax 技术出现之前，有两种方法可以显示如此多的内容：一个很长的滚动页面（见图 1 和图 2），或者把页面分割为多个小页面，每个文本块或照片各有一个页面（见图 3 和图 4）。