Yui3 框架快速开始(1)

时间:13-12-05 栏目:YUI3 作者:zongyan86 评论:0 点击: 4,825 次

Yahoo! UI Library (YUI) 是一个开放源代码的 JavaScript 函数库,为了能建立一个高互动的网页,它采用了AJAX, DHTML 和 DOM 等程式码技术。它也包含了许多 CSS 资源。使用授权为 BSD许可证

官网:http://yuilibrary.com

现在已经出到 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的是不是很类似。今天先这样,以后接着写。

web前端开发



声明: 本文由( zongyan86 )原创编译,转载请保留链接: Yui3 框架快速开始(1)

关注我们