WAI-ARIA의 tab, 아직 사용하긴 이르다. 라는 글을 썼었는데, 탭을 헤딩으로 탭 내용을 헤딩에 이어지는 컨텐츠로 구성한 마크업을 위한 자바스크립트 라이브러리는 찾기가 어려워 하나 만들었다. 이름하여 flowTab. (기본적으로 자연스럽게 흐르는 컨텐츠를 탭 UI로 만든다 하여 이렇게 지었다.)
마크업과 자바스크립트를 아래 코드와 같이 작성하면 된다.
<script type="text/javascript">
// <!--
$(function() {
$('#tabs').flowTab();
// $('#tabs').flowTab({tabSelector: '> .heading'});
});
// -->
</script>
<div id="tabs">
<h2 class="heading">tab1</h2>
<div>tab1 content <a href="#">link example</a></div>
<h2 class="heading">tab2</h2>
<div>tab2 content <a href="#">link example</a></div>
<h2 class="heading">tab3</h2>
<div>tab3 content <a href="#">link example</a></div>
</div>flowTab plugin은 몇가지 옵션이 있다.
- tabSelector: 탭을 가리키는 jQuery 선택자. (기본값:
"> .heading") - tabEnabledClass: 활성화된 탭 요소에 추가될 class명. (기본값:
"headingEnabled") - contentDisabledClass: 비활성화된 탭 내용 요소에 추가될 class명. (기본값:
"contentDisabledClass")
예제와 다운로드
예제: jQuery flowTab plugin example
다운로드: jquery.flowTab.js
no jQuery 버전
탭 이외에 특별히 jQuery를 사용하지 않는 사이트는 no jQuery 버전이 더 가볍게 동작한다.
jQuery 버전과의 약간 옵션 차이가 있다: tabSelector 옵션 대신 tabClassName 옵션을 사용한다. 루트 요소에서 탭을 찾을 때 tabClassName에 기재된 클래스명으로 찾는다. 기본값은 "heading".
아래는 코드 예제
<script type="text/javascript">
// <!--
// onload 구현은 알아서...;;
window.onload = function() {
new flowTab(document.getElementById('tab'));
// new flowTab(document.getElementById('tab'), {tabClassName: 'heading'});
};
// -->
</script>
<div id="tabs">
<h2 class="heading">tab1</h2>
<div>tab1 content <a href="#">link example</a></div>
<h2 class="heading">tab2</h2>
<div>tab2 content <a href="#">link example</a></div>
<h2 class="heading">tab3</h2>
<div>tab3 content <a href="#">link example</a></div>
</div>다운로드(no jQuery): flowTab.js