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

YUI目录

  • YUI重构与应用 :主要是将YUI常用的一些方法与我们可能的应用结合起来,形成一些好的模块,方便以后使用。如:YUI Ajax应用

相关网址

概述

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

得到或设置元素的位置:

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

js/yahoo_ui_library.txt · 最后更改: 2008/05/27 17:58 由 60.20.145.67
到顶部
chimeric.de = chi`s home Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0 红麦软件 红麦软件