认识YUI

╰+攻爆jí腚メ 2022-09-21 05:56 112阅读 0赞

本文原出处：http://blog.csdn.net/alexpengster/archive/2007/03/08/1524531.aspx

## 這次要為你介紹一個開發 DHTML 和 Ajax 網頁的利器：**YUI** 。 ##

YUI 是 **Yahoo! User Interface** 的縮寫，這是由 Yahoo! 所開發出來的工具庫，包含了多種程式工具、函數庫和網頁操作介面，能夠更快速的開發互動性高、豐富的網站應用程式，尤其是那些使用到 DOM、DHTML 和 Ajax 的網頁。YUI 全部都是使用 Javascript 寫出來的（其中也包含了一些 CSS ），而且是公開給大家免費使用的 Open Source 軟體。

### 為什麼要使用 YUI ？ ###

目前 YUI 仍在持續發展的階段，最新的版本是 2.0x，在[YUI 的官方網站][YUI] 可 以下載全部的套件，也有詳細的說明檔案。目前看到 YUI 的相關資源幾乎都是英文的，所以小正正才想要以中文的方式呈現給大家。而且小正正現在開發 DHTML 和 Ajax 網頁幾乎無法不使用 YUI，因為它實在太好用啦！能夠節省很多時間呢！你可以這樣想像：假設 Dreamweaver 沒有了行為和外掛，Flash 少了組件，所有東西都要自己從頭開始寫，會是什麼樣的世界？

還有啊... 你一定常常有這樣的經驗，需要為 IE 寫一套程式、未了 Firefox 或其他瀏覽器又要寫另一套程式。有了 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  所提供的操作介面庫還不夠多，沒有像  Flash  的組件那麼豐富，不過對於  Javascript  來說已經跨出一大步囉！看了這篇介紹之後是不是很心動啊？如果你等不及小正正介紹，不如馬上到 [YUI 的官方網站 ][YUI] 去，裡面有很多範例可以玩哦！

[YUI]: http://developer.yahoo.com/yui/