使用jQuery（中级），第3部分:UI项目

使用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 社区的高手创建的。他们决定将这些流行的插件合并到一个更大的插件中，并提升为核心代码的官方扩展。这导致了在 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 示例