Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Hack U - YUI - 2012 IIT Kharagpur


Published on

YUI ppt presented in IIT Kharagpur in Hack U 2012

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Hack U - YUI - 2012 IIT Kharagpur

  1. 1. Hack! with! YUI Sumana HFrontend Engineer, UDA
  2. 2. “The browser is the most futile deployment environment…” - Douglas Crockford
  3. 3. Don’t reinvent the wheelUse tools which are already available
  4. 4. A comprehensive suite of tools to help you code like a pro!!
  5. 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. 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
  7. 7. Global Object<script src=""></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 =; demo.on(click, function (e) { demo.set(text, You clicked me!); });});</script>
  8. 8. NodeGetting a Node<div id="main" class="mainclass"/> // Use [css selector string] ) var node =; var node =; // Or pass an HTML element var bodyNode =;
  9. 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"#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. 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. 11. EventYUI().use(event, function (Y) { // Step 1. Capture a button node var button ="#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. 12. Examples- Factorial example- Widget - Carousel- YQL in YUIGallery –
  13. 13. CSS - <link rel="stylesheet" type="text/css" href=" gallery-2010.10.20-19-33/build/gallery- carousel/assets/skins/sam/gallery- carousel.css"/>
  14. 14. THANK YOU