6. • 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.
7. YUI Library
• Utilities for novice to professionals
• Core – Global Object, Node, Events
• Utilities – Animation, drag Drop, get Utility – to get
js/css dynamically.
• Widgets – Autocomplete, calendar, carousel,
Overlay…
http://yuilibrary.com/yui/docs/guides/
8. How to use
<html>
<head>
<script
src="http://yui.yahooapis.com/3.4.1/build/yui/yu
i-min.js"></script>
</head>
<body>
<!-- ur content here -->
</body>
</html>
10. Node
Getting a Node
<div id="main" class="mainclass”> foo bar baz</div>
// 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);
11. Creating Nodes and Modifying Content
// Create a new Node
var item = Y.Node.create('<li id="step3" class="highlight”>Profit</li>');
// Replace the content in a Node
Y.one("#hello").setContent("<h1>Hello World!</h1>");
// Append new markup inside a Node
bodyNode.append("<p>This is the end, beautiful friend, the end.</p>");
12. Nodelist
<ul>
<li class=“done”>milk</li>
<li class=“todo”>rice</li>
<li class=“done”>salt</li>
</ul>
var doneTasks = Y.all('.done');
// NodeLists host most Node methods for simple iterative
operations
doneTasks.removeClass('todo');
13. 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. Examples
- Widget – Carousel
- YQL in YUI
More Examples - http://yuilibrary.com/yui/docs/examples/
