Rev. 2.73

Sebastien Gruhier씨는 Bill Scott씨가 야후!UI 프레임웍 라이브러리로 만든 회전목마 컴포넌트Prototype 버전으로 똑같이 만드셨군요. 저도 이와 비슷한 작업을 올라로그에 에피소드 슬라이더라는 이름으로 진행한 적이 있는데요.(곧 없어질 예정이랍니다;;) 프로토타입용 회전목마 위젯은 가벼우면서도 약간의 파라메터만을 사용하여 야후!UI에 버금가는 기능을 구사한다고 합니다. Ajax 또는 정적인 방식으로 붙일 수 있으며, 수직 슬라이드는 지원하지 않고 수평으로만 슬라이드됩니다. 그리고 루비 온 레일스의 헬퍼도 지원하는 군요. IE6, 불여우(PC, 맥), 오페라9, 사파리, 카미노(Camino?) 브라우저에서 작동합니다. 위의 화면은 스크린샷이 아닌 실제 라이브러리를 붙인 것입니다. 한번 작동시켜 봅시다.

※ 이 글은 RSS리더기에서 비정상으로 보일 수 있으며 정상적으로 작동하지 않습니다. 그리고 사정상 웹표준을 준수하지 않습니다.(죄송합니다!)

Comments

yui.jpg

야후의 Bill Scott은 야후! UI 라이브러리에 추가할 수 있는 Carousel Component(회전목마 컴포넌트)를 공개했다. Static HTML, DTHML, Ajax 로 구축된 환경에서 가로, 세로구성 및 애니메이션, 슬라이드쇼, 스크롤링 등 여러방식으로 적용할 수 있도록 설계되었다. IE, 파이어폭스, 사파리, 오페라 등 주요 브라우저에 최적화 되었으며, 야후! UI가 로드된 상태에서 carousel.jscarousel.css 두개의 파일 추가만으로 컴포넌트가 추가된다. 자바스크립트로 생성된 DIV노드에 적용되는 CSS Style의 정의를 살펴보면 아래의 그림과 같은 구조로 되어있다.

carousel-html-css-structure.png

Ajax 로딩방식은 XML이 아닌 JSON을 사용하고 있으며, 지정한 단위로 필요한때 XMLHttpRequest를 실행한다. 한번 불러들인 데이터는 DOM에 남아있어 케쉬효과를 발하기 때문에 같은 데이터를 한번이상 요청하지 않는다. 하지만 무한으로 생산되는 DIV노드는 특정 브라우저에서 메모리랙을 유발하기도 한다.(용도에 따라 다르겠지만)

이와 비슷한 같은 회전목마 아키텍쳐를 올라로그의 개인페이지에 적용할 예정이었는데 때마침 잘 나와주어서 요긴하게 참고할 수 있겠다. 올라로그에는 에피소드 슬라이더라는 이름으로 이미 Script.aculo.us를 사용하여 비스무례하게 구현해 놓기는 했지만 조엘이 말하는 '러시아 페인트공 알고리즘'이 두루~ 사용되고 있기 때문이다.

Comments