간단한 아코디언 패널 구현
- jQueryUI를 이용하여 간단하게 구현이 가능하다
1. 마크업 규칙
- 패널 전체 : <div>로 묶는다
- 타이틀 : 요소
- 콘텐츠: <div> 로 정의
2. 구문
$(패널리스트).accordion({매개변수: 값})
1) 매개변수
매개변수 |
개요 |
기본값 |
active |
실행시 연 패널 |
0(앞부분) |
animate |
애니메이션 방법 |
{} |
collapsible |
패널을 전부 닫히게 할지 |
false |
event |
패널을 열 때의 이벤트 |
click |
header |
헤더가 되는 요소 |
> li > : first-child> : not(li):even |
heightStyle |
패널의 높이 |
auto |
icons |
적용하는 아이콘 |
|
2) heightStyle: content
- auto로 값을 하면 모든 패널의 높이가 같아서 특정 패널은 여백이 생길수 있다. content로 지정한다면 내용에 따라 높이가 변한다
3. 구현
'Front-End > jQueryUI' 카테고리의 다른 글
| [jQueyUI] 간단한 대화상자 구현 (0) | 2017.01.19 |
|---|---|
| [jQueryUI] 간단한 탭 패널 구현 (0) | 2017.01.19 |
| [jQueryUI] 위젯의 열고닫는 시각적효과 - hide, show, animate (0) | 2017.01.18 |
| [jQueryUI] 위젯위치 제어 - position 매개변수 (0) | 2017.01.18 |
| [jQueryUI] jQueryUI 표준 아이콘 세트 이용하기 (0) | 2017.01.16 |
리딩리드