YUIThe Yahoo! User Interface Library

How is "YUI" pronounced?

Within the YUI team, we tend to pronounce it "why-you-eye". However, in the wider world we more often hear it pronounced "yooey." There's no wrong answer here.

developer.yahoo.com/yui

YUI = JS + CSS

A-graded browsers

Core Utilities Controls/Widgets

CSS tools

YAHOOglobal object

DOMcollection

Event utility

Animation

Browser history

Connection manager (Ajax)

Drag & drop

Image loader

YUI loader

AutoComplete

Calendar

ColorPicker

Container

Logger

Menu

Rich text editor

Slider

TabView

TreeView

CSS Reset

CSS Base

CSS Fonts

CSS Grids

Events<scriptsrc="/js/yui/yahoo‐dom‐event/yahoo‐dom‐event.js"></script>

<divid="container"><p>ClickforHelloWorldalert.</p>

</div>

varhelloWorld=function(e){ alert("HelloWorld!");}

YAHOO.util.Event.addListener("container","click",helloWorld);

Events<scriptsrc="/js/yui/yahoo‐dom‐event/yahoo‐dom‐event.js"></script>

<ahref="..."id="firstA">...</a><ahref="..."id="secondA">...</a>

varinterceptLink=function(e){ YAHOO.util.Event.preventDefault(e); alert("YouclickedonthesecondYUIlink.");}

YAHOO.util.Event.addListener("secondA","click",interceptLink);

<script>

(function(){

varhelloWorld=function(e){ alert("HelloWorld!");}

YAHOO.util.Event.addListener("container","click",helloWorld);

varinterceptLink=function(e){ YAHOO.util.Event.preventDefault(e);

alert("YouclickedonthesecondYUIlink.");}

YAHOO.util.Event.addListener("secondA","click",interceptLink);

})();</script>

<script>

(function(){

varhelloWorld=function(e){ YAHOO.log("helloWorldfunctionfiring.","info","example"); alert("HelloWorld!");}

YAHOO.util.Event.addListener("container","click",helloWorld);

varinterceptLink=function(e){ YAHOO.util.Event.preventDefault(e); YAHOO.log("YouclickedonthesecondYUIlink.","info","example"); alert("YouclickedonthesecondYUIlink.");}

YAHOO.util.Event.addListener("secondA","click",interceptLink);

YAHOO.log("Whenyoubegininteractingwiththeexampleatleft,you'llseelogmessagesappearhere.","info","example");

})();</script>

Custom eventsvaronSizeChange=newYAHOO.util.CustomEvent("onSizeChange");

functionfnClick(e){...

onSizeChange.fire({width:newWidth,height:newHeight});

}

onSizeChange.subscribe(fnSubscriberWidth);onSizeChange.subscribe(fnSubscriberHeight);

fnSubscriberWidth=function(type,args){ varnewWidth=args[0].width;

...}

fnSubscriberHeight=function(type,args){ varnewHeight=args[0].height; ...}

DOM collection<scriptsrc="/js/yui/yahoo‐dom‐event/yahoo‐dom‐event.js"></script>

<scriptsrc="/js/yui/yahoo/yahoo.js"></script><scriptsrc="/js/yui/dom/dom.js"></script>

YAHOO.util.Event.on(document,"click",move);

varmove=function(e){YAHOO.util.Dom.setXY('foo',YAHOO.util.Event.getXY(e));

};

varmove=function(){varxy=YAHOO.util.Dom.getXY('bar');

YAHOO.util.Dom.setXY('foo',xy);};

YAHOO.util.Dom.setStyle('foo','opacity',0.5);

varbgcolor=YAHOO.util.Dom.getStyle('bar','backgroundColor');YAHOO.util.Dom.setStyle('foo','backgroundColor',bgcolor);

DOM collectionvartestClass=function(e){

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

varaddClass=function(e){YAHOO.util.Dom.addClass('foo','baz');alert(YAHOO.util.Dom.get('foo').className);

};

varremoveClass=function(e){YAHOO.util.Dom.removeClass('foo','baz');alert(YAHOO.util.Dom.get('foo').className);

};

vargetByClass=function(e){alert('found:'+YAHOO.util.Dom.getElementsByClassName('bar','div').length+'elements');

};

Drag & drop<scriptsrc="/js/yui/yahoo‐dom‐event/yahoo‐dom‐event.js"></script><scriptsrc="/js/yui/dragdrop/dragdrop.js"></script>

<divid="dd‐demo‐1"class="dd‐demo"></div><divid="dd‐demo‐2"class="dd‐demo"></div><divid="dd‐demo‐3"class="dd‐demo"></div>

<scripttype="text/javascript">(function(){vardd,dd2,dd3;YAHOO.util.Event.onDOMReady(function(){dd=newYAHOO.util.DD("dd‐demo‐1");dd2=newYAHOO.util.DD("dd‐demo‐2");dd3=newYAHOO.util.DD("dd‐demo‐3");});})();</script>

Animation<scriptsrc="/js/yui/yahoo‐dom‐event/yahoo‐dom‐event.js"></script><scriptsrc="/js/yui/animation/animation.js"></script>

varattributes={width:{to:0}

};

varanim=newYAHOO.util.Anim('demo',attributes);

YAHOO.util.Event.on('demo‐run','click',function(){anim.animate();

});

varattributes={width:{from:30,to:10,unit:'em'}

};

varattributes={height:{to:50},width:{to:50}

};

Animating motion; animated scrolling<scripttype="text/javascript">(function(){

varattributes={points:{to:[600,10]}};varanim=newYAHOO.util.Motion('demo',attributes);

YAHOO.util.Event.on('demo‐run','click',function(){anim.animate();});

})();</script>

varattributes={points:{to:[600,10],control:[[300,100],[800,800]]}

};

varattributes={scroll:{to:[0,200]}

};varanim=newYAHOO.util.Scroll('demo',attributes);

developer.yahoo.com/yui/examples