YUI 3.0.0 GA Release 學習筆記

YUI 3.0.0 GA Release 囉~ 看看有什麼改變, 順便做做教學、學習筆記.

YUI 3.0 的語法簡單不少, 而且加了 Sanbox - use() 的功能, 看起來方便許多.

範例1 - DOM


YUI().use("node", function(Y) {
    Y.one("#message").setContent("Hello, World!");
});

範例2 - use()


<div id="demo">I'm draggable.</div>

<script type="text/javascript" src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>
<script>
YUI().use('dd-plugin', function(Y) {
    Y.one('#demo').plug(Y.Plugin.Drag);
});
</script>

不過跟 YUI 2 差異也不小, 可由此對照表來做轉換 - YUI2 與 YUI3 轉換比較表

學習步驟

學習文件很完整, 照下述的方式開始看, 或許能較快入手. 🙂

  1. YUI 3: YUI Global Object
  2. YUI 3: Node
  3. YUI 3: Event
  4. 上述在看時, 可搭配 YUI 3: Index of Library Examples 此頁的範例看.
  5. 看 Utilities 有哪些 Module 可以用
  6. API: (YUI Library)

相關筆記

Core


Y.Node.get('#demo');

DOM Node


// DOM Node, Y.one(), Y.all()
// use('node'), use('*')
YUI().use('node', function(Y) {
    Y.all('#demo li').addClass('bar');
    Y.one('#demo').get('children').addClass('bar');

    var node  = Y.one('#demo');
    var node2 = node.one('p');

    var node = Y.one('#toolbar').set('role', 'toolbar');
    Y.one('#rootmenu').set('role', 'menubar').all('.menu').setAttrs({ role: 'menu', 'aria-hidden': true });

    var node = Y.one('#foo');
    var parent = node.get('parentNode');
    var html = 'I am "' + node.get('id') + '".';
    node.set('innerHTML', html);
});

Event


// Event
Y.one('#demo').on('click', function(e) {
    e.preventDefault();
    alert('event: ' + e.type + ' target: ' + e.target.get('tagName')); 
});

全部寫完後, 若要把用到的 Library 載入, 全部合併成一隻 JavaScript 的話, 可以用: The YUI Configurator.

自己寫的 JavaScript 要壓縮可用: YUI Compressor.

YUI 3 新增的 Module 中, 我特別喜歡下述~

相關網頁


關於 Tsung

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活.
本篇發表於 My_Note。將永久鏈結加入書籤。

YUI 3.0.0 GA Release 學習筆記 有 2 則回應

  1. caxton 說道:

    很高興YUI3.0 release, 不過和2.x整合的問題不曉得會不會花很多時間Orz
    問個和YUI不相干的問題:P
    請問版大, 我要在windows上安裝gupnp
    http://us3.php.net/manual/en/gupnp.requirements.php
    按照上面的說明
    我在安裝我在安裝gupnp的時候產生一個錯誤: ERROR: The DSP gupnp.dsp does not exist.
    不曉得這個問題該如何解決呢?
    另外三個套件glib-2.0, gssdp-1.0和libsoup-2.4
    我應該用cygwin去安裝或是找.dll就好?
    因為有需求必須在windows上面安裝這些套件
    還請大大指導 謝謝

  2. Tsung 說道:

    2.x => 3.0 應該是可以在 sanbox 相容的(maybe), 長期來看, 如果有要重寫時就直接翻掉吧~ 😛
    另外您要裝的那個, 我也沒裝過耶, 而且, 還在 cygwin 裝.. Orz..
    這個我不曉得該怎麼幫您耶.

發表迴響