이번에는 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&#8230;',
        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 의 하위 컨텐츠에 대한 스타일 시트는 모두 수정해 주어야 한다.

2009/08/07 21:23 2009/08/07 21:23

Trackback Address :: 이 글에는 트랙백을 보낼 수 없습니다