yui3是乙個非常好的開源框架，但是學習曲線稍微有些陡峭，這個系列將記錄下我使用yui3過程中的一些心得點滴，希望對大家能夠有幫助。很多網際網路的專案應用中，彈出層出現的越來越多，使用yui3可以快速的實現製作彈出層的效果。
yui3提供了overlay這個元件來實現可定位、可疊加的彈出層效果，這個彈出層同時還包含標準的布局模組。
首先是包含yui的基礎檔案，因為overlay元件使用中要用到widgetposition、widgetstack、widgetpositionalign、widgetpositionconstrain等元件，簡單的方法是只引用yui的種子檔案，他會根據情況自動載入需要的元件。
之後，我們就可以建立yui的例項了。
yui().use(「overlay」, function(y));傳給use最後的乙個引數是乙個**函式。該**函式在yui例項完成了頁面中缺少的檔案載入後開始執行。
overlay元件繼承自widget類，所以初始化方式同widget一樣，可以接受乙個配置物件來設定初始的環境變數。overlay初始的方式有很多種，即支援基於已有的html生成的方式，也支援**動態建立的方式生成。我們可以根據自己的需求選擇不同的方式。個人認為基於已有html的方式，比較容易控制html的結構和樣式，方便後期的修改，對於包含複雜彈出層內容的應用比較合適。而**動態建立的方式，則適合顯示簡單資訊的場景。
使用html的方式，需要準備的html為（markup）：
overlay headeroverlay body
overlay footer
在例項化的時候，需要在配置物件中指定乙個到html的引用。引用可以是元素的id\可以是yui物件，也可以是乙個選擇器，如果選擇到了多個符合的元素，則預設使用第乙個。
來看一下基本的例子：
yui().use('overlay', function(y)).render();也可以完全使用動態的方式來建立彈出，在指令碼中指定要彈出的內容。
僅僅有上面這些還不夠，我們還需要未彈出層設計位置和樣式，光禿禿的彈出幾句話來只會引起使用者的奇怪。yui提供了豐富的選項允許我們對overlay進行定製，下面是引數列表：
我覺得 x,y\zindex\align\centered 都是非常常用也非常有用的屬性，具體的使用可以參考yui的官方說明。
彈出層一般會繫結在乙個事件上，比如滑鼠單擊按鈕後，出現彈出層，那麼首先需要繫結事件的函式：
y.on(event, fn, selector);這個函式還可以接受其他的一些引數，具體的可以參考 yui development。
YUI 3 學習筆記 queue base
今天 yui 3 發布了 beta 1,實在是高興。繼續學習原始碼 queue base.一點心得 yui3 beta1 的 yui seed,與pr1 的架構圖 已經有了稍許不同 增加了 queue base 模組。queue base 的原始碼非常簡單，就是乙個包裝後的陣列。封裝後的介面非常有 ...
YUI3學習（一） 入門
學習yui3有一段時間，並且應用在了一些小專案的前端開發中，感覺還是蠻不錯的，所以決定開始記錄下yui3的學習歷程和個人經驗。yui3在前身yui2基礎上進行了大量的重新設計，並不只是簡單的版本公升級。yui3強調 重用，將功能做了級別劃分和顆粒化的設計。在概念上抽象出 核心 工具 和元件類，分別放...
yui3下的load事件觸發
以前的一些總結 頁面load 與 資源load 這次提出來乙個window的load事件觸發問題以及解釋一下在 yui3 中問題的解決。問題 非同步指令碼對頁面的影響 我們知道 window 的load事件只會在頁面載入完畢後觸發一次且僅一次，如果你沒有在頁面載入前listen這個事件，則以後都沒機...