Your SlideShare is downloading. ×
YUI3 - IIT Madras HackU
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

YUI3 - IIT Madras HackU

655
views

Published on

Published in: Technology, Design

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
655
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Jayasurian123… 30/03/20122
  • 2. “The browser is the most futile deployment environment…” - Douglas Crockford
  • 3. The warhttp://www.internetbrowsersoftware.net/wp-content/uploads/2010/02/top-best-browsers.jpg
  • 4. Don’t reinvent the wheel Use tools which are already available
  • 5. A comprehensive suite of tools to help you code like a pro!! http://yuilibrary.com/
  • 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>
  • 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. 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. 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. 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. 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. Examples- Widget – Carousel- YQL in YUIMore Examples - http://yuilibrary.com/yui/docs/examples/
  • 15. Danke… Twitter: @jayasurian123

×