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" /> 

这 段代码大家应该很好理解了，注意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了