Accordion Image 플러그인 활용하기

* Accordion Image 플러그인

- 문단 태그의 내용을 마치 아코디언 악기처럼 펼쳐졌다 줄여지는 기능을 쉽게 구현시킬 수 있는 플러그인 라이브러리 파일.

- 기본 메서드 적용 방법 (기본형)

$("요소 선택").AccordionImageMenut({     옵션 설정  });

 

- Accordion Image 옵션 종류

종류	설명
position	아코디언 방향을 가로("horizontal")로 할지 세로("vertical")로 할지 설정함.
openItem	값을 0으로 설정하면 초기 화면부터 첫 번째 배너가 펼쳐져 있게 됨. 1로 설정하면 두번째 배너가 펼쳐져 있게 됨.
openDim	펼쳐져 있는 배너의 너비를 설정함.
closeDim	닫혀 있는 배너의 너비를 설정함.
width	전체 배너의 너비를 설정함.
height	전체 배너의 높이를 설정함.
duration	전환되는 시간을 설정함.
effect	전환될 때 가속도를 설정함.
border	경계선 두께를 설정함.

 

- https://github.com/alaingoga/jquery-accordion-image-menu로 에서 플러그인 파일은 다운로드 받을 수 있음.

- Accordion Image 사이트(http://web-argument.com/2011/03/07/jquery-accordion-image-menu-plugin/)에서 완성된 예제 및 적용된 옵션(option( 코드를 확인할 수 있음.

 

 

내용 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)