YUI3 - IIT Madras HackU

869 views

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
869
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

YUI3 - IIT Madras HackU

  1. 1. Jayasurian123… 30/03/20122
  2. 2. “The browser is the most futile deployment environment…” - Douglas Crockford
  3. 3. The warhttp://www.internetbrowsersoftware.net/wp-content/uploads/2010/02/top-best-browsers.jpg
  4. 4. Don’t reinvent the wheel Use tools which are already available
  5. 5. A comprehensive suite of tools to help you code like a pro!! http://yuilibrary.com/
  6. 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. 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. 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>
  9. 9. 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>
  10. 10. 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 element var bodyNode = Y.one(document.body);
  11. 11. Creating Nodes and Modifying Content// Create a new Nodevar 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>");
  12. 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 operationsdoneTasks.removeClass(todo);
  13. 13. EventYUI().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. 14. Examples- Widget – Carousel- YQL in YUIMore Examples - http://yuilibrary.com/yui/docs/examples/
  15. 15. Danke… Twitter: @jayasurian123

×