Hack U - YUI - 2012 IIT Kharagpur
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


Hack U - YUI - 2012 IIT Kharagpur

Uploaded on

YUI ppt presented in IIT Kharagpur in Hack U 2012

YUI ppt presented in IIT Kharagpur in Hack U 2012

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Hack! with! YUI Sumana HFrontend Engineer, UDA
  • 2. “The browser is the most futile deployment environment…” - Douglas Crockford
  • 3. Don’t reinvent the wheelUse tools which are already available
  • 4. A comprehensive suite of tools to help you code like a pro!! http://yuilibrary.com/
  • 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/
  • 7. Global Object<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script><div id="demo">Click me</div><script>// Create a new YUI sandbox and load the "node" module.YUI().use(node,datatable, function (Y) {var demo = Y.one(#demo); demo.on(click, function (e) { demo.set(text, You clicked me!); });});</script>
  • 8. NodeGetting 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. Nodelistvar doneTasks = Y.all(#tasklist .completed);// NodeLists host most Node methods for simple iterativeoperationsdoneTasks.removeClass(highlight);// or call each() to do more work on each NodedoneTasks.each(function (taskNode) { taskNode.transition({ opacity: 0 }, function () { completedTasklist.appendChild(this); });});
  • 11. 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 });});
  • 12. Examples- Factorial example- Widget - Carousel- YQL in YUIGallery – http://github.com/yahoo
  • 13. CSS - <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/ gallery-2010.10.20-19-33/build/gallery- carousel/assets/skins/sam/gallery- carousel.css"/>
  • 14. THANK YOU