디자인 패턴과 YUI를 이용해 Rich UI 빠르게 구현하기
•
3 gefällt mir•1,527 views
디자인 패턴과 YUI를 이용해 리치 UI 빠르게 구현하기 우리가 원하는 것들 무엇이 문제인가 디자인 패턴 라이브러리 YUI 라이브러리 환경변수 Class 선택기 METRO 적용사례
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie 디자인 패턴과 YUI를 이용해 Rich UI 빠르게 구현하기
Ähnlich wie 디자인 패턴과 YUI를 이용해 Rich UI 빠르게 구현하기 (20)
Mehr von Jinho Jung
Mehr von Jinho Jung (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
디자인 패턴과 YUI를 이용해 Rich UI 빠르게 구현하기
- 2. • – – • – –
- 3. • • • • • •
- 4. • • • • •
- 5. • PPT,XLS PSD,PNG HTML,JS C,PHP
- 6. • • • • HAP PY
- 7. • • •
- 8. • • • •
- 14. • – – – • • – • – – – –
- 15. • Layout • Navigation • Selection • Rich Interaction • Social
- 18. • • – – • – http://developer.yahoo.com/ypatterns/about/stencils/
- 26. • – – • – – •
- 28. • – – • – • –
- 31. • • • • • • –
- 32. • – • • •
- 35. • • • • •
- 36. http://developer.yahoo.com/yui/carousel/ <!-- Core + Skin CSS --> <link rel="stylesheet" type="text/css" href="http:// yui.yahooapis.com/2.8.0r4/build/carousel/assets/skins/sam/ carousel.css"> <!-- Dependencies --> <script type="text/javascript" src="http://yui.yahooapis.com/ 2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/ 2.8.0r4/build/element/element-min.js"></script> <!-- Source file --> <script type="text/javascript" src="http://yui.yahooapis.com/ 2.8.0r4/build/carousel/carousel-min.js"></script>
- 37. http://developer.yahoo.com/yui/examples/carousel/csl_circular_source.html <div id="container"> <ol> <li><img alt="" src="..."></li> ... </ol> </div> var carousel = new YAHOO.widget.Carousel("container", { isCircular: true // for a circular Carousel }); carousel.render(); carousel.show();
- 40. • • • • – –
- 41. • Conditional Comments? <!--[if IE]> <link rel="stylesheet" type="text/css" href=“for_ie.css“ /> <![endif]--> <!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href=“for_ie6.css“ /> <![endif]-->
- 42. • Hack? /* for IE6 */ p {_color:white;} /* for IE */ p {*color: green;} • * html body{} *:first-child+html body{}
- 43. • <html class="gecko ff3 ff3_5 win">
- 44. • PHP CSS Browser Selector – http://bastian-allgeier.de/css_browser_selector/
- 45. • PHP CSS Browser Selector • <?php require("css_browser_selector.php"); ?> <html class="<?php echo css_browser_selector() ?>"> • <html class="gecko ff3 linux">
- 46. Environment Class Selectors • O/S Win Microsoft Windows Mac Mac OS Iphone iPhone • ie6 Internet Explorer 6.x ie7 Internet Explorer 7.x ff3_5 Firefox 3.5 Opera10 Opera 10.x chrome Google Chrome
- 47. Environment Class Selectors .ie body { background-color: yellow } .ie7 body { background-color: orange }
- 48. • • •
- 49. • • •
- 50. • developer.yahoo.com/ • developer.yahoo.com/yui/ • developer.yahoo.com/ypatterns/ • bastian-allgeier.de/css_browser_selector/ • www.nmindplus.com/2006/06/28/css-hack/