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

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

<script type="text/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 中的代码类似。