第4部分:用jQuery和Ajax表单改造现有站点(6)

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 浏览器中查看实际效果。

原始演示应用程序的源代码下载

经过改进的演示应用程序的源代码下载