This repository has been archived by the owner on Jan 8, 2018. It is now read-only.
jindo.m.Tab
jindo.m.SlideTab 전환을 위해서도 이 문서를 참고하세요.
- 마크업은 시멘틱하며 접근성을 준수하고 있는가? 아래 코드 처럼 탭버튼과 콘텐츠 영역 사이에 "href - id" 속성이 연결되여야 한다.
- 모바일 친화적이며 반응형을 지원하는가?
- CSS가 분리, 구조화 되어 있고 커스텀이 쉬운가?
- 파일 사이즈는 적당한가?
- deep linking (원하는 탭으로 링크 이동, 뒤로가기 하면 선택했던 탭 유지)하는가?
- 필요할 경우 세로탭 혹은 중첩탭이나 탭 항목에 드롭다운을 만들 수 있는가?
| type | semantic | accessibility | mobile | deep linking | effect | expends | license |
|---|---|---|---|---|---|---|---|
| jQuery UI Tabs | ○ | ○ | × | × | × | × | MIT |
| PWS Tabs | ○ | × | ○ | × | △ | × | MIT |
| Sky Tabs | ○ | △ | ○ | × | ○ | ○ | $5 |
| ZOZO TABS | ○ | △ | ○ | ○ | ○ | ○ | $8 |
- semantic: 마크업 구조는 시멘틱 한가?
- accessibility: 접근성을 준수하는가. 특히 키보드 운영이 가능한가?
- mobile: 반응형 및 모바일에서 사용가능한가?
- deep linking: deep linking을 지원하는가?
- effect: 탭 전환 애니매이션 효과를 풍부하게 지원하는가?
- expends: 세로탭, 다중탭 등 확장 옵션을 제공하는가?
- 간단하고 기본적인 tab이면 직접 구현하는게 어렵지 않다.
- 비교적 단순한 기능을 원한다면 jQuery UI Tabs이나 PWS Tabs를 사용
- 다양한 애니메이션 효과 등을 원한다면 Sky Tabs나 ZOZO TABS를 사용(라이센스 확인 필요)
- 컴포넌트 사용시 브라우저 커버리지 확인 필요
- Ajax 콘텐츠 로딩
- 마우스오버로 탭 선택
- 키보드 단축키
- 콘텐츠 영역 토글
- 탭 순서 이동
- 탭 추가, 제거
- [jQuery UI CSS framework]을 통해 다양한 스타일 설정 가능하지만 디테일한 수정은 상대적으로 복잡함.
- jQuery UI core, Widget Factory, Effect Core에 의존적.
- deep linking 지원안함.
- 모바일 지원안함. 모바일은 jQuery Mobile을 사용해야 함.
http://alexchizhov.com/pwstabs/
- 반응형 지원
- data-*로 운영 가능
- HTML5 data-*로 운영 가능가능
- 8종의 컬러 테마 기본 제공
- 다양한 콘텐츠 전환 효과(sacle, slide left/right, slide top/down)
- IE8+
http://voky.com.ua/showcase/sky-tabs/
- 7가지 탭 버튼 위치 설정(top left, top right, top center, top justfy, top left+right, left, right)
- 9가지 컬러 테마 기본 지원
- 반응형 지원
- 12가지 콘텐츠 전환 효과(flip, scale, fade, rotate, slideup, slide up-right, slide down-right, slide down, slide down-left, slide left, slide up-left)
- step
- 중첩탭
- IE8+
- 라이센스 비용 $5
- 반응형 지원
- 키보드 단축키
- Ajax 콘텐츠 로딩
- 콘텐츠 자동 전환(일정 시간이 지나면 다음 탭 컨텐츠로 자동 전환함)
- deep linking
- HTML5 data-*로 운영 가능가능
- 다양한 테마
- 다양한 콘텐츠 전환 효과. 가능한 경우 transition 사용
- 중첩탭
- IE8+
- 라이센스 비용 $8