目录

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

YUI目录

相关网址

概述

使用任何一个包都必须包含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

得到或设置元素的位置:

var pos = YAHOO.util.Dom.getXY('test');
YAHOO.util.Dom.setXY('target', pos);

得到浏览视图的尺寸(网页可见区域)

var viewport = [
   YAHOO.util.Dom.getViewportWidth(),
   YAHOO.util.Dom.getViewportHeight()
];

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

yahoo-event

监听某一元素的事件

 function fnCallback(e) { alert("click"); }
 YAHOO.util.Event.addListener("elementid", "click", fnCallback);

yahoo-connection

yahoo ajax类,处理异步请求。下面是我使用的一个例子

 
 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 ) ; }
		});

asdfsdf