轉自：
http://blog.csdn.net/newhappy2008/archive/2007/06/23/1663987.aspx
簡介
Yahoo! User Interface Library(
簡稱
yui)
是一個使用
Javascrīpt
編寫的工具和控件庫。它利用
DOM
腳本
,DHTML
和
AJAX
來構造具有豐富交互功能的
Web
程序。
yui
也包含幾個核心
的
CSS
文件。
yui
中的所有組件已經以開源的形式發布，它們遵循
BSD
協議并且可以免費使用?？梢詮?/span>
Sourceforge
站點下載完整的項目文件，同
時包含相關文檔和示例。
yui
項目開發人員的
BLOG
：
YUI Blog
，交流社區：
ydn-javascrīpt on Yahoo! Groups
。
準備工作：
1
、
下載
yui
yui
項目文件已經發布在
Sourceforge
站點，文件包含相關文檔，示例和代碼。
注：
Yahoo
沒有為
yui
的運行提供免費的運行環境，你需要運行在你在即
Web
服務器上。
2
、
在你的網頁中加入你需要的類庫文件
為了使用
yui
中的組件你必須在你的頁面文件中用
<scrīpt>
指定相關組件的類庫文件地址。如果該組件依賴于其他組件，你必須使用
<scrīpt>
指定所依賴的組件的類庫文件地址。
3
、
如果有必要，在頁面中加入
CSS
文件
某些
yui
的控件包含一個相應的
CSS
文件，用來設定控件的樣式。此時，你必須在頁面中使用
<style>
指定相應的
CSS
文件的地址。你可以通過修改相應的
CSS
文件達到你想要的效果。
4
、
瀏覽相關文檔和示例
每一個組件都包含詳細的
API
文檔，并且提供了常用的例子。學習完后，回顧一下所有的
API
，做到心中有數。因為對于
API
理解的好壞將影響你對
yui
的使用效果。
組件介紹
Yui
組件分成
2
類：工具包和控件庫
Yui
工具包
Yui
工具包利用
DOM
腳本來簡化瀏覽器內的開發（
in-browser devolvement
），使用
DHTML
和
AJAX
的特性開發所有的
Web
程序。
動畫（
Animation
）：在你的頁面中通過指定位置，大小，透明度或者頁面元素的其他特性來創建一個
"
電影效果（
cinematic effects
）
"
。這些效果將在你的頁面發生變化的時候給用戶更好的體驗。
連
接管理（
Connection Manager
）：這個工具包幫助你管理
XMLHttpRequest
（一般被稱為
AJAX
）事務，它提供對表單提交（
form posts
），錯誤捕獲（
error handling
）和
callbacks
的全面支持。該工具包也支持文件的上傳管理。
DOM
：
DOM
工具包提供更簡單的
DOM
腳本的功能調用方式，包含元素的位置和
CSS
樣式的管理。
拖放（
Drag and Drop
）：創建可拖放的對象。為了提供豐富的交互功能（比如拖動一個對象到目標位置）你可能需要編寫很多代碼。這個工具包可以在所有支持的瀏覽器中捕獲所有的操作事務并保證其穩定地運行。
事件（
Event
）：這個神奇的管理類庫給你提供一種簡單安全的方法訪問瀏覽器的事件（比如點擊和鍵盤操作）。這個事件封包中還包含了自定義事件對象，它為你的程序交互提供一種發布和訂閱事件的機制。
yui
控件：
yui
控件庫為你頁面提供一組高交互性性的可視化元素。這些元素完全在客戶端創建維護，不需要請求服務器進行頁面刷新。
這些控件包括：
自動完成（
AutoComplete
）控件
：
自動完成控件為文本輸入提供一種漸進式的用戶體驗（
streamline user interactions
）?？丶峁┫嗨祈椓斜砗突诙鄻踊臄祿袷降奶崆版I入功能（
type-ahead functionality based on a variety of data-source formats
），并且可以通過
XMLHttpRequest
訪問服務端的數據。
日歷（
Calendar
）控件
：一個用來日期選擇的動態圖形控件。
容器（
Container
）控件
：一組模仿
windows
樣式的控件，他們包括
Tooltip, Panel, Dialog
和
SimpleDialog
。其中
Module
和
Overlay
控件提供一個可擴展的平臺，你可以控制自定義的模仿
windows
樣式的控件。
日志（
Logger
）控件
：提供一個快速和簡單的記錄日志的方式，它直接將日志信息輸出到屏幕控制臺（
on-screen console
）、
Firefox
的擴展組件
FireBug
，或者
Safari
的
Javascrīpt
控制臺。
yui
的
Debug
組件將完整的記錄輸出信息和調試信息。
菜單（
Menu
）控件
：利用此控件只需要幾行簡單的代碼就可以設計一個動態樣式的菜單?？梢酝耆褂?/span>
javascrīpt
構造一個菜單，
can be layered on top of semantic unordered lists
。
滑塊（
Slider
）控件
：提供一個可滑動的組件，它允許使用者在一定的范圍內（
x
軸，
y
軸）改變滑塊的位置。
樹形（
TreeView
）控件
：提供一個節點可縮放的樹形控件。節點可以是鏈接，自定義屬性，并且可以動態加載。節點元素的展現可以通過
CSS
修改，比如文件夾視圖，
TO
－
DO
任務列表或者其他可視化處理
yui
的
CSS
資源
為了讓
CSS
能符合不同等級的瀏覽器（
A-Grade browsers
）的標準，我們想了很多。我們把這些作為
yui
類庫的一部分共享出來，希望能在這里得到促進，獲得一個簡潔的，可維護并在瀏覽器中表現優秀的設計。
頁面網格樣式（
CSS Page Grids
）：
7
個基本的用
css
組織子組件的頁面框架，支持
130
種不通的頁面布局。
標準的
CSS
字體（
Standard CSS Fonts
）：
標準的跨瀏覽器字體樣式和大小展現。
標準的
CSS
排列（
Standard CSS Reset
）：
使用這些
CSS
聲明來排除頁面的空白部分并且公共元素的樣式兼容各種瀏覽器的展現。
?
?