Yuihacku iitd-sumana
Upcoming SlideShare
Loading in...5
×
 

Yuihacku iitd-sumana

on

  • 650 views

My YUI ppt - IIT Delhi Aug 17th 2012

My YUI ppt - IIT Delhi Aug 17th 2012

Statistics

Views

Total Views
650
Views on SlideShare
650
Embed Views
0

Actions

Likes
0
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Yuihacku iitd-sumana Yuihacku iitd-sumana Presentation Transcript

  • Hack with YUI Sumana HFrontend Engineer,Data And Analytics
  • “The browser is the most futile deployment environment…” - Douglas Crockford
  • Don’t reinvent the wheel Use tools which are already available
  • A comprehensive suite of tools to help you code like a pro!! http://yuilibrary.com/
  • • 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.
  • 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/
  • 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>
  • 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);
  • 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>");
  • 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 () { …….. });});
  • 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 });});
  • Examples- Factorial example- Widget - CarouselGallery – http://github.com/yahoo
  • 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">
  • 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/
  • Resources• http://www.slideshare.net/SumanaHariharan/yui hacku-iitdsumana
  • THANK YOU