Ajax 改造：用 jQuery、Ajax 选项卡和照片 carousel 改进现有的站点
因为所有内容都在一个页面上，所以很容易用图像幻灯片和选项卡式界面改进版本 A。这不需要 Ajax，只使用老式的 DHTML 就可以实现。这种方法的优点是它使用了渐进式改进。提供给浏览器的内容仍然是很长的滚动页面，但是 JavaScript 代码把它转换为更现代更容易使用的界面。如果使用不支持 JavaScript 的浏览器，用户只能看到原来的页面。当然，这种方法没有解决单页面方法的带宽问题。
为了开始 Ajax 改造，首先要下载 jQuery 的最新版本，它是所有新功能的基础（参见 参考资料）。如果您已经学习了本系列的第 1 部分和第 2 部分，应该已经安装了 jQuery 1.2.1。到编写本文时，当前版本是 1.2.3，其中增加了一些 bug 补丁。
还需要从 参考资料 小节下载两个插件。jQuery UI Tabs 是 jQuery UI 的一部分，jQuery UI 是一组可配置的用户界面部件和组件。jQuery UI Tabs 把 ul 元素转换为选项卡式界面，并把内联内容和 Ajax 标记转换为这些选项卡的内容。jCarousel 是一个单独的插件，它把图像集转换为幻灯片。与 jQuery UI Tabs 一样，这些幻灯片的内容可以是内联内容或是 Ajax。
下载这些组件之后，把它们放在应用程序目录结构中的适当位置。每个下载包都包含代码示例和其他多余的文件，可以根据自己的需要保留或删除它们。每个 JavaScript 库的简化版适用于生产环境，但是您可能希望获得完整的源代码，这样就可以通读代码，更好地了解每个组件：
- 对于 jQuery，需要的惟一文件是库本身的简化版。
- 对于 jQuery UI Tabs，应该获取库的简化版、附带的 CSS 文件和两个图像：loading.gif 和 tab.png。因为 tab.png 假设您的站点采用白色背景，可能需要在 Adobe Photoshop 或其他图像编辑程序中修改它，使它的圆角效果与 Customize Me Now 的实际背景颜相匹配。
- 对于 jCarousel，需要库的简化版和附带的 CSS 文件，以及库附带的三种预打包的 skin 之一的完整目录。在 jCarousel 中，skin 由一个 CSS 文件和一组图像组成，用来控制 carousel 的视觉样式。对于 Customize Me Now，我们使用 Tango skin，但是把目录重命名为 “tango-modified”；我们将对默认的 Tango 方案做一些修改。
以上文件就位之后，要把它们插入 detailA.html 的开头。结果见清单 1：
<!--jquery assets--> <script type="text/javascript" src="../js/jquery-1.2.3.minjs"></script> <!--jquery.ui.tabs assets--> <script type="text/javascript" src="./ui.tabs/ui.tabs.pack.js"></script> <link rel="stylesheet" href="../ui.tabs/ui.tabs.css" type="text/css" media="print, projection, screen"> <!--jcarousel assets--> <script type="text/javascript" src="../jcarousel/lib/jquery.jcarousel.pack.js"></script> <link rel="stylesheet" type="text/css" href="../jcarousel/lib/jquery.jcarousel.css" /> <link rel="stylesheet" type="text/css" href="../jcarousel/skins/tango-modified/skin.css" /> |
要想创建 DHTML 图像 carousel，首先要修改 jCarousel 的外观。因为 jCarousel 可以配置为显示水平或垂直的图像 carousel，所以它的样式表包含用来实现这两种类型的规则。我们的幻灯片是水平的，所以可以删除与垂直幻灯片相关的所有 CSS 声明。另外，需要修改许多元素的宽度、高度、填充和空白边。在默认情况下，jCarousel 创建的幻灯片在任何时候都显示三个小的缩略图。在我们的幻灯片中，图像大得多（宽 500 像素），所以应该每次只显示一个图像。完成这些修改之后，skin.css 应该像清单 2 这样：
..jcarousel-skin-tango.jcarousel-container {
-moz-border-radius: 10px;
background: #F0F6F9;
border: 1px solid #346F97;
}
..jcarousel-skin-tango.jcarousel-container-horizontal {
width: 502px;
padding: 20px 125px !important;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {
width: 502px;
height: 410px;
}
..jcarousel-skin-tango .jcarousel-item {
width: 502px;
height: 410px;
}
..jcarousel-skin-tango .jcarousel-item-horizontal {
margin-right: 125px;
}
..jcarousel-skin-tango .jcarousel-item-placeholder {
background: #fff;
color: #000;
}
/**
* Horizontal Buttons
*/
..jcarousel-skin-tango .jcarousel-next-horizontal {
position: absolute;
top: 43px;
right: 5px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url(next-horizontal.png) no-repeat 0 0;
}
..jcarousel-skin-tango .jcarousel-next-horizontal:hover {
background-position: -32px 0;
}
..jcarousel-skin-tango .jcarousel-next-horizontal:active {
background-position: -64px 0;
}
..jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
..jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
..jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
cursor: default;
background-position: -96px 0;
}
..jcarousel-skin-tango .jcarousel-prev-horizontal {
position: absolute;
top: 43px;
left: 5px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url(prev-horizontal.png) no-repeat 0 0;
}
..jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
background-position: -32px 0;
}
..jcarousel-skin-tango .jcarousel-prev-horizontal:active {
background-position: -64px 0;
}
..jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
..jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
..jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
cursor: default;
background-position: -96px 0;
}
|
接下来，对 detailAhtml 的标记做一处小修改。页面原来版本中的图像已经组织成一个 ul 元素。需要在这个 HTML 列表外添加一个 div。在这个包装器 div 中添加一个值为 jcarousel-skin-tango 的 class 属性，这样就会把 Tango skin 中的样式规则应用于这个 carousel。还要在这个 div 中添加一个值为 imageCarousel 的 id 属性，让 jQuery 可以解析文档对象模型（DOM）并找到要转换的元素。完成修改之后，HTML 如清单 3 所示：
<div id="imageCarousel" class="jcarousel-skin-tango"> <ul class="productImages"> <li> <img class="product" alt="product photo" width="500" height="375" src="http://www.phpchina.com/../img/pizza1.jpg" /> Photo credit: <a target="_blank" href="http://www.flickr.com/photos/kankan/">Kanko*</a>, Flickr, Creative Commons Attribution License </li> <!--additional <li> items, images and photo credits here--> </ul> </div> |
最后，创建幻灯片的 JavaScript 代码。由于有 jCarousel 的帮助，这只需要几行代码。在 HTML 文档的顶部，包含的 JavaScript 和 CSS 文件的下面，添加清单 4 所示的内联脚本块：
<script type="text/javascript">
$(document).ready(function() {
$('#imageCarousel').jcarousel({
scroll: 1
});
});
</script>
|
这段 JavaScript 代码看起来简单，但是它会完成所有复杂的工作。它通过调用 jQuery 的 ready 事件处理函数，指示 jQuery 等待页面的 DOM 装载完成，然后执行其他任务。通过调用 jQuery 的选择符机制（$ 函数），让 jQuery 找到 id 属性值为 imageCarousel 的 DOM 元素。然后，调用包含这个 DOM 节点的对象上的 jcarousel 方法，这让 jCarousel 把这个节点中的所有标记转换为一个图像幻灯片。需要向 jcarousel 方法传递一个参数：配置参数的散列。jCarousel 的大多数默认选项是合适的，所以这个散列只包含一个键-值对：scroll，值为 1，这让 jCarousel 每次只显示一个图像。
现在，图像幻灯片完成了。
