Yahoo! UI Library入門

簡介

Yahoo! User Interface Library(簡稱yui) 是一個使用Javascrīpt編寫的工具和控件庫。它利用DOM腳本,DHTML和AJAX來構造具有豐富互動功能的Web程式。yui也包含幾個核心的CSS檔案。yui中的所有元件已經以開源的形式釋出，它們遵循BSD協定并且可以免費使用。可以從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）。控件會提供相似項清單和基于多樣化的資料格式的提前鍵入功能（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）控件：利用此控件隻需要幾行簡單的代碼就可以設計一個動态樣式的菜單。可以完全使用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聲明來排除頁面的空白部分并且公共元素的樣式相容各種浏覽器的展現。