使用 jQuery UI 项目 -2 安装 UI 库与Effects

look_w

安装 UI 库下载和安装 UI 库与安装 jQuery 核心代码或插件不一样。为了降低对网络流量和连接的需求，UI 团队创建了一个 Web 应用程序，您可以通过这个应用程序预先选择需要使用的 UI 库部分和压缩方式。然后，您可以直接下载该文件。这样做的好处是可以仅提供您需要使用的 UI 库部分，从而避免对应用程序性能产生影响。这样做的缺点是，如果您需要使用一个未包含在定制文件中的部分，那么就需要重新下载整个文件。这就像我们的生活一样，每个银币都有正反两面。
EffectsUI 库中的 Effects 模块包含可以操作页面元素的 “有趣” 东西。我用 “有趣” 形容它们，是因为从总体上看它们确实是一个随机的效果集合。这类似于将 Microsoft® PowerPoint 的所有效果浏览一遍，然后将一小部分制成 JavaScript 效果。这一小部分效果是如何选择的，我们完全不知道。这些很酷的效果对专业 Web 应用程序有多大作用还有待评定，但我要问的问题是应该在什么地方，以及什么时候使用它们。
不过好消息是它们易于使用。第一组效果帮助您隐藏/显示页面元素。它们只是扩展了 jQuery 库的内置 hide() 和 show() 函数，让您能够指定隐藏/显示效果的类型。您的脑海中可能已经出现我正在谈论的效果，我将在图 1 中通过过程图演示 Puff 效果，分别显示前、中、后 3 个阶段。
图 1. Puff 示例因为很难描述动画效果的外观，所以您需要从本文下载演示稿，查看实际的效果。不过，我可以给出生成图 1 中的静态图片的代码。您可以从代码中了解它是如何实现的。         
清单 1. Puff 效果

1 2 3 4 5 6 7

$("#puffSample").click(function(){    $(this).hide("puff"); });     $("#puffReappear").click(function(){    $("#puffSample").show("puff");    });

如您所见，现在的代码还没有什么新奇的地方。hide/show 效果的工作原理还是相当简单的。真正的挑战是找出如何在恰当时间以恰当的方式使用它们，而不是让用户感慨 “喔，这毫无必要！”
我们接下来查看 Effects 模块中包含的其他效果。这些效果更加实用，我能想象到如何在应用程序中使用它们，以改善用户体验（至少一部分效果能改善用户体验）。这里的效果也很难直接描述，因此我建议您从本文  一些示例，以观察效果的实际运行情况。
这个模块中包含的效果确实能够引起用户对页面元素的关注，其中一些效果在这方面表现不错。这些效果分别是 “bounce”、“highlight”、“pulsate”、“scale”、“shake” 和 “size”。“bounce” 会让页面元素弹跳起来，就像它落在虚拟的 HTML 蹦床上一样；“highlight” 在黄色的背景中闪现元素；“pulsate” 让元素在可见和不可见之间切换；“scale” 将元素收缩 50%；而 “size” 让元素变长变平。它们就像 hide/show 一样容易使用。
清单 2. Bounce 效果

1 2 3

$("#bounce").click(function(){    $("#loginSample").effect("bounce");    });

它们构成了 UI 库中的 Effects 模块，虽然它们在文字描述中并无新奇之处，但是也有一些非常酷的效果，如果您需要让页面产生爆炸效果，就可以使用它们。