一个简短的yahoo YUI介绍

YUI 是 Yahoo! User Interface 的缩写，这是由 Yahoo! 所开发出来的工具库，包含了多种程式工具、函数库和网页操作介面，能够更快速的开发互动性高、丰富的网站应用程式，尤其是那些使用到 DOM、DHTML 和 Ajax 的网页。YUI 全部都是使用 Javascript 写出来的（其中也包含了一些 CSS ），而且是公开给大家免费使用的 Open Source 软体。
為什麼要使用 YUI ？

目前 YUI 仍在持续发展的阶段，最新的版本是 2.0x，在YUI 的官方网站可 以下载全部的套件，也有详细的说明档案。目前看到 YUI 的相关资源几乎都是英文的.

YUI 很重要的功能之一就是帮助减少不同瀏览器之间的差异性，让你只要使用一种写法就能通吃所有瀏览器，也能降低 IE 狂吃记忆体的当机问题。
因此 YUI 实在是不可或缺的啊！在日后教大家的范例裡面，也会大量使用到 YUI 的。
YUI 的家族成员

YUI 包含的东西很多，可以先粗分為三大部份：工具函数库、CSS 工具以及操作介面库。其中各大项裡面的内容简单介绍如下：
工具函数库（YUI Library Utilities）：

The YAHOO Global Object : 这是 YUI 的核心物件，每个使用到 YUI 的页面都必须先载入这个物件。它主要的用途是，提供所有 YUI 裡的程式有共同单一的命名空间（ namespace ），以及一些共用的物件方法（method）。

Event Utility : 事件工具，帮忙处理网页中发生的事件，例如滑鼠按下、滑鼠经过、表单送出… 等等都属于事件。它也提供了监听事件和自订事件的功能。

DOM Collection : DOM 工具，当你要透过 DOM 来动态更改网页中的元素时，尤其是对于动态变化 CSS 样式和避免不同瀏览器之间的差异性，这个工具会十分的有用。

Connection Manager : 连线管理程式，要使用 Ajax 就一定会用到的啦！这个工具大幅简化了 XMLHttpRequest 物件的使用方式。

Drag and Drop Utility : 拖曳工具，想要在网页中製作出可以用滑鼠拖曳的操作介面吗？就是它啦！还没试过新版的 Yahoo! 信箱吗？像 Outlook 一样可以拖拉放哦！

Animation Utility : 动画工具，想让网页增添动画效果，但又不要依靠 Flash 吗？这个工具就是专门来製作移动、缩放、Alpha ( 淡入淡出 ) 等动画效果用的。从今以后光靠 DHTML 製作动画就简单多囉！

 

CSS 工具（YUI Library CSS Tools）：

CSS Page Grids : 网页版面工具，你是否常常為使用 CSS 切割版面而头痛呢？有了这个工具之后，不论是两栏、三栏或多栏的版面都不用担心了！

CSS Fonts : 字体工具，替不同的瀏览器统一了字体、间距等样式，用来避免不同瀏览器之间的差异性。

CSS Reset : 这也是用来统一不同瀏览器之间的差异性，但是针对所有的网页元素样式。

 

操作介面库（YUI Library Controls）：

AutoComplete : 自动完成。

Calendar : 月历。

Container : 容器？包含了模组、重叠的图层、面板、工具提示、对话框以及简易对话框等，设计应用程式时会使用到的使用者介面。

Logger : 提供了很简单的方式在程式码中读写讯息，非常方便除错使用。别再用笨笨的 alert 啦！

Menu : 选单。不论是普通的选单、弹出式选单、滑鼠右键选单，都可以很容易做到。

Slider : 可以拉动的滑桿，例如部落格设定裡面，调整透明度时的滑桿，就是用这个做的。

TreeView : 树状选单。想製作和档案总管一样的树状选单吗？或是可以多层展开选单，这裡已经提供了现成的物件给你使用了！

 

去YUI 的官方网站看看？

CSS 基础 (CSS Tools) 虽说 CSS 很容易上手，但当你玩到深的时候，就会发现有很多的问题，这点由 Yahoo! 有人专门在写 CSS 的架构就可以看出来。你可以把 YUI 提供的视為一个网页所必需的基础：帮你解决掉每个瀏览器预设样式的不同、字型大小的问题，甚至复杂的排版解决方案。笔者强烈建议要好好学这套工具（可以参考下面的联结），并且嵌入在每一个网页当成基础喔！

JavaScript 核心 (Core) 若问我 JavaScript 中最常用的功能是什麼？我的答案会是事件处理、DOM 物件取得及设定，及瀏览器侦测莫属了！ 而这些基本功能在不同的瀏览器却有不同的做法，实在另人头大，因為不管写到什麼都要去解决跨瀏览器的问题，会让程式码备增！ YUI 知道开发者的痛苦，也為了自己其它功能的开发，把这些核心功能包装得好用又强大。
记得在使用 YUI 的任何功能，都一定要包含核心的 yahoo, event, 与 dom 的函式库喔！

Javascript 工具组 (Utilities) 除了核心的功能外，进阶的开发者会写动画特效、拖拉、或者是 AJAX 等的功能。 YUI 把这些功能包装地就像瑞士刀一样，既轻巧又好用。
值得一提的，大家所关注用 CSS 及 XPath 语法取得 DOM 物件的方式也在 Select 工具组实作出来，喜欢用 jQuery 的可以考虑跳槽了 :-D。

Javascript 控制项 (Controls/Widgets) 控制项跟工具组不同的地方在于，它本身会有一个介面，而 YUI 工具组则没有、只有功能性。 像是你在 Yahoo! 打字搜寻时会有的搜寻建议以及中间的页籤组 ，还有常见的 HTML 编辑器皆属于此一范畴。
从 2.4.0 开始，YUI 更提供了图表控制项，利用相同的 JavaScript，可以轻鬆地產出用 Flash 做成的图表，这样的混合真是太讚了！