5. • YUI Library is a set of utilities and controls,
written with JS and CSS , for building rich
interactive web applications.
• Free for all users
• Scalable, Fast and Robust
• Most popular, best documented, more
examples.
6. YUI Library
• Low level DOM utilities to high level user
Interface widgets
• Core – Global Object, Node, Events
• Utilities – Animation, drag Drop, get Utility – to
get js/css dynamically.
• Widgets – Autocomplete, calendar, carousel,
Overlay…
• CSS
http://yuilibrary.com/yui/docs/guides/
8. Node
Getting a Node
<div id="main" class="mainclass"/>
// Use Y.one( [css selector string] )
var node = Y.one('#main');
var node = Y.one(.mainclass);
// Or pass an HTML element
var bodyNode = Y.one(document.body);
9. Creating Nodes and Modifying
Content
// Create a new Node
var item = Y.Node.create('<li id="step3"
class="highlight"><em>Profit</em></li>');
// Replace the content in a Node
Y.one("#hello").setContent("<h1>Hello,
<em>World</em>!</h1>");
// Append new markup inside a Node
bodyNode.append("<p>This is the end, beautiful friend,
the end.</p>");
10. Nodelist
var doneTasks = Y.all('#tasklist .completed');
// NodeLists host most Node methods for simple
iterative operations
doneTasks.removeClass('highlight');
// or call each() to do more work on each Node
doneTasks.each(function (taskNode) {
taskNode.transition({ opacity: 0 }, function () {
……..
});
});
11. Event
YUI().use('event', function (Y) {
// Step 1. Capture a button node
var button = Y.one("#readygo");
// Step 2. Subscribe to its click event with a callback
function
button.on("click", function (e) {
// Step 3. do stuff when the button is clicked
});
});
14. CSS Grids
Class Description
.yui3-u-1 Fills 100% of the available width.
.yui3-u-1-3 Fills 1/3 of available width.
.yui3-u-4-5 Fills 4/5 of available width.
Examples
http://developer.yahoo.com/yui/grids/builder/