位置：首页>> 网络编程>> JavaScript>> Ajax改造：使用Ajax和jQuery改进现有站点（5）

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

　来源：PHP100　发布时间：2010-04-02 12:50:00　

标签：ajax,jquery,web标准,用户体验

改进应用程序

本文将介绍将 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Customize Me Now: Shopping Cart</title>

<link rel="stylesheet" type="text/css" href="../css/customizemenow.css"/>

<script type="text/javascript" src="../js/jquery-1.2.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.form.js"></script>

<script type="text/javascript" src="../thickbox/thickbox.js"></script>
<link rel="stylesheet" type="text/css" href="../thickbox/thickbox.css" />

<script type="text/javascript" src="../jtip/scripts/jtip.js"></script>
<link rel="stylesheet" type="text/css" href="../jtip/css/jtip.css" />

<script type="text/javascript">
/*this needs to be a non-relative reference*/
var GB_ROOT_DIR = "/customizemenow/2/0/greybox/";
</script>
<script type="text/javascript" src="../greybox/AJS.js"></script>
<script type="text/javascript" src="../greybox/AJS_fx.js"></script>
<script type="text/javascript" src="../greybox/gb_scripts.js"></script>
<link rel="stylesheet" type="text/css" href="../greybox/gb_styles.css" />
</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 应该注意此元素。

第一页上一页 3 4

6 7 下一页

投稿

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

猜你喜欢