YUI3基础
Yahoo! UI Library (YUI) 是一个开放源代码的 JavaScript 函数库，为了能建立一个高互动的网页，它采用了AJAX, DHTML 和 DOM 等程式码技术。
YUI3是Yahoo!下一代JavaScript和CSS库。它增强了新的Yahoo!主页, Yahoo!邮箱, 和Yahoo!其他网站的处理能力。该库包括the core components、a full suite of utilities、the Widget Infrastructure, a growing collection of widgets, CSS resources, and tools。所有的组件都是使用授权为 BSD许可证。
除了YUI3库包含的核心组件(core components),还有一系列由YUI社区的开发者创建的组件，这些组件提供了额外的功能函数，在WEB应用程序开发中丰富了YUI3的功能。
1.Getting Started(http://developer.yahoo.com/yui/3/):
(1).在实践中检验YUI包提供的例子。
我们建议从基本的YUI模块(YUI module)开始并慢慢迁移到节点(Node)。其他的实用程序(比如IO和Drag、Drop)为应用程序开发增加了亮点。
(2).请记住：在YUI的网站上对于每一个组件都有由YUI库作者撰写的完全的用户指导手册，这些是最好的资源。
另外当出现问题时你可以查看API文档寻求帮助。
(3).Visit the Gallery。
YUI3 Gallery包含数以百计的用户提供的、以YUI3为基础的模块(modules)，你可以通过YUI().use()方法直接引用。
(4).Start building（开始建立）
使用YUI Confiigurator为YUI3使用或基于你自己的开发来配置一个页面而非使用YUI3源包提供的例子。
(5).成为YUI社区的一员。
2.JS和YUI的DOM
JS中操作DOM:
<script type="text/javascript">
function tdom () {
var dom = document.getElementById("other");
dom.setAttribute("width",100);
}
</script>
YUI操作DOM:
YUI里面已经封装了DOM，并且将DOM的操作方法全部重做了，如果同样实现上面的操作，YUI3里面你就需要写成这样:
<script type="text/javascript" src="yui-min.js"></script>
<script type="text/javascript">
YUI().use("node", function(Y){
var dom = Y.one("#other");
//var dom = Y.one(document.getElementById("other"));
dom.setStyle("width",100);
});
</script>
YUI()函数负责生成一个YUI实例并返回，在参数里可以设置一些配置项，例如debug什么的，这里我们什么都没设置。'node'参数指明要加载的模块，通过控制台我们可以看到页面上会加载到node模块所需的所有js文件。
YUI().use()方法的参数为有’node’,’event’,’json’之类的，这都是YUI的moudle;最后一个参数是一个回调函数，该函数在完成所有指定模块的加载后被调用，调用时传递一个参数：一个YUI的实例。
例如：
YUI().use("node", function(Y) {
//......
});
YUI().use("node", "resize", function(Y) {
//......
});
3.yui模块
4.让YUI跑起来
第一个YUI应用：
<html>
<head>
<script type="text/javascript" src="yui-min.js"></script>
<script type="text/javascript">
YUI().use("node",function(Y){
var but = Y.one("#id_but");
but.on("click",function(e){
alert(e.target.get('tagName')); //INPUT
var div = Y.one("#other");
alert(div.getX() + ":" +div.getStyle("width")); //60 200
div.setStyle('backgroundColor', '#D00050');
div.set("innerHTML", "Welcome");
});
});
</script>
</head>
<body>
<input type="button" nam="n_but" id="id_but" value="click"/>
<div id="other" style="position:absolute;border:2px solid skyblue;width:200px;height:200px;background-color:yellow;top:100px;left:60px;"></div>
</body>
</html>
第二个YUI应用：
<html>
<head>
<script type="text/javascript" src="yui-min.js"></script>
<script type="text/javascript">
YUI().use("resize",function(Y){
var resize = new Y.Resize({
node: '#other'
});
});
</script>
</head>
<body>
<div id="other" style="position:relative;border:2px solid skyblue;width:200px;height:200px;background-color:yellow;top:100px;left:60px"></div>
</body>
</html>
第三个YUI应用：
<html>
<head>
<script type="text/javascript" src="yui-min.js"></script>
<script type="text/javascript">
YUI().use("resize", "node",function(Y){
var but = Y.one("#id_but");
but.on("click",function(e){
alert(e.target.get('tagName')); //INPUT
var div = Y.one("#other");
alert(div.getX() + ":" +div.getStyle("width")); //60 200
div.setStyle('backgroundColor', '#D00050');
div.set("innerHTML", "Welcome");
var resize = new Y.Resize({
node: '#other'
});
});
});
</script>
</head>
<body>
<input type="button" nam="n_but" id="id_but" value="click"/>
<div id="other" style="position:relative;border:2px solid skyblue;width:200px;height:200px;background-color:yellow;top:100px;left:60px"></div>
</body>
</html>
说明：
<script>中通过src引入yui-min.js在IE下程序运行正常，在FF下则会出现问题，即在FF不知道如何打开该相对路径yui-min.js，将其该HTML文件和yui-min.js放在服务器下通过URL访问则允许正常。