Yahoo! UI Library (YUI) 功能非常强大。拖拽、数据排序、特效菜单等

====== YUI目录 ======
  * [[js:yahoo_ui_library#学习笔记| YUI学习笔记]]
  * [[js:YUI重构与应用]] :主要是将YUI常用的一些方法与我们可能的应用结合起来，形成一些好的模块，方便以后使用。如：YUI Ajax应用



====== 相关网址 ======

  * 官方地址：http://developer.yahoo.net/yui/
  * http://sourceforge.net/projects/yui/
  * 在线文档：http://developer.yahoo.com/yui/docs/

====== 概述 ======

使用任何一个包都必须包含yahoo-min.js（是命名空间空基本的）、 yahoo-dom.js（封装了js DOM） ， 大部分还需要 yahoo-event.js  （主要是一些事件的处理）

这三个解决了一些基本的东西，如js dom，event 直接写可能会有浏览器兼容等问题。


特别注意：一般的包都有三个js，如 yahoo-min.js  yahoo.js yahoo-debug.js 一般正式上线的应该采用 -min.js 文件比较小，去掉了注释等多余的。debug.js是调试用的。

这里有将三个放到一起js： http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-event.js

====== 学习笔记 ======

===== yahoo-com =====

    * Positioning HTML Elements ：得到或设置一个元素的位置
    * Getting and Setting Styles ： 得到或设置一个原素的style
    * Getting the Viewport Size ： 得到可见视图的尺寸
    * Managing Class Names ：管理元素样式名称：添加、修改、删除一个元素的样式以及判断元素是否存在某种样式。比较牛的是 getElementsByClassName(className, tagName, rootNode): Returns an array of elements that have the class 

 得到或设置元素的位置：
<code>
var pos = YAHOO.util.Dom.getXY('test');
YAHOO.util.Dom.setXY('target', pos);
</code>

 得到浏览视图的尺寸（网页可见区域）
<code>
var viewport = [
   YAHOO.util.Dom.getViewportWidth(),
   YAHOO.util.Dom.getViewportHeight()
];
</code>

实例： http://weekly.mymc.cn  是我以前用纯js写出来的。如果用yahoo-com就太容易了。我使用到的有：获取有某一样式的链接；给链接加onclick事件（是yahoo-event里使用的）、替换元素样式等


===== yahoo-event =====

 监听某一元素的事件
<code>
 function fnCallback(e) { alert("click"); }
 YAHOO.util.Event.addListener("elementid", "click", fnCallback);
</code>


===== yahoo-connection =====

 yahoo ajax类，处理异步请求。下面是我使用的一个例子
<code> 
 YAHOO.util.Connect.asyncRequest('POST', 'php/post.php', callback, "new=1&old=2");  //实例
 YAHOO.util.Connect.asyncRequest('GET', 'work_show.php?action=updateOrder&id='+ id +'&val='+val ,
		{ success: function(con) {if(con.responseText != "OK") showErr(td,  "修改失败，请联系管理员") ; },
		  failure: function(con) { showErr(td,  "修改失败，系统错误："+ con.statusText ) ; }
		});
</code>
 asdfsdf