YUI3 - IIT Madras HackU
Upcoming SlideShare
Loading in...5
×
 

YUI3 - IIT Madras HackU

on

  • 819 views

 

Statistics

Views

Total Views
819
Views on SlideShare
819
Embed Views
0

Actions

Likes
1
Downloads
7
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

YUI3 - IIT Madras HackU YUI3 - IIT Madras HackU Presentation Transcript

  • Jayasurian123… 30/03/20122
  • “The browser is the most futile deployment environment…” - Douglas Crockford
  • The warhttp://www.internetbrowsersoftware.net/wp-content/uploads/2010/02/top-best-browsers.jpg
  • 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• Utilities for novice to professionals• Core – Global Object, Node, Events• Utilities – Animation, drag Drop, get Utility – to get js/css dynamically.• Widgets – Autocomplete, calendar, carousel, Overlay…http://yuilibrary.com/yui/docs/guides/
  • How to use<html> <head><script src="http://yui.yahooapis.com/3.4.1/build/yui/yu i-min.js"></script></head><body><!-- ur content here --></body></html>
  • Global Object<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script><div id="demo">Click me</div><script>YUI().use(node’, 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”> foo bar baz</div> // 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 Nodevar item = Y.Node.create(<li id="step3" class="highlight”>Profit</li>);// Replace the content in a NodeY.one("#hello").setContent("<h1>Hello World!</h1>");// Append new markup inside a NodebodyNode.append("<p>This is the end, beautiful friend, the end.</p>");
  • Nodelist<ul> <li class=“done”>milk</li> <li class=“todo”>rice</li> <li class=“done”>salt</li></ul>var doneTasks = Y.all(.done);// NodeLists host most Node methods for simple iterative operationsdoneTasks.removeClass(todo);
  • 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- Widget – Carousel- YQL in YUIMore Examples - http://yuilibrary.com/yui/docs/examples/
  • Danke… Twitter: @jayasurian123