2010년 1월 3일 일요일
YUI PHP Loader 문제
YUI2 Carousel 적용시 주의사항
YUI 2의 Carousel 컴포넌트의 예제 Using both images and text within an item(아이템 하나에 이미지와 텍스트 같이 사용하기)를 사용하려고 했다.
YUI 2 로더에서 "animation", "carousel" 두 개를 load하고 몇 가지 보이는 class를 로드하였으나 위쪽 페이저 부분이 이상하게 나왔다.
결국 코드를 한 줄, 한 줄 비교해본 결과 body tag가 문제였다. body 태그를 다음처럼 해줘야 Carousel 컴포넌트가 제대로 출력된다.
<body class="yui-skin-sam">
...
2010년 1월 2일 토요일
YUI 3 Basic Left Nav 예제 사용시 주의사항
YUI 3 Basic Left Nav 예제를 사용해서 메뉴를 만드려고 했다. 쉽게 쉽게 되는가 싶었는데 yahoo의 example은 메뉴가 깔끔하게 나오는 반면 내 서버에서 돌린 코드는 메뉴가 펼쳐졌다 접히는 과정이 다 보여졌다.
소스코드는 완전히 똑같은데도 그래서 계속 찾아보니 html 코드 중에 이런 부분이 있었다.
<link rel="stylesheet" type="text/css" href="assets/node-menunav-examples-base.css">
내 서버에는 없는 파일이라 관련 스타일이 적용되지 못했던 것이다. 따라서 바로 아래 나타나는 다음 코드가 작동을 못했다.
<script type="text/javascript">
// Hide the menu while its dependencies are being loaded
document.documentElement.className = "yui-loading";
</script>
"yui-loading" 은 메뉴를 감추는 작업을 한다. 로딩하는 동안 메뉴를 감춰서 메뉴가 그려지는 과정을 감춰 보기좋게 한다.
메뉴가 다 로딩되면 그려주게 된다.
menu.get("ownerDocument").get("documentElement").removeClass("yui-loading");
또한 메뉴의 id를 productsandservices로 해주지 않으면 css가 적용되지 않을 수 있으므로 sample을 참고할 때 주의해야 한다.
YUI2 VS YUI3
YUI3을 쓰기엔 YUI2의 위젯들이 탐났다. 그래서 YUI3을 포기하고 YUI2를 쓰는 사람이 있나 찾아봤더니 섞어쓰면 되는 거였다. ㅎ
http://yuilibrary.com/forum/viewtopic.php?p=3531
YUI 2.x와 3.x를 섞어쓰는 예제도 있다.
http://developer.yahoo.com/yui/3/examples/yui/yui-compat.html
앞의 포스트에서 서버사이드에서 YUI를 로딩 해주는 로더 설명을 썼는데 여기서도 Loader instance 두 개 만들어서 2.x, 3.x 동시에 load하면 된다.
PHP에서 YUI 삽입하기
YUI야 Javascript 라이브러리인데 PHP가 무슨 상관일까?
YUI PHP Loader라는 Utility가 있다.
이 유틸리티는 YUI 컴포넌트를 로딩해주는 역할을 한다.
클라이언트 사이드에 YUI Loader가 있다면 php 서버사이드엔 YUI PHP Loader가 있다.
php 쓰는 김에 같이 쓰기로 결정.
php에서 제공된 loader.php를 include 하고 아래와 같이 코드를 실행하면 된다.
$loader = new YAHOO_util_Loader("2.8.0r4");
$loader->load("yahoo", "dom", "event", "tabview", "grids", "fonts", "reset");
3.0이 좋다하여 $loader = new YAHOO_util_Loader("3.0.0"); 으로 바꿨더니 잘 되는 것같다.
서비스 서버에 올릴때 meta 디렉토리가 담겨있는 lib 디렉토리를 빼먹으면 안된다.