YUI examples study 01

CSS Foundation

Ignore this because i believe that we should use our own styles for our website ;)

 

YUI’s Core JavaScript Components

Dom Collection

Using setXY  POS: ../yui/examples/dom/setxy.html

这是个很有意思的例子：点击界面将会使用Dom的setXY方法将元素(这里是蓝色小方块)摆放到鼠标点击位置。

 

//The define of the elements
<style type="text/css"> 
#foo { background-color:#00f; height:10px; width:10px; }
 </style> 
 
<div id="foo"></div> 
<button id="demo-run">run</button> 

//Using Event.getXY(e) to get the click position 
//Using Dom.setXY to set element
<script type="text/javascript"> 
var move = function(e) { 
    YAHOO.util.Dom.setXY('foo', YAHOO.util.Event.getXY(e)); 
}; 
</script> 

//Hooks function to event
<script type="text/javascript"> 
YAHOO.util.Event.on('demo-run', 'click', move); 
</script> 

getXY

Dom.setStyle:

 

 

//set style for element 'foo'
YAHOO.util.Dom.setStyle('foo', 'opacity', 0.5); 

Dom.getStyle

//get element style 
var bgcolor = YAHOO.util.Dom.getStyle('bar', 'backgroundColor'); 

Dom.hasClass

 alert(YAHOO.util.Dom.hasClass('foo', 'baz'));

Dom.addClass

YAHOO.util.Dom.addClass('foo', 'baz'); 
alert(YAHOO.util.Dom.get('foo').className);

Dom.removeClass

 YAHOO.util.Dom.removeClass('foo', 'baz'); 

Dom.getElementsByClassName

alert('found: ' + YAHOO.util.Dom.getElementsByClassName('bar', 'div').length + ' elements');

Dom APIs

    get('demo')
    get(['demo', 'demoList'])
    getAncestorByTagName('one', 'div')
    getAncestorByClassName('listItem')
    getChildren('demoList')
    getElementsBy(getElementsByClassName('specialItems'), 'li', 'demo')
    getFirstChild('demoList')
    getLastChild('demoList')
    getNextSibling('one')
    getPreviousSibling('two')
    isAncestor('demo', 'one')
    insertBefore(li, 'one')
    insertAfter(li, 'one')