Vine

YUI 3 上手更容易,光是動態載入library就方便很多了

只要載入基本的js就可以囉! 真的是一大福音啊~

加上可以直接對網頁上的物件直接進行操作,直接使用Javascript操作物件的方式
YUI 2.x:YAHOO.util.DOM. addClass(div, ‘demoClass’);
YUI 3.x:div.addClass(‘demoClass’);

這邊提供一個簡單的範例參考

Include:

<link type="text/css" rel="stylesheet" href="/yui/build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="/yui/build/yui/yui-min.js"></script>


HTML:

<div id="demo">測試測試</div>


JS:

YUI().use("node",
function(Y) {
var node = Y.get('#demo'); //div id的名稱
node.setStyle('backgroundColor', '#fcfcfc'); //設定背景色
node.setStyle('width', '300');
node.setStyle('opacity', '0.5');
node.set('innerHTML', 'demo test!!');
}


要加入事件(Event)的話也是非常的方便唷!


//use event
node.on('click', function(e){
e.preventDefault();
alert('event: ' + e.type + ' target: ' + e.target.get('tagName'));
});


參考網址:YUI 3 Node

Squall Javascript, YUI node, YUI3