Ajax改造：使用Ajax和jQuery改进现有站点（7）

清单 6. 用于 Customize Me Now 2.0 导航的 HTML 代码

<noscript> 
<div id="footer" class="nav"> 
<<ul> 
<li><a href="index.html">search&/a></li> 
<li><a href="results.html">results</a></li> 
<li><a href="detail.html">details</a></li> 
<li><a href="comparison.html">compare</a></li> 
<li><a href="customize.html">customize</a></li> 
<li><a href="cart.html">cart</a></li> 
<li><a href="checkout.html">checkout</a></li> 
<li class="last"><a href="confirm.html">confirmation</a></li> 
</ul> 
</div> 
</noscript>

Product Details 页面的主要内容 <div> 的 HTML 代码与清单 7 中的代码类似。

清单 7. details.html 2.0 的 HTML 代码

<div id="main" class="inline"> 
<form method="GET" action="customize.html"> 
<input type="hidden" name="product" id="product" value="A" /> 
<h1>Pizza: Product Details</h1> 
<noscript> 
<div class="buttons"> 
<input class="button" type="submit" name="submitTop" id="submitTop" 
value="Customize Now" /> 
or <a href="cart.html?product=A">add to cart with default 
options</a> 
</div> 
</noscript> 
<!--[content goes here]--> 
<noscript> 
<div class="buttons"> 
<input class="button" type="submit" name="submitBottom" id="submitBottom" 
value="Customize Now" /> 
or <a href="cart.html">add to cart with default options</a> 
</div> 
</noscript> 
</form> 
</div>

Comparison 页面的主要内容 <div> 的 HTML 代码与清单 8 中的代码类似。

清单 8. comparison.html 2.0 的 HTML 代码

<div id="main" class="inline"> 
<h1>Product Comparison</h1> 
<table class="productComparison"> 
<thead> 
<tr> 
<th>Product</th> 
<th>Pros</th> 
<th>Cons</th> 
<noscript> 
<th>Actions</th> 
</noscript> 
</tr> 
</thead> 
<tr> 
<td class="name"> 
<a class="jTip" name="About Pizza" id="pizza" target="productPopup" 
href="productPopup.html?product=A">Pizza</a> 
</td> 
<td class="pros"> 
<ul> 
<li>Great flavor.</li> 
<li>Low cost.</li> 
<li>Fun with friends.</li> 
</ul> 
</td> 
<td class="cons"> 
<ul> 
<li>Can make you fat.</li> 
<li>Not very nutritious.</li> 
</ul> 
</td> 
<noscript> 
<td class="action"> 
<a class="button" href="customize.html?product=A">customize 
product</a> 
<a class="button" href="cart.html?product=A">add to cart with 
default options</a> 
</td> 
</noscript> 
</tr> 
<!--[additional table rows here]--> 
</table> 
</div>

在浏览器中查看 Customize Me Now 2.0 Search Results 页面并启动 Product Details 或 Comparison 页面，您可以看到所有的改进结果。其结果应该与图 3 类似。

图 3. 运行中的 ThickBox

结束语

尽 管本文涵盖了大量内容 — 向您展示了一些 Ajax 技术和最佳实践 —— 但是我们才刚刚开始。在本系列的第 2 部分中，您将使用 JTip 将弹出链接转换为工具提示，继续改善您的导航。然后，将使用 GreyBox 将 off-site 链接转换为 lightbox。最后，回顾一下示例应用程序背后的所有关键概念，并分析如何使用它们改善用户体验。如果您还想继续学习，您可以更深入地研究 Customize Me Now 2.0 的源代码，并在 Web 浏览器中查看实际效果。