Краткий обзор библиотеки yui
TRANSCRIPT
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