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">
...
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을 참고할 때 주의해야 한다.
