Hack U - YUI - 2012 IIT Kharagpur

989 views
957 views

Published on

YUI ppt presented in IIT Kharagpur in Hack U 2012

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

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!! http://yuilibrary.com/
  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 http://yuilibrary.com/yui/docs/guides/
  7. 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. 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. 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. 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 = 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. 12. Examples- Factorial example- Widget - Carousel- YQL in YUIGallery – http://github.com/yahoo
  13. 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. 14. THANK YOU

×