栏目导航

热点推荐

阅览排行

当前位置：主页>网络编程>ajax教程>资讯:Ajax改造:使用Ajax和jQuery改进现有站点

Ajax改造:使用Ajax和jQuery改进现有站点

www.jz123.cn 2010-01-04 来源: PHP100 责任编辑(袁袁) 我要投递新闻

　　改进应用程序

　　本文将介绍将 Customize Me Now 改进为 2.0 版的过程，本系列的第 2 部分还会进一步开发。

　　安装 jQuery 及其插件

　　要将一个 Ajax 行为层添加到您的站点，第一步是下载所有的开源库。如果您从下载小节下载了示例 2.0 应用程序，那么所有的库都应包含在其中了。如果想要下载这些库的最新版本，您可以从下载小节重新下载一次。

　　接下来，为 jQuery 和表单插件创建一个 /js 目录。注意，GreyBox、ThickBox 和 JTip 都需要自己的目录;它们与图片、CSS 文件和多个 JavaScript 库绑定在一起，所有这些都要求特定的目录结构。当链接到您的 CSS 和 .js 文件时，您必须包含一小段脚本，用来为 GreyBox 设置正确的根目录指针。这个指针必须是一个绝对目录路径，因此您可能需要在自己的代码中调整该值。完成之后，HTML 文件的头部元素应该与清单 2 类似。

　　清单 2. Customize Me Now 2.0 头部元素

　　<head>

　　<title>Customize Me Now: Shopping Cart</title>

　　/*this needs to be a non-relative reference*/

　　var GB_ROOT_DIR = "/customizemenow/2/0/greybox/";

　　</script>

　　</head>

　　使用 ThickBox 和 jQuery 将辅助链接转换为 lightbox

　　由于 jQuery 及其插件遵循渐进增强的原则，您几乎不需要定制 JavaScript 代码来创建 Ajax 功能。您只需向现有的 HTML 标记添加特定的属性。您的 JavaScript 库将解析 Document Object Model (DOM) 以寻找这些特殊属性，然后向拥有这些属性的元素添加合适的行为。jQuery 支持这种编码风格，当所有标记被呈现时它将自动解析 DOM。如果研究一下 jQuery 插件的底层操作，您将会发现它们都将自己的事件模型委托给了核心 jQuery 对象及其 ready 方法。

　　现在您已经了解了背景，接下来使用 jQuery 简化您的导航。使用 ThickBox 将不属于主购买路径的任何页面由常规页面转换为 lightbox 页面。首先从 Product Details 页面开始，让您的用户可以从站点的任何地方查看产品，而无需离开主购买路径。

　　ThickBox 很容易调用。只需向每个相关的链接添加一些特殊属性：

　　thickbox 的 class 属性。这个特殊的 class 属性告诉 ThickBox 应该注意此元素。

　　一些 querystring 值：

　　KeepThis=true 和 TB_iframe=true：这些值告诉 ThickBox 在一个经过 iframe 处理的 lightbox 中呈现此链接。

　　height=400：ThickBox 窗口的高度，以像素为单位。可以是任何值，本例中设置为 400。

　　width=600：ThickBox 的宽度，以像素为单位。可以是任何值，本例中设置为 600。

　　由于您已经使用 querystring 将产品代码传递到 Product Details 页面，所以只需使用 ampersands (&) 将您的 ThickBox 值附加到现有 URL 上。将这些属性添加到 Product Details 链接之后，每个弹出链接应该与清单 3 类似。

　　清单 3. ThickBox 链接的 HTML 代码

　　<ahref="detail.html?product=A&KeepThis=true&TB_iframe=true&height=400&width=600"class="thickbox">product details</a>

　　现在已经解决了 Product Details 页的问题，接下来改进 Comparison 页。到达此页的惟一途径是通过表单提交;用户必须使用复选框选择需要比较的产品。只能使用 jQuery Forms 呈现该表单提交的结果，jQuery Forms 是一个库，它将一些方便的方法和事件挂钩(hook)封装到 ajaxForm 对象中。使用 ajaxForm 和少量的定制 JavaScript 代码，您就可以直接调用 ThickBox 的 tb_show 方法。为此，将清单 4 中的脚本片段添加到 results.html 的头部。

　　清单 4. 从一个表单调用 ThickBox 的 JavaScript 代码

　　/*create a thickbox for our form submittal*/

　　//when the document is ready

　　$(document).ready(function() {

　　//wrap form#comparison in an ajaxForm object

　　$('#comparison').ajaxForm({

　　//intercept the submit event with a callback

　　beforeSubmit: function(formData, jqForm, options) {

　　//serialize form data; append to the form action; tack on ThickBox params

　　var URL = jqForm[0].action + "?" + $.param(formData);

　　URL += "&KeepThis=true&TB_iframe=true&height=400&width=600";

　　//call ThickBox directly

　　var caption = null;

　　var imageGroup = false

　　tb_show(caption,URL,imageGroup);

　　//cancel the form submission by returning false

　　return false;

　　}

　　});

　　</script>

　　这段代码展示了 jQuery API 的简单性。通过少量代码，您就截取了一个 HTML 表单的正常提交，并执行了一些定制 JavaScript 代码。使用这种技术，您可以在允许提交表单之前执行定制验证逻辑，或者在表单提交之后触发一个定制事件。在本例中，您需要避免提交表单。相反，我们将手动 “伪造” 表单提交生成的 HTTP 请求，以便将表单的目标定向到 ThickBox 窗口。

　　用户并不知道所有这些后台操作。他们只知道在提交表单之后，将在模式窗口中看到结果。查看 Comparison 页面之后，用户可以关闭 ThickBox 窗口，然后返回来定制和购买产品。

　　使用 ThickBox 呈现 Product Details 和 Comparison 页面的惟一问题是，对于 ThickBox 窗口来说页面太大了。您可以更改传递给 ThickBox 的页面宽度和高度值，但是如果用户使用较小的视区又该怎么办?您不想让 ThickBox 覆盖整个窗口，更不想让它延伸到视区以外。您只需将 inline 的 class 添加到它们的主体标记，重新设置 details.html 和 comparison.html 的样式。然后，将清单 5 中的 CSS 声明添加到 customizemenow.css。

　　清单 5. ThickBox 的 CSS

　　#CMN #main.inline { width: 600px;}

　　模式窗口实现过程的最后一步是，限制 Product Details 和 Comparison 页面中不希望与用户交互的元素。由于这些页面现在只是为了提供信息，所以无需包含操作链接和按钮。也无需显示您的导航栏或其他 chrome。

　　可以通过几种方式实现此目的。可以从页面删除这些元素，但是这不符合您的渐进增强策略。不支持 JavaScript 的用户转到这些页面之后无法退出或继续购买流程。您也可以将 querystring 参数附加到您的链接，让服务器端框架使用不同的模板呈现这些页面。在实际中，您很可能会这么做。但是此处还有另一种有效方式，这种方式只依赖客户端代码：老式的 <noscript> 标记。如果将每个元素都包装到一个 <noscript> 标记中，那么只有非 JavaScript 的用户代理能看见它：这些用户正是您所希望的。

　　页眉和页脚的结果 HTML 代码与清单 6 中的代码类似。

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

　　<<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="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 代码

　　<h1>Pizza: Product Details</h1>

　　<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>

　　<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 代码

　　<h1>Product Comparison</h1>

　　<thead>

　　<tr>

　　<th>Product</th>

　　<th>Actions</th>

　　</noscript>

　　</tr>

　　</thead>

　　<tr>

　　<a class="jTip" name="About Pizza" id="pizza" target="productPopup"

　　href="productPopup.html?product=A">Pizza</a>

　　</td>

　　<ul>

　　<li>Great flavor.</li>

　　<li>Fun with friends.</li>

　　</ul>

　　</td>

　　<ul>

　　<li>Not very nutritious.</li>

　　</ul>

　　</td>

　　<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>

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

顶一下

上一篇：10个常用Ajax实例教程下一篇：AJAX（XMLHttpRequest）进行跨域请求方法详解（一）

栏目导航

热点推荐

阅览排行

Ajax改造:使用Ajax和jQuery改进现有站点

相关文章列表

评论总数：0 条 [ 查看全部 ] 网友评论