Yahoo! UI Library (YUI) 是一个开放源代码的 JavaScript 函数库，为了能建立一个高互动的网页，它采用了AJAX, DHTML 和 DOM 等程式码技术。它也包含了许多 CSS 资源。使用授权为 BSD许可证。
现在已经出到 yui 3了
下载源码：https://github.com/yui/yui3/releases
快速开始：
引入js：
<script src="http://yui.yahooapis.com/3.14.0/build/yui/yui-min.js"></script>
<script>
// Create a YUI sandbox on your page.
YUI().use('node', 'event', function (Y) {
// The Node and Event modules are loaded and ready to use.
// Your code goes here!
});
</script>
node就代表的是dom操作模块，event为 事件模块。YUI是通过use来实现按需加载的。
操作dom实例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://yui.yahooapis.com/3.14.0/build/yui/yui-min.js"></script>
<style>
.hello {
background: #c3add;
color: #C3A7CD;
border-color: #000;
font-size: 150%;
}
.message {
visibility: hidden;
}
</style>
</head>
<body>
<div id="demo">
<div id="container">
<p>Click for Hello World test.</p>
</div>
<p><a href="http://yuilibrary.com" id="firstA">The YUI Library. (Link navigates away from page.)</a></p>
<a href="http://yuilibrary.com" id="secondA">The YUI Library. (Link's default behavior is suppressed.)</a>
<div class="message">
When you clicked on the second link, *preventDefault* was called, so it did not navigate away from the page.
</div>
</div>
<script>
YUI().use('node', function (Y) {
// 单击事件回调方法
var helloWorld = function (e) {
e.target.setHTML("<p>Hello World!</p>");//设置html
Y.one('#container').addClass('hello');//添加央视
}
//取元素
var node = Y.one("#container");
//单击事件
node.on("click", helloWorld);
//阻止事件回掉方法
var interceptLink = function (e) {
e.preventDefault();
Y.one('.message').setStyle('visibility', 'visible');//控制实现隐藏
}
// subscribe our interceptLink function as a click handler for the second
// anchor element:
Y.one('#secondA').on("click", interceptLink);
});
</script>
</body>
</html>
动画效果模块：
YUI().use('transition', function (Y) {
// Fade away.
Y.one('#fademe').transition({
duration: 1, // seconds
opacity : 0
});
// Shrink to nothing.
Y.one('#shrinkme').transition({
duration: 1, // seconds
width : 0,
height : 0
});
});
Ajax：
YUI().use('node-load', function (Y) {
// Replace the contents of the #content node with content.html.
Y.one('#content').load('content.html');
});
认真看下代码，是不是跟其他很多库都很像。kissy的是不是很类似。今天先这样，以后接着写。
声明: 本文由( zongyan86 )原创编译，转载请保留链接: Yui3 框架快速开始(1)
