YUI3學習 （一）

鏈接：http://yuilibrary.com/yui/quick-start/

時間：2014-07-13

作者：http://czon.cn

----------------------------------------------------------------------------------------------------------------------- 

一、快速啓動，引入種子文件

// 引入種子文件.
<script src="http://yui.yahooapis.com/3.17.2/build/yui/yui-min.js"></script>

二、使用YUI文件

<script>
// 建立一個YUI沙盒模型.
YUI().use('node', 'event', function (Y) {
    // The Node and Event modules are loaded and ready to use.
    // Your code goes here!
});
</script>

在使用YUI的時候，首先你要創建一個叫做“沙盒”的YUI實例（instance），每一個YUI沙盒都有自己的實例，（上面的代碼中Y被創建最後回調給函數使用）並激活自己，這樣的機制保證了在相同的網頁中他們之間不會相互干擾。這樣你在沙盒中定義的變量都不會相互污染。

在上面打代碼中，我們首先創建了一個沙盒模型，在裏面我們引用了node和event兩個模塊，這樣，在這個沙盤李裏面我們就可以通過Y這個實例訪問網頁的中DOM 元素啦。

加載你想要使用的模塊，你就可以使用它了。

三、使用DOM

  使用YUI的節點組件即node可以快捷的訪問、創建和操作DOM元素，節點可以搞定這些事情。

YUI().use('node', function (Y) {
    // Access DOM nodes.
    var oneElementById     = Y.one('#foo'),
        oneElementByName   = Y.one('body'),
        allElementsByClass = Y.all('.bar');

    // Create DOM nodes.
    var contentNode = Y.Node.create('<div>'),
        listNode    = Y.Node.create('<ul>'),
        footerNode  = Y.Node.create('<footer>');

    contentNode.setHTML('<p>Node makes it easy to add content.</p>');
    listNode.insert('<li>Buy milk</li>');
    footerNode.prepend('<h2>Footer Content</h2>');

    // Manipulate DOM nodes.
    Y.all('.important').addClass('highlight');

    Y.one('#close-button').on('click', function () {
        contentNode.hide();
    });
});

四、關於UI

YUI可以優雅和藝術的完成CSS的過度實現

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的使用 

使用node-load 組件動態的填充正在運行的網頁很容易實現

YUI().use('node-load', function (Y) {
    // Replace the contents of the #content node with content.html.
    Y.one('#content').load('content.html');
});