티스토리 뷰

웹프로그래밍/js

Content Glider : Prototype & Scriptaculous

공허공자 2009. 11. 5. 18:01
Glider 는 고정된 공간 내에서 아코디언과 같이 내용을 바꿔서 보여줍니다.

유명한 곳은 CODA Glider 입니다. 제작자의 사이트에서도 사용했었다는군요. (아래 그림)


* 준비물: prototype.js & scriptacoulous.js & Glider.js
glider-0.0.3.zip


다운받기 싫다면 Google Ajax Libraries 에서 로딩
또는
로딩 순서는 틀리면 안됨

Glider 는 3개의 CSS Class 를 사용한다.
  • scroller – serves as a window in which sections will appear, one at a time
  • section – wraps around contents in individual panels in the glider
  • controls – wraps around the tabs to allow navigation to any panel in the glider

제작자가 만들었던 기초적 레이아웃은 아래와 같다

예제 HTML
예제 CSS
.side-nav { float: left; width: 20px; height: 200px; } 
.side-nav a { display: block; text-indent: -9999px; width: 20px; height: 200px; } 
#nav-previous a { background: url(images/previous-arrow.png) no-repeat center center; } 
#nav-next a { background: url(images/next-arrow.png) no-repeat center center; } 

.scroller { float: left; overflow: hidden; width: 500px; height: 200px; } 
.controls { clear: both; overflow: hidden; width: 540px; height: 30px; } 
.controls ul { list-style: none; margin: 0 auto; padding: 0; width: 500px; } 

.clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }

데모 보기
glider-0.0.3.zip


[출처] http://www.teddy-o-ted.com/tutorials/compacting-contents-using-glider-script/
저작자표시 동일조건

'웹프로그래밍 > js' 카테고리의 다른 글

우편번호 자동완성 prototype + scriptAculous  (0) 2009.12.02
document.frames 오류  (0) 2009.12.02
Prototype으로 radio 버튼 그룹의 값 받기  (0) 2009.11.05
Stereotabs: Prototype 과 Scriptaculous 로 구현한 탭  (0) 2009.11.05
Prototype JS로 Checkbox들 모두 선택 구현  (1) 2009.11.05
공유하기 링크
댓글