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聲明來排除頁面的空白部分並且公***元素的樣式兼容各種瀏覽器的展現。