11.5 完整的服务： 雅虎开发人员网络以及 YUI

雅虎作为最早的因特网内容和服务提供商，通过给网络开发人员提供雅虎开发人员网络 (Yahoo Developer Network)，迈出了非常吸引人的一步。这个网络的主页是 http://developer.yahoo.com，在那里你可以找到所有雅虎的 API、RSS提要以及 REST 服务的一个列表。真正吸引人的地方是 REST 的结果在很多情况下也提供了 JSON 格式，这意味着你可以把它们作为数据源嵌入到一个 SCRIPT 元素中，而不必使用 Ajax 。也有一个JavaScript开发人员中心，在http://developer.yahoo.com/javascript/ 上，它列出了关于如何使用雅虎和它的公司为你提供的服务、文章以及代码示例。

它的开发人员网络还包含设计模式，提供了处理某种特定网页设计任务及其解决方法的信息，以及一个自底向上开发 JavaScript 增强的网站和应用程序的函数库--包括为不同的布局和字号问题预先定义的CSS。这个库叫雅虎用户界面库，简称为YUI，可以在 http://developer.yahoo.com/yui/下载。在下载的压缩文件中，可以在 build 文件夹中找到库文件，在 docs 文件夹中找到文档，以及在 examples 文件夹中找到示例。这个库由几个组件组成，每个都必须被包含在它们自己的 <script> 标签中。这些组件要么以可读的 JavaScript 文件形式提供，如 yahoo.js，要么以文件名以-min结尾的文件大小优化的版本提供。如 yahoo-min.js。后者没有空格，并且排列紧凑，使得文件更小。

现在，这个库有下面几个组件组成：

• 一个对元素进行动画效果以及淡入淡出的动画组件；
• 一个创建 Ajax 应用程序的连接管理器；
• 一个访问及修改元素，并且能动态应用 CSS类的DOM组件；
• 一个拖放组件；
• 一个用来进行事件处理的事件组件；
• 一个自动完成表单域的控件；
• 一个从表单中获取日期的日历控件；
• 一个可以创建脚本的页面元素的容器控件，该页面元素可以放到当前文档的上面；
• 一个用来创建动态菜单的控件；
• 一个滑动块控件；
• 一个树视图控件。

我们使用其中的一些组件，来复制并增强一下在其他章节已经讨论过的一些解决方案。

11.5.1 使用 YUI 的弹性标题

我们使用YUI以及它的组件来创建一个更华丽的可单击标题的示例。示例 exampleBouncyHeadlines.html 使用了 DOM、事件以及动画组件，以便在用户单击标题的时候以动画的形式来显示和隐藏标题下面的内容。动画会显示该内容，把其余的部分相应地在页面上往下移，并从白色平滑地淡入到最终的颜色。图 11-7 展示了它看上去的效果。

乍一看，这段脚本相当复杂，但是只要你理解了它们做了什么，使用库脚本还是很容易的。这里我会只提它的一些特性，而不是你拥有的所有选项，因为这些内容自己就需要一章的篇幅；YUI 文档会经常地更新，你可以在那里阅读相关的变更和新的选项。