当前位置: 首页 > web开发 > jQuery > 正文

使用jQuery(中级),第3部分:UI项目

时间:2010-06-30 IBM Michael Abernethy

简介

jQuery UI 项目是一个令人激动的 jQuery 子项目,它许诺在下一年实现快速增长。UI 库的扩展速度非常快,远远超过了 jQuery 核心库的增长,因为 UI 开发人员在每个发布版中都添加了许多特性和修复包。然而,有趣的是,UI 包是一个真正的关于用户界面的集合,并且可以划分为 3 个主要模块:小部件(Widget),它们包含预构建的可定制皮肤的用户界面,这些界面可以直接部署到 Web 站点;效果(Effect),可以在页面上操作的非常简单直观的东西(例如,颤动和爆炸等);UI 包的最后一个方面是可以为预构建的小部件创建自己的 “主题”,让您下载的这些小部件就像专门为您的 Web 站点制作的一样。

jQuery UI 项目的历史是很有趣的,并且或多或少有助于解释为什么以这种方式构建这个项目,以及为什么该库的 3 个部分差别如此大。这个 UI 库在最初的时候(即 2007 年年末)仅是几个不同的插件。这些当时很流行、下载次数很多的插件是由 jQuery 社区的高手创建的。他们决定将这些流行的插件合并到一个更大的插件中,并提升为 jQuery 核心代码的官方扩展。这导致了在 2008 年年初发布 UI 1.5 版。然而,在这个合并的 UI 插件发布之后,尝试在自己的代码中使用该插件的开发人员认为(或抱怨)它虽然很好,但彼此的差别过大。毕竟这些插件是由不同的开发人员编写的,他们都有各自的风格。最后,jQuery 社区决定调整这 3 个插件,让它们具有统一的风格。这导致 1.5.x 版本的发布,您可以在 UI 库历史中看到它们。

不过,随着该 UI 库的 1.6 版本发布,所有代码重构工作将结束,并且兑现曾经的许诺,即实现一个风格和代码统一的 UI 库。这个发布版的一个缺点是 UI 团队决定从其代码库中删除几个小部件,以让 1.6 版本早日出炉。因此,虽然 1.5 版本多了 3 个小部件,但 1.6 版本应该更快,并且更简单。您可以考虑这种折衷是否适合您,但不要期望已删除的小部件再出现在未来的 UI 库中。

我们已经回顾了 UI 库的历史,现在可以探索它的优点了,以及了解为什么 jQuery 团队对此兴奋不已。我个人觉得比较令人激动的是该库的潜力。对于曾经使用过 Java™ UI 中的 AWT 的开发人员,他们肯定记得引入 Swing 时的兴奋情景,随着一组全新的小部件的引入,与用户界面打交道的开发人员能够适应吗?我将 UI 库的潜能 与 Swing 进行对比,因为它能够将一组更新的用户界面添加到 Web 设计中(即向 Web 设计器添加更多的复杂小部件),同时对它们的行为进行规范化。因此,尽管目前 UI 库包含的小部件数量还不是很多,但它有望在发布 1.6 版本之后的一年内添加 10 至 20 个新的小部件,而到时开发人员可以在 Web 应用程序中使用它们。

安装 UI 库

下载和安装 UI 库与安装 jQuery 核心代码或插件不一样。为了降低对网络流量和连接的需求,UI 团队创建了一个 Web 应用程序,您可以通过这个应用程序预先选择需要使用的 UI 库部分和压缩方式。然后,您可以直接下载该文件。这样做的好处是可以仅提供您需要使用的 UI 库部分,从而避免对应用程序性能产生影响。这样做的缺点是,如果您需要使用一个未包含在定制文件中的部分,那么就需要重新下载整个文件。这就像我们的生活一样,每个银币都有正反两面。

Effects

UI 库中的 Effects 模块包含可以操作页面元素的 “有趣” 东西。我用 “有趣” 形容它们,是因为从总体上看它们确实是一个随机的效果集合。这类似于将 Microsoft® PowerPoint 的所有效果浏览一遍,然后将一小部分制成 JavaScript 效果。这一小部分效果是如何选择的,我们完全不知道。这些很酷的效果对专业 Web 应用程序有多大作用还有待评定,但我要问的问题是应该在什么地方,以及什么时候使用它们。

不过好消息是它们易于使用。第一组效果帮助您隐藏/显示页面元素。它们只是扩展了 jQuery 库的内置 hide() 和 show() 函数,让您能够指定隐藏/显示效果的类型。您的脑海中可能已经出现我正在谈论的效果,我将在图 1 中通过过程图演示 Puff 效果,分别显示前、中、后 3 个阶段。

图 1. Puff 示例