1. YUI
The Yahoo! User Interface Library

2. How is quot;YUIquot; pronounced?
Within the YUI team, we tend to pronounce
it quot;why-you-eyequot;. However, in the wider world
we more often hear it pronounced quot;yooey.quot;
There's no wrong answer here.

5. developer.yahoo.com/yui

9. YUI = JS + CSS

10. A-graded browsers

11. Controls/
Core Utilities CSS tools
Widgets
AutoComplete
YAHOO Animation CSS Reset
global object
Calendar
Browser history CSS Base
DOM
ColorPicker
collection Connection CSS Fonts
manager (Ajax)
Container
Event utility CSS Grids
Drag & drop
Logger
Image loader
Menu
YUI loader
Rich text editor
Slider
TabView
TreeView

12. Events
<script src=quot;/js/yui/yahoo‐dom‐event/yahoo‐dom‐event.jsquot;></script>
<div id=quot;containerquot;>
<p>Click for Hello World alert.</p>
</div>
var helloWorld = function (e) {
alert (quot;Hello World!quot;);
}
YAHOO.util.Event.addListener (quot;containerquot;, quot;clickquot;, helloWorld);

13. Events
<script src=quot;/js/yui/yahoo‐dom‐event/yahoo‐dom‐event.jsquot;></script>
<a href=quot;...quot; id=quot;firstAquot;>...</a>
<a href=quot;...quot; id=quot;secondAquot;>...</a>
var interceptLink = function(e) {
YAHOO.util.Event.preventDefault (e);
alert (quot;You clicked on the second YUI link.quot;);
}
YAHOO.util.Event.addListener (quot;secondAquot;, quot;clickquot;, interceptLink);

14. <script>
(function() {
var helloWorld = function(e) {
alert(quot;Hello World!quot;);
}
YAHOO.util.Event.addListener(quot;containerquot;, quot;clickquot;, helloWorld);
var interceptLink = function(e) {
YAHOO.util.Event.preventDefault(e);
alert(quot;You clicked on the second YUI link.quot;);
}
YAHOO.util.Event.addListener(quot;secondAquot;, quot;clickquot;, interceptLink);
})();
</script>

15. <script>
(function() {
var helloWorld = function(e) {
YAHOO.log(quot;helloWorld function firing.quot;, quot;infoquot;, quot;examplequot;);
alert(quot;Hello World!quot;);
}
YAHOO.util.Event.addListener(quot;containerquot;, quot;clickquot;, helloWorld);
var interceptLink = function(e) {
YAHOO.util.Event.preventDefault(e);
YAHOO.log(quot;You clicked on the second YUI link.quot;, quot;infoquot;, quot;examplequot;);
alert(quot;You clicked on the second YUI link.quot;);
}
YAHOO.util.Event.addListener(quot;secondAquot;, quot;clickquot;, interceptLink);
YAHOO.log(quot;When you begin interacting with the example at left, you'll see log
messages appear here.quot;, quot;infoquot;, quot;examplequot;);
})();
</script>

16. Custom events
var onSizeChange = new YAHOO.util.CustomEvent (quot;onSizeChangequot;);
function fnClick(e) {
. . .
onSizeChange.fire ({width: newWidth,
height: newHeight});
}
onSizeChange.subscribe (fnSubscriberWidth);
onSizeChange.subscribe (fnSubscriberHeight);
fnSubscriberWidth = function (type, args) {
var newWidth = args[0].width;
. . .
}
fnSubscriberHeight = function(type, args) {
var newHeight = args[0].height;
. . .
}

17. DOM collection
<script src=quot;/js/yui/yahoo‐dom‐event/yahoo‐dom‐event.jsquot;></script>
<script src=quot;/js/yui/yahoo/yahoo.jsquot;></script>
<script src=quot;/js/yui/dom/dom.jsquot;></script>
YAHOO.util.Event.on (document, quot;clickquot;, move);
var move = function (e) {
YAHOO.util.Dom.setXY ('foo', YAHOO.util.Event.getXY (e));
};
var move = function() {
var xy = YAHOO.util.Dom.getXY ('bar');
YAHOO.util.Dom.setXY ('foo', xy);
};
YAHOO.util.Dom.setStyle ('foo', 'opacity', 0.5);
var bgcolor = YAHOO.util.Dom.getStyle ('bar', 'backgroundColor');
YAHOO.util.Dom.setStyle ('foo', 'backgroundColor', bgcolor);

18. DOM collection
var testClass = function (e) {
alert (YAHOO.util.Dom.hasClass ('foo', 'baz'));
};
var addClass = function (e) {
YAHOO.util.Dom.addClass ('foo', 'baz');
alert (YAHOO.util.Dom.get ('foo').className);
};
var removeClass = function (e) {
YAHOO.util.Dom.removeClass ('foo', 'baz');
alert (YAHOO.util.Dom.get('foo').className);
};
var getByClass = function (e) {
alert ('found: ' +
YAHOO.util.Dom.getElementsByClassName ('bar', 'div').length +
' elements');
};

19. Drag & drop
<script src=quot;/js/yui/yahoo‐dom‐event/yahoo‐dom‐event.jsquot;></script>
<script src=quot;/js/yui/dragdrop/dragdrop.jsquot;></script>
<div id=quot;dd‐demo‐1quot; class=quot;dd‐demoquot;></div>
<div id=quot;dd‐demo‐2quot; class=quot;dd‐demoquot;></div>
<div id=quot;dd‐demo‐3quot; class=quot;dd‐demoquot;></div>
<script type=quot;text/javascriptquot;>
(function() {
var dd, dd2, dd3;
YAHOO.util.Event.onDOMReady (function() {
dd = new YAHOO.util.DD (quot;dd‐demo‐1quot;);
dd2 = new YAHOO.util.DD (quot;dd‐demo‐2quot;);
dd3 = new YAHOO.util.DD (quot;dd‐demo‐3quot;);
});
})();
</script>

20. Animation
<script src=quot;/js/yui/yahoo‐dom‐event/yahoo‐dom‐event.jsquot;></script>
<script src=quot;/js/yui/animation/animation.jsquot;></script>
var attributes = {
width: { to: 0 }
};
var anim = new YAHOO.util.Anim ('demo', attributes);
YAHOO.util.Event.on ('demo‐run', 'click', function() {
anim.animate();
});
var attributes = {
width: { from: 30, to: 10, unit:'em' }
};
var attributes = {
height: { to: 50 },
width: { to: 50 }
};

21. Animating motion; animated scrolling
<script type=quot;text/javascriptquot;>
(function() {
var attributes = {
points: { to: [600, 10] }
};
var anim = new YAHOO.util.Motion ('demo', attributes);
YAHOO.util.Event.on ('demo‐run', 'click', function() {
anim.animate();
});
})();
</script>
var attributes = {
points: { to: [600, 10], control: [ [300, 100], [800, 800] ] }
};
var attributes = {
scroll: { to: [0, 200] }
};
var anim = new YAHOO.util.Scroll('demo', attributes);

23. developer.yahoo.com/yui/examples