이번에는 jquery 기반의 tab 플러그인을 사용하기 위해 테스트를 해 봤다.
http://stilbuero.de/jquery/tabs/
위의 사이트에서 참고 하여 가지고 왔다.
항상 그렇듯 가장 좋은 샘플은 Simple!!! 간단한 샘플이다.
그러나 대충 코드를 보니 심플과 페이드가 별 차이가 없는 듯 하다.
그래서 페이드를 선택!!
자 그럼 페이드만 남겨 놓은 소스를 음미해 보자
외부 링크되는 스크립트는 3가지이다.
<SCRIPT src="../lib/jquery.js" type=text/javascript></SCRIPT>
<SCRIPT src="jquery.tabs.pack.js" type=text/javascript></SCRIPT>
이미 알고 있듯이 jquery.js 는 라이브러리이며 tab 과 관련된 라이브러리는 jquery.tabs.pack.js 이다. 기억해 두자.
그리고 html 소스를 보자!
<div id="container-4">
<ul>
<li><a href="#fragment-10"><span>One</span></a></li>
<li><a href="#fragment-11"><span>Two</span></a></li>
<li><a href="#fragment-12"><span>Three</span></a> </li>
</ul>
<div id="fragment-10">탭1</div>
<div id="fragment-11">탭2</div>
<div id="fragment-12">탭3</div>
</div>
jquery 샘플들의 특징인 겸손한 html!!!! 말 그대로 완전 분리 되어 있다. 여기서 주목할 점은 href 의 경로가 #id 로 되어 있다는 점이다.
다들 알고 있겠지만 #id로 되어 있으면 해당하는 id 위치로 찾아가는 책갈피 기능이 된다. 그러므로 스크립트가 실행될 수 없다면 책갈피 위치인 div가 존재하는 곳으로 위치 이동을 하게 됨으로써 웹 접근성이 구현 되게 된다.
그럼 javascript를 보자.
<script type="text/javascript">
$(function() {
$('#container-4').tabs({ fxFade: true, fxSpeed: 'fast' });
});
</script>
우오~ 간단 하다!!! 믓찌다!!! 이걸로 끝! 내면 될려나?
설명 쫌 붙여 보자.. 우선 화면을 꾸미기 위해서 class 들을 분류할 필요가 있다.
navClass: 'tabs-nav',
selectedClass: 'tabs-selected',
disabledClass: 'tabs-disabled',
containerClass: 'tabs-container',
hideClass: 'tabs-hide',
loadingClass: 'tabs-loading',
다음의 옵션을 가질수 있다.
navClass : 탭의 헤더 부분을 포함하는 UL 의 class , Default : tabs-nav
selectedClass : 선택된 탭 Li 태그의 class
disabledClass : 비활성화된 탭 Li 태그의 class
containerClass : 내용 div의 class
hideClass : 숨겨진 내용 div의 class
위의 옵션을 다양하게 조절하여 표현 할 수 있다.
음.. 다 맘에 드는데.. 하나가 없다.. click 에서만 셋팅이 된다는 것이다. 일반적인 요구사항 중에 mouseover가 발생 했을때 탭이 변경되도록 해 달라는 요청이 꽤 많은 것을 고려해서 tabs 플러그인을 수정해 보았다.
1. 옵션을 추가한다.
settings = $.extend({
initial: (initial && typeof initial == 'number' && initial > 0) ? --initial : 0,
disabled: null,
bookmarkable: $.ajaxHistory ? true : false,
remote: false,
spinner: 'Loading…',
hashPrefix: 'remote-tab-',
fxFade: null,
fxSlide: null,
fxShow: null,
fxHide: null,
fxSpeed: 'normal',
fxShowSpeed: null,
fxHideSpeed: null,
fxAutoHeight: false,
onClick: null,
onHide: null,
onShow: null,
navClass: 'tabs-nav',
selectedClass: 'tabs-selected',
disabledClass: 'tabs-disabled',
containerClass: 'tabs-container',
hideClass: 'tabs-hide',
loadingClass: 'tabs-loading',
tabStruct: 'div',
selectEvent : "click"
}, settings || {});
2. 이벤트 바인딩 되는 곳을 settings 에서 불러온다.
// attach click event
tabs.bind(settings.selectEvent, function(e) {
3. 테스트 한다!
$('#container-4').tabs({ fxFade: false, fxSpeed: 'fast',selectEvent:'mouseover' });
Fade 옵션을 false로 바꾸었다 mouseover를 했을때 바뀌는것은 굉장히 빠르게 움직여야 하기 때문에 Fade가 들어가면 좋지 않은듯하다.
===========================================================================================================================
요구사항 1. 탭이 좌측에 위치할 수 있어야 한다.
한참 소스를 수정하다가 생각하니.. navClass 라는 속성이 있던것이 생각이 났다.
그래서 navClass를 tabs-nav-left 라 하고 CSS를 정의 하였다.
.tabs-nav-left
{
float:left; PADDING-RIGHT: 0px; PADDING-LEFT: 4px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none ;DISPLAY: inline-block
}
.tabs-nav-left LI {
MARGIN: 0px 0px 0px 1px; min-width: 84px
}
그리곤 script에서 tabs 정의
$('#container2').tabs({ navClass : "tabs-nav-left"});
저렇게 하면 좌측으로 탭이 가서 붙는다.
물론 .tabs-nav-left 의 하위 컨텐츠에 대한 스타일 시트는 모두 수정해 주어야 한다.