[yui][譯]Yahoo!User Interface Libray 介紹

文章目錄

• 第一章 簡介
• 第二章 組件介紹

[yui]Yahoo!User Interface Libray 介紹

                                －Written by 浪子@cnblogs.com  (06-08-21)

第一章 簡介

Yahoo! User Interface Library(簡稱yui) 是一個使用JavaScript編寫的工具和控制項陳列庫。它利用DOM指令碼,DHTML和AJAX來構造具有豐富互動功能的Web程式。yui也包含幾個核心的CSS檔案。yui中的所有組件已經以開源的形式發布，它們遵循BSD協議並且可以免費使用。可以從Sourceforge網站下載完整的專案檔，同時包含相關文檔和樣本。

yui項目開發人員的BLOG：YUI Blog，交流社區：ydn-javaScript on Yahoo! Groups。

準備工作：

1、 下載yui

yui專案檔已經發布在Sourceforge網站，檔案包含相關文檔，樣本和代碼。

註：Yahoo沒有為yui的運行提供免費的運行環境，你需要運行在你在即Web伺服器上。

2、 在你的網頁中加入你需要的類庫檔案

為了使用yui中的組件你必須在你的分頁檔中用<script>指定相關組件的類庫檔案地址。如果該組件依賴於其他組件，你必須使用<script>指定所依賴的組件的類庫檔案地址。

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的Javascript控制台。yui的Debug組件將完整的記錄輸出資訊和調試資訊。

菜單（Menu）控制項：利用此控制項只需要幾行簡單的代碼就可以設計一個動態樣式的菜單。可以完全使用javascript構造一個菜單，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聲明來排除頁面的空白部分並且公用元素的樣式相容各種瀏覽器的展現。