Recommandé
Contenu connexe
Similaire à YUI3 - IIT Madras HackU
Similaire à YUI3 - IIT Madras HackU (20)
Dernier
Dernier (20)
YUI3 - IIT Madras HackU
- 1. Jayasurian123… 30/03/20122
- 2. “The browser is the most futile deployment environment…” - Douglas Crockford
- 4. Don’t reinvent the wheel Use tools which are already available
- 5. A comprehensive suite of tools to help you code like a pro!! http://yuilibrary.com/
- 6. • 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.
- 7. 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/
- 8. 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>
- 9. 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>
- 10. Node Getting 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);
- 11. Creating Nodes and Modifying Content // Create a new Node var item = Y.Node.create('<li id="step3" class="highlight”>Profit</li>'); // Replace the content in a Node Y.one("#hello").setContent("<h1>Hello World!</h1>"); // Append new markup inside a Node bodyNode.append("<p>This is the end, beautiful friend, the end.</p>");
- 12. 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 operations doneTasks.removeClass('todo');
- 13. Event YUI().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 }); });
- 14. Examples - Widget – Carousel - YQL in YUI More Examples - http://yuilibrary.com/yui/docs/examples/
- 15. Danke… Twitter: @jayasurian123