时间:13-12-05 栏目:YUI3 作者:zongyan86 评论:0 点击: 4,817 次
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)