• [织梦吧]唯一域名:www.upgvv.com,织梦DedeCMS学习平台.

当前位置: > 网页制作 > Ajax >

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

来源: www.upgvv.com 编辑:织梦吧 时间:2012-02-06点击:
   

 Ajax 技术改变了大型商业 Web 应用程序的外观,但是许多较小的 Web 站点都不拥有重新构建整个用户界面(UI)的资源。Ajax 的一些新特性能够解决实际中的界面问题并改善用户体验。通过本系列文章,您可以了解如何使用开源客户端库让您的用户界面变得更为时尚。本文将展示如何使用 简单的 lightbox 和工具提示技术消除弹出窗口和导航死角。在实现的过程中坚持渐进增强(progressive enhancement)原理,确保增强后的 UI 特性不损害站点的可访问性,确保站点严格遵守 Web 标准。

  关于本文

  本文将逐步引导您使用 Ajax 技术改进一个 Web 1.0 购物站点。您可以下载改进 “之前” 和 “之后” 的示例应用程序源代码,也可以在作者的 Web 服务器上看到运行的两个版本。除了 Ajax 技术和最佳实践之外,您还将了解到 Ajax 如何通过 渐进增强 原理改善用户体验。

  本文假设您已经牢固掌握 HTML 和 CSS,基本了解 JavaScript 和 Ajax 编程技术。示例应用程序仅使用客户端代码构建;本文演示的技术适用于任何服务器端应用程序框架。要运行示例站点,至少需要一个在本地主机上运行的基本 Web 服务器。此外,您也可以仅跟随源代码在我的 Web 服务器上查看运行中的示例站点。

  重温“Ajax 改造,第 1 部分”

  本系列的 第 1 部分 介绍了示例应用程序 Customize Me Now,并开始将它从 Web 1.0 版本改造成受 Ajax 支持的 Web 2.0 版本。该部分从业务和可用性方面讨论了这样做的必要性。此外,也定义了 渐进增强 并介绍了渐进增强原理如何改进用户体验。它还帮助您设置了几个开源工具:jQuery JavaScript 框架和几个插件,包括 ThickBox、jQuery Forms、jTip 和 GreyBox。使用 ThickBox 和 jQuery Forms 可以流线化用户流,将导航弯路转变成了模式对话框。但这仅仅是改进的一部分。现在,您可以使用 jTip 和 GreyBox 进一步优化站点。全部完成后,查看示例应用程序改进“之前”和“之后”的版本并回顾改进的过程。

  使用 jTip 将弹出窗口转换成工具提示

  现在已经回顾了第 1 部分中的模式对象的实现,接下来将通过 jTip 把所有弹出窗口转换成工具提示以优化导航。就像 ThickBox 一样,jTip 很容易实现。对于每一个想要转换的链接,只需添加如下属性:

  “jTip”的 class 属性。这个神奇的词语会警告 jTip 的 Document Object Model (DOM)-解析例程应该把此链接转换成工具提示。即使此链接元素已经具有 class 属性,也可以简单地将“jTip”添加为额外的类。

  针对每个链接,id 属性具有惟一的值,以便 jTip 能够获得该链接的对象引用。id 的值是什么并不重要,只要存在即可。

  name 属性,jTip 使用它在工具提示内呈现标题。同样,只要属性存在,它的值是什么并不重要。如果不想让标题出现,只需将值设置为空字符串。

  将这些属性添加到标记之后,每个弹出链接如清单 1 所示:

  清单 1. jTip 链接所需的 HTML 代码

<a class="jTip" name="About Pizza" id="pizza" target="productPopup"href="productPopup.html?product=A">Pizza</a>

  现在只需要调整 CSS。随 Customize Me Now 1.0 一起包含的 CSS 文件会以加了红色下划线的文本呈现大多数链接元素,当鼠标悬浮于其上时,这类文本会变化颜色。用户都希望单击加下划线的链接就能进入链接,但这些 jTip 链接却无此功能;当用户将鼠标悬浮其上时,就触发了工具提示。因此,应该改变它们的样式使之与其他链接稍微不同,但同时又要确保它们充分突出以吸引用户与 之交互。为此,可以用一个新的 CSS 声明将某些定制样式添加到 jTip 类。保持红色不变,但去除下划线和悬浮状态。与此同时,添加一个新 CSS 声明以控制工具提示内容的宽度,从而不需要再用到滚动条。这个新声明基于这样一个事实:jTip 把它的工具提示和 JT 的 id 属性包装在同一个 div 里。最后,创建另一个声明以在工具提示内容内隐藏主标题;这样,就可以使用 jTip 通过链接的 name 属性自动生成的 header 了。完成之后,新的 CSS 如清单 2 所示:

  清单 2. 用于 jTip 的 CSS

/*restyle tooltip links*/
#CMN a.jTip {
text-decoration: none;
color: #930;
}
/*narrow the width of pages that will be rendered by jTip*/
#JT #main.popup {
width: 200px;
padding: 4px;
}
/*hide the headline of pages that will be rendered by jTip*/
#JT #main.popup h1 {
display: none;
}

  如果在 Web 浏览器内查看 2.0 Search Results 页面并将鼠标悬浮于产品和产品选项之上,就会看到运行中的 jTip,如图 1 所示:

  图 1. 运行中的 jTip 的截图

  

运行中的 jTip 的截图

  使用 GreyBox 将 off-site 链接转换成 lightbox

  排 除了各种导航弯路的影响之后,Customize Me Now 2.0 就基本成型了。现在所需做的是处理 off-site 链接。查找结果页面仍然包含能连接到厂商网站的弹出链接。与前面用 jTip 替换的弹出窗口不同,这些链接可以转到不受控制的完全功能的 Web 站点。它们太大,因此无法以工具提示的形式呈现,而且它们与其他应用程序过于分开,因此也无法采用模式对话框的形式。GreyBox 正好适用于这种情况。

  与多功能的 ThickBox 不同(可以处理 iframe 窗口、Ajax 数据、图片幻灯片和许多其他类型的内容),GreyBox 只有一种功能。它能够使用一种半透明的覆盖层(overlay)覆盖 Web 站点,然后在顶端打开另一个 Web 站点。Lightbox 处理与模式对话框之间的差别很小,但外观却显著不同。可以在这些链接上使用 ThickBox,但使用这种方式就不能如此清晰地区分两个站点。您总是希望用户认为他们看到的是两个完全不同的站点。

  到现在为止,您应该比较熟悉使用 GreyBox 启用链接了。只需向链接添加一系列属性。