Yahoo! User Interface Library，YUI，YUI下載下傳，YUI學習，YUI是什麼,YUI淺談，YUI研究(1)

公司項目要用到Yahoo UI，下午隻好硬着頭皮去學了，但是發現網上關于這方面的中文資料很少，可能各位高手都在寫代碼呢，是以我寫這篇學習心得幫助下和我一樣的新人，無意賣弄，如果寫的不好還請各位見諒啊。Yahoo UI是什麼我不多講了，自己可以去baidu下。通路 http://developer.yahoo.com/yui  上面可以下載下傳Yahoo UI 2.2.0最新版。解壓縮到硬碟上。根目錄有3個檔案夾build（開發用到的包）、docs（Yahoo UI API）、examples（例子），基本上文檔還是相當齊全的，再加上 http://developer.yahoo.com/yui  頁面左側的每一個控件導航說明，我們可以開始研究了。 

最新版下載下傳位址： http://sourceforge.net/project/downloading.php?group_id=165715&filename=yui_2.3.1.zip

看了這麼多控件，無從下手，我決定先從calendar下手，這是一個月曆，感覺上相對關聯的類庫應該少一些，比較簡單。先看看examples裡面的例子，好多啊，先來一個最簡單的Quickstart Tutorial，檢視下頁面源代碼，總體對Yahoo UI的使用有了一個大緻的了解。 

在你使用的UI控件的頁面組成有3大塊： 

第一塊導入依賴的JS檔案和CSS檔案； 

第二塊控件實作的JS代碼； 

第三塊插入到當中的控件，實際就是。 

OK！我們開始使用它吧，把開發需要用的包全部放到項目中去，我是把build檔案整個copy過來了，你可以根據自己的需要選擇，但是基本上都會用到 yahoo、event、dom這3個包。在自己的項目中建立一個頁面，htm、jsp、asp等等什麼都可以了，我是用jsp的。 

第一塊在内插入： 

<script>"text/javascript" src="build/yahoo/yahoo.js"></script> 

<script>"text/javascript" src="build/event/event.js"></script> 

<script>"text/javascript" src="build/dom/dom.js"></script> 

<script>"text/javascript" src="build/calendar/calendar.js"></script> 

<link type="text/css" rel="stylesheet" href="build/calendar/assets/calendar.css" target="_blank" rel="external nofollow"  /> 

這段代碼大家應該很好了解了，注意src後面的路徑要寫正确，不然就看不到顯示效果了。 

第二塊寫實作控件的JS代碼了： 

<script> 

YAHOO.namespace("example.calendar"); 

function init() { 

YAHOO.example.calendar.cal = new YAHOO.widget.Calendar("cal","caler"); 

YAHOO.example.calendar.cal.render(); 

} 

YAHOO.util.Event.addListener(window, "load", init); 

</script> 

這幾行代碼都要寫，因為要依賴的，具體函數實作我沒有去研究，但是可以看到參數，我們基本可以了解了YAHOO這個對象應該是個全局的對象（本人JS沒學過，不知道這個術語對不對），namespace()定義一個名稱空間，這句話去掉浏覽器就會報錯說找不到YAHOO.example.calendar，那我們就暫且了解為namespace()可以初始化YAHOO的上下文了。接下來就開始new一個Calendar對象了，注意第二個參數，我們在div的時候會用到。最後加入了一個load視窗的事件，OK，這個流程基本清楚了。 

第三塊，在裡面寫一個div,注意id屬性就是初始化Calendar對象的第二個參數。 

把小貓跑起來吧，看看，是不是出現了一個簡單的月曆了。Yahoo UI還提供了對Calendar的其他功能以及複雜的Calendar，但是由于我時間有限，我隻能抛磚引玉了，希望大家自己去按照這個思路研究，不是很難的，注意：研究的時候多看看 http://developer.yahoo.com/yui  頁面左側的每一個控件導航說明，雖然是E文，但是還是可以看懂的。我的目标是DataTable和TreeView。 

好像Yui-ext現在和JQuery結合了,看樣子有意思完全脫離Yui了