yui3 - iit madras hacku
DESCRIPTION
TRANSCRIPT
Jayasurian123…
30/03/20122
“The browser is the most futile deployment environment…”
- Douglas Crockford
The war
http://www.internetbrowsersoftware.net/wp-content/uploads/2010/02/top-best-browsers.jpg
Don’t reinvent the wheel
Use tools which are already available
A comprehensive suite of tools to help you code like a pro!!
http://yuilibrary.com/
• 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.
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/
How to use<html>
<head><script
src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>
</head><body> <!-- ur content here --> </body></html>
Global Object
<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>
<div id="demo">Click me</div>
<script>YUI().use('node’, function (Y) {
var demo = Y.one('#demo'); demo.on('click', function (e) {
demo.set('text', 'You clicked me!'); });});</script>
NodeGetting 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 elementvar bodyNode = Y.one(document.body);
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 NodeY.one("#hello").setContent("<h1>Hello World!</h1>");
// Append new markup inside a NodebodyNode.append("<p>This is the end, beautiful friend, the end.</p>");
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');
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 functionbutton.on("click", function (e) { // Step 3. do stuff when the button is clicked});
});
Examples
- Widget – Carousel
- YQL in YUI
More Examples - http://yuilibrary.com/yui/docs/examples/
Danke…
Twitter: @jayasurian123