Ajax 改造：用 jQuery、Ajax 选项卡和照片 carousel 改进现有的站点
接下来，为页面上的每部分内容创建 DHTML 选项卡。首先，把每部分内容包装在一个新的 div 中，并在其中添加惟一的 id 属性和值为 tabContent 的 class 属性。修改后的内容见 清单 5。这些包装器的作用是为 jQuery UI Tabs 提供钩子，让它知道把哪些标记转换为选项卡的内容。
清单 5. detailA.html 中五部分内容的 HTML
<div class="tabContent" id="introduction">
<h2>Introduction</h2>
<!--paragraphs of text content here-->
</div>
<div class="tabContent" id="moreDetails">
<h2>More Details</h2>
<!--paragraphs of text content here-->
</div>
<div class="tabContent" id="userReviews">
<h2>User Reviews</h2>
<!--paragraphs of text content here-->
</div>
<div class="tabContent" id="techSpecs">
<h2>Technical Specifications</h2>
<!--paragraphs of text content here-->
</div>
<div class="tabContent" id="productImages">
<h2>Product Images</h2>
<div id="imageCarousel" class="jcarousel-skin-tango">
<ul class="productImages">
<!--<li> items from your image slideshow here-->
</ul>
</div>
</div>
|
接下来，在 HTML 文档中添加一些标记：一个无序的链接列表。这会出现在文档顶部，就在实际内容的第一部分前面。jQuery UI Tabs 会把这些标记转换为新的内容选项卡界面。尽管链接的 href 属性看起来像内部文档锚，但是它们实际上与前面创建的包装器 div 的 id 属性匹配。这些标记见清单 6：
清单 6. detailA.html 中增加的 HTML 内容
<ul class="navTabs">
<li><a href="#introduction"><span>Introduction</span></a></li>
<li><a href="#moreDetails"><span>More Details</span></a></li>
<li><a href="#userReviews"><span>User Reviews</span></a></li>
<li><a href="#techSpecs"><span>Technical Specifications</span></a></li>
<li><a href="#productImages"><span>Product Images</span></a></li>
</ul>
|
接下来，创建两组样式，分别用于启用和不启用 JavaScript 的浏览器。在启用 JavaScript 的浏览器中，用户会看到新的选项卡式界面，所以需要调整选项卡内容的外观。首先，添加一定的填充和边框。然后，在每个选项卡中禁止显示 h2 元素；在新界面中，这些标题会显示为选项卡的文本标签，所以不需要重复显示。这些样式规则应该添加在全局样式表中。
禁用 JavaScript 的用户不会看到选项卡式界面。对于这些用户，需要隐藏前面添加的无序列表，删除在内容部分中添加的边框和填充，恢复显示 h2 元素。幸运的是，通过使用 noscript 标记很容易完成这些任务。为了在禁用 JavaScript 的浏览器中覆盖全局样式，在 noscript 标记中添加一些 CSS 规则。这些样式只在关闭 JavaScript 支持的情况下应用。
最终结果是一组外观漂亮的标记，它们会根据浏览器的功能显示非常不一样的界面。完成之后，两个 CSS 代码块见清单 7 和清单 8：
清单 7. 在 customizemenow.css 中添加的 CSS 样式
#CMN .tabContent {
padding: 14px;
border: 1px solid #97a5b0;
}
#CMN .tabContent h2{
display: none;
}
|
清单 8. 在 detailA.html 的
noscript 块中添加的样式
<noscript>
<style type="text/css">
#CMN .tabContent {
padding: 0;
border: 0;
}
#CMN .tabContent h2 {
display: block;
}
#CMN ul.nav {
display: none;
}
</style>
</noscript>
|
最后，添加用来创建 DHTML 选项卡的定制 JavaScript。为此，需要在前面创建的内联脚本块（见 清单 4）中添加代码。清单 9 给出内联脚本块：
清单 9. detailA.html 中的定制 JavaScript
$(document).ready(function() {
/*earlier jCarousel code goes first*/
/*create tabs from an unordered list using jquery.ui.tabs*/
$('ul.navTabs').tabs(
{ fx: { height: 'toggle', opacity: 'toggle' } }
);
});
|
与使用 jCarousel 时一样，jQuery UI Tabs 的定制 JavaScript 也非常简单。同样使用 jQuery 的选择符机制寻找一个 DOM 元素（在这里是无序的链接列表）。然后，jQuery UI Tabs 的 tabs 方法把这个 ul 及其 li 子元素转换为选项卡式界面。tabs 方法检查无序列表中的链接，并把每个选项卡与对应的包含内容的 div 匹配起来。每个 div 最初被隐藏，直到用户单击对应的 li 元素（显示为选项卡）。与 jcarousel 方法一样，可以通过传递初始化参数的散列来定制 tabs 方法的行为。在这里，我们添加一些视觉效果，让选项卡在浏览器中的表现更酷。最后注意一点：需要在创建选项卡界面之前创建 jCarousel 图像幻灯片；如果先创建选项卡界面，jCarousel 就会在图像 carousel 的 CSS 属性方面产生混乱。
如果看一下 Customize Me Now 2.1 的 Product Details 页面的版本 A，就会看到 DHTML 选项卡（图 5）和图像 carousel（图 6）的显示效果。为了看到淡出和窗帘效果等视觉效果，在 Web 浏览器中装载页面。
图 5. 改进后的 Product Details 页面：选项卡式内容
图 6. 改进后的 Product Details 页面：图像 carousel
与 1.1 版相比，2.1 版的 Product Details 页面版本 A 有几个优点。它对用户隐藏了庞大复杂的信息，提供了更加简洁的界面。选项卡式导航方法使用户能够有条理地吸收理解各部分内容。如果在浏览器中禁用 JavaScript 并重新装载页面，就会看到与 1.1 版几乎完全一样的页面。这就是渐进式改进的作用。但不幸的是，这个版本没有解决单页面方法的带宽问题。用户仍然必须下载所有文本和图像，即使他们可能根本不查看这些内容。下面就来解决这个问题。
