Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (14)
Destaque
Destaque (20)
Semelhante a Y hack-china-2013
Semelhante a Y hack-china-2013 (20)
Último
Último (20)
Y hack-china-2013
- 3. PRESENTER Name John Wu 吳旭智 Title Job Mobile Wretch Bottle Mobile Auctions UWW EC CENTRAL MOBILE F2E 3
- 4. CATALOG WHAT IS YUI? YUI3 COMPARISON CSS IN YUI3 YUI3 EXTENSION COMMUNITY Q&A 4
- 6. YUI IS … Yahoo! User Interface open source JavaScript and CSS framework Core maintained by a team of Yahoo engineers Using on client and server side Try it http://yuilibrary.com/ 6
- 7. WHAT IS YUI? Why use YUI? Modular architecture Small, fast Handle X browsers for you May I use other frameworks? Yes … for small projects YUI help you more in a large project: modular design, i18n, sandbox, plugins… 7
- 9. YUI3 COMPARISON Sample Hello World! 9
- 10. YUI3 COMPARISON jQuery code <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script> <script> $(document).ready(function() { $("a").click(function(event) { event.preventDefault(); alert('Hello World!'); }); }); </script> 10
- 11. YUI3 COMPARISON jQuery code <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script> <script> $(document).ready(function() { $("a").click(function(event) { event.preventDefault(); alert('Hello World!'); }); }); </script> 11
- 12. YUI3 COMPARISON jQuery code <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script> <script> $(document).ready(function() { $("a").click(function(event) { event.preventDefault(); alert('Hello World!'); }); }); </script> 12
- 13. YUI3 COMPARISON jQuery code <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script> <script> $(document).ready(function() { $("a").click(function(event) { event.preventDefault(); alert('Hello World!'); }); }); </script> 13
- 14. YUI3 COMPARISON YUI 3 code <script src="http://yui.yahooapis.com/3.10.1/build/yui/yuimin.js"></script> 14
- 15. YUI3 COMPARISON YUI 3 code <script src="http://yui.yahooapis.com/3.10.1/build/yui/yuimin.js"></script> <script> YUI().use('node', 'event', function (Y) { }); </script> 15
- 16. YUI3 COMPARISON YUI 3 code <script src="http://yui.yahooapis.com/3.10.1/build/yui/yuimin.js"></script> <script> YUI().use('node', 'event', function (Y) { Y.one('a').on('click', function (E) { }); }); </script> 16
- 17. YUI3 COMPARISON YUI 3 code <script src="http://yui.yahooapis.com/3.10.1/build/yui/yuimin.js"></script> <script> YUI().use('node', 'event', function (Y) { Y.one('a').on('click', function (E) { E.preventDefault(); alert('Hello World!'); }); }); </script> 17
- 18. YUI3 COMPARISON Sample 2 Using a module B which needs to require another module A. 18
- 19. YUI3 COMPARISON jQuery code <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script> <script src="moduleBrequireA.js"></script> <script> $(document).ready(function() { $("a").click(function(event) { event.preventDefault(); alert('Hello World!'); }); }); </script> 19
- 20. YUI3 COMPARISON jQuery code <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script> <script src="moduleBrequireA.js"></script> <script> $(document).ready(function() { $("a").click(function(event) { event.preventDefault(); alert('Hello World!'); }); }); </script> 20
- 21. YUI3 COMPARISON jQuery code <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script> <script src="moduleA.js"></script> <script src="moduleBrequireA.js"></script> <script> $(document).ready(function() { $("a").click(function(event) { event.preventDefault(); alert('Hello World!'); }); }); </script> 21
- 22. YUI3 COMPARISON YUI 3 code <script src="http://yui.yahooapis.com/3.10.1/build/yui/yuimin.js"></script> <script> YUI().use('node', 'event', 'moduleBrequireA’, function (Y) { Y.all('a').on('click', function (E) { E.preventDefault(); alert('Hello World!'); }); }); </script> 22
- 23. YUI3 COMPARISON jQuery vs YUI 3 23
- 24. CSS IN YUI3 24
- 25. CSS IN YUI3 25
- 28. CSS IN YUI3 Reset Removes the browser-provided styling for HTML elements Fonts Provide cross-browser typographical normalization and control (Arial , 13px size , 16px line-height) Base Apply a basic cross-browser styling Grids Provide a simple system for laying out content 28
- 30. YUI3 EXTENSION Javascript modules Utilities, Extensions Plugins Widgets Dynamic loaded 30
- 31. YUI3 EXTENSION Dynamic loading yui-min.js CORE, Module System 20.3 K Dependency checking YUI().use() Browser specific Lazy loading Module Module Module Module 31
- 32. YUI3 EXTENSION Plugin Add / remove feature Simple Configurable Y.one(‘#dragdiv’).plug(Y.Plugin.Drag); Y.all(‘.resize’).plug(Y.Plugin.Resize); 32
- 34. YUI3 EXTENSION Simple Plugin <script> YUI().use('plugin', function (Y) { }); </script> 34
- 35. YUI3 EXTENSION Simple Plugin function AnchorPlugin(config) { this._node = config.host; } AnchorPlugin.NS = "anchors”; AnchorPlugin.prototype = { disable: function() { var node = this._node; var anchors = node.queryAll("a"); anchors.addClass("disabled"); anchors.setAttribute("disabled", true); } }; 35
- 36. YUI3 EXTENSION Simple Plugin var container = Y.one("div.actions"); container.plug(AnchorPlugin); container.anchors.disable(); 36
- 37. YUI3 EXTENSION Widgets AutoComplete Button Calendar Charts DataTable Dial MenuNav Node Plugin Overlay Panel ScrollView Slider TabView
- 39. COMMUNITY 39
- 41. COMMUNITY Contribute Host on github Anyone can fork / request push
- 42. COMMUNITY BOTTLE
- 43. COMMUNITY Bottle Carousel Widget Container Widget Device Utility Loader Widget Overlay Widget Page Widget PhotoGrid Widget PushPop Widget ShortCut Widget SlideTab Widget SyncScroll Widget UI Components (testing) View Widget
- 44. COMMUNITY Bottle YUI().use(‘gallery-bottle’, function (Y) { Y.Bottle.init(true); }); Data-attribute
- 45. COMMUNITY Bottle
- 46. COMMUNITY Bottle
- 48. Q&A 48
- 49. THANKS 49
Notas do Editor
- 首先不免俗的，歡迎大家來參加Yahoo北研的Hack day
- 接下來講的是一個比較輕鬆的section，了解YUI3
- 那我先自我介紹一下，我叫吳旭智，大家可以叫我John，目前是在Yahoo Taiwan EC central mobile team裡擔任F2E的工作，目前已經生出來且還在線上的小孩包括手機版無名小站、Bottle、手機版拍賣，以及慾望牆。
- 好！我們來介紹一下這一節的catalog，首先是yui淺談、yui3與jQuery的比較、YUI3對CSS的support、yui3的extension，以及community的部份。
- Ok，那我們來進入第一個主題，什麼是yui？
- Yui就是…. Yahoo! User Interfacelibrary ，他是一個開放的js與css的framework，那她主要是由一群yahoo的工程師來進行核心維護的工作。而且yui目前也不僅運用在client上，因為node.js的興起，Yahoo在以node.js為基礎的server端framework mojito上，也大量的使用了作為js核心的一個部分。