Your SlideShare is downloading. ×
0
Yuihacku iitd-sumana
Yuihacku iitd-sumana
Yuihacku iitd-sumana
Yuihacku iitd-sumana
Yuihacku iitd-sumana
Yuihacku iitd-sumana
Yuihacku iitd-sumana
Yuihacku iitd-sumana
Yuihacku iitd-sumana
Yuihacku iitd-sumana
Yuihacku iitd-sumana
Yuihacku iitd-sumana
Yuihacku iitd-sumana
Yuihacku iitd-sumana
Yuihacku iitd-sumana
Yuihacku iitd-sumana
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Yuihacku iitd-sumana

484

Published on

My YUI ppt - IIT Delhi Aug 17th 2012

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
484
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×