Yuihacku iitd-sumana

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

Yuihacku iitd-sumana

by Sumana Hariharan on Aug 17, 2012

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Yuihacku iitd-sumana Presentation Transcript