Yuihacku iitd-sumana

542
-1

Published on

My YUI ppt - IIT Delhi Aug 17th 2012

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

  • Be the first to like this

No Downloads
Views
Total Views
542
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Yuihacku iitd-sumana

  1. 1. Hack with YUI Sumana HFrontend Engineer,Data And Analytics
  2. 2. “The browser is the most futile deployment environment…” - Douglas Crockford
  3. 3. Don’t reinvent the wheel Use 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 simpleiterative operationsdoneTasks.removeClass(highlight);// or call each() to do more work on each NodedoneTasks.each(function (taskNode) { taskNode.transition({ opacity: 0 }, function () { …….. });});
  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 - CarouselGallery – 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"/>• Grids - <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.6.0/build/cssgr ids/grids-min.css">
  14. 14. CSS Grids Class Description .yui3-u-1 Fills 100% of the available width. .yui3-u-1-3 Fills 1/3 of available width. .yui3-u-4-5 Fills 4/5 of available width. Examples http://developer.yahoo.com/yui/grids/builder/
  15. 15. Resources• http://www.slideshare.net/SumanaHariharan/yui hacku-iitdsumana
  16. 16. THANK YOU
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×