간단한 탭 구현
1. 마크업 규칙
- 탭 리스트 : <ul><li>
- 패널 본체 : <div>
- 탭과 패널 : 페이지내 링크로 표현
- 탭 패널 전체 : <div>
2. 구문
$(탭패널).tabs({매개변수: 값..})
1) 매개변수
매개변수 |
개요 | 기본값 |
active |
실행 시열리는 패널 | 0 |
collapsible |
패널을 닫히게 할지 | false |
disabled |
무효로 하는 탭의 경우 모든 탭을 무효화 | false |
event |
탭을 열 때의 이벤트 | click |
heightStyle |
패널의 높이 | content |
hide |
패널을 감출 때 애니메이션 |
|
show |
패널을 표시 할 때 에니메이션 |
|
2) collapsible: true
- 패널을 펼치거나 접을 수 있다
3. 구현
4. 외부 파일화
- 탭패널을 클릭하여 외부파일을 읽어 올 수 있다
'Front-End > jQueryUI' 카테고리의 다른 글
| [jQueryUI] AJAX를 이용한 비동기적 대화상자 (0) | 2017.01.23 |
|---|---|
| [jQueyUI] 간단한 대화상자 구현 (0) | 2017.01.19 |
| [jQueryUI] 간단한 아코디언 패널 구현 (0) | 2017.01.19 |
| [jQueryUI] 위젯의 열고닫는 시각적효과 - hide, show, animate (0) | 2017.01.18 |
| [jQueryUI] 위젯위치 제어 - position 매개변수 (0) | 2017.01.18 |
리딩리드