它的開發人員網絡還包含設計模式,提供了處理某種特定網頁設計任務及其解決方法的信息,以及一個自底向上開發 JavaScript 增強的網站和應用程序的函數庫--包括爲不同的佈局和字號問題預先定義的CSS。這個庫叫雅虎用戶界面庫,簡稱爲YUI,可以在 http://developer.yahoo.com/yui/下載。在下載的壓縮文件中,可以在 build 文件夾中找到庫文件,在 docs 文件夾中找到文檔,以及在 examples 文件夾中找到示例。這個庫由幾個組件組成,每個都必須被包含在它們自己的 <script> 標籤中。這些組件要麼以可讀的 JavaScript 文件形式提供,如 yahoo.js,要麼以文件名以-min結尾的文件大小優化的版本提供。如 yahoo-min.js。後者沒有空格,並且排列緊湊,使得文件更小。
- 一個對元素進行動畫效果以及淡入淡出的動畫組件;
- 一個創建 Ajax 應用程序的連接管理器;
- 一個訪問及修改元素,並且能動態應用 CSS類的DOM組件;
- 一個拖放組件;
- 一個用來進行事件處理的事件組件;
- 一個自動完成表單域的控件;
- 一個從表單中獲取日期的日曆控件;
- 一個可以創建腳本的頁面元素的容器控件,該頁面元素可以放到當前文檔的上面;
- 一個用來創建動態菜單的控件;
- 一個滑動塊控件;
- 一個樹視圖控件。
我們使用其中的一些組件,來複制並增強一下在其他章節已經討論過的一些解決方案。
11.5.1 使用 YUI 的彈性標題
我們使用YUI以及它的組件來創建一個更華麗的可單擊標題的示例。示例 exampleBouncyHeadlines.html 使用了 DOM、事件以及動畫組件,以便在用戶單擊標題的時候以動畫的形式來顯示和隱藏標題下面的內容。動畫會顯示該內容,把其餘的部分相應地在頁面上往下移,並從白色平滑地淡入到最終的顏色。圖 11-7 展示了它看上去的效果。
乍一看,這段腳本相當複雜,但是隻要你理解了它們做了什麼,使用庫腳本還是很容易的。這裏我會只提它的一些特性,而不是你擁有的所有選項,因爲這些內容自己就需要一章的篇幅;YUI 文檔會經常地更新,你可以在那裏閱讀相關的變更和新的選項。