[jQuery] 탭전환시 딜레이 적용하기

jQuery 플러그인 형식으로 만들어본 첫 작품이라고 해야할까? ㅎㅎ 탭전환시에 딜레이를 적용하는 것이다. 잠깐 머리를 식힌다는 생각으로 만들기 시작했는데 하다보니 덩치가 커져서 마우스오버 뿐만 아니라 키보드로 이동시에도 사용할 수 있도록 했다. 대신 키보드로 이동시는 딜레이가 적용되지 않는다. 또 딜레이가 적용되기 때문에 어떤 탭을 보다가 빠르게 마우스를 이동하게 되면 탭과 컨텐츠 내용이 일치하는 않는 경우가 있는데 보이는 컨텐츠에 해당하는 탭으로 전환되도록 했다. 아래는 코드이다.

(function($) {
    $.fn.hoverTab = function(timeout, selector, hoverclass, content, contentclass) {
        var cfg = {
            timeout: 150,
            selector: "h3",
            hoverclass: "sir_lt_hon",
            content: "div",
            contentclass: "sir_lt_on"
        };

        if(typeof timeout == "number") {
            cfg = $.extend(cfg, { timeout: timeout });
        } else if(typeof timeout == "object") {
            cfg = $.extend(cfg, timeout);
        }

        if(typeof selector == "object") {
            cfg = $.extend(cfg, selector);
        }

        var $el = this.find(cfg.selector);
        var $content = this.find(cfg.content);
        var idx, delay;

        $el.on("mouseover", function() {
            idx = $el.index($(this));
            $(this).data("over", true);
            $el.removeClass(cfg.hoverclass);
            $(this).addClass(cfg.hoverclass);
            delay = setTimeout( function() { showcontent(idx) }, cfg.timeout );
        });

        $el.on("focusin", function() {
            idx = $el.index($(this));
            $(this).data("over", true);
            $el.removeClass(cfg.hoverclass);
            $(this).addClass(cfg.hoverclass);
            delay = setTimeout( function() { showcontent(idx) }, 0 );
        });

        $el.on("mouseout focusout", function() {
            $(this).data("over", false);
            $el.removeClass(cfg.hoverClass);
            $content.each(function(index) {
                if($(this).hasClass(cfg.contentclass)) {
                    $el.eq(index).addClass(cfg.hoverclass);
                    return false;
                }
            });
            clearTimeout(delay);
        });

        var showcontent = function(idx)
        {
            if($el.eq(idx).data("over") == true) {
                $content.removeClass(cfg.contentclass);
                $content.eq(idx).addClass(cfg.contentclass);
            }
        }

        return;
    };
}(jQuery));

위 코드에서 cfg에 포함된 각각의 설정값의 역할은 다음과 같다.

timeout: 150, // 딜레이 1/1000초 단위로 입력
selector: "h3", // 탭 엘리먼트 셀렉터
hoverclass: "sir_lt_hon", // mouseover 시 selector에 추가될 class
content: "div", // 컨텐츠 엘리먼트 셀렉터
contentclass: "sir_lt_on" // 보여질 컨텐츠 엘리먼트에 추가될 class

기본사용법은 아래와 같다.

$("#sir_sol_g4").hoverTab();
$("#sir_sol_g4").hoverTab(200);
$("#sir_sol_g4").hoverTab( { timeout: 200, selector: "h3",  hoverclass: "sir_lt_hon", content: "div", contentclass: "sir_lt_on" } );
$("#sir_sol_g4").hoverTab(200, { selector: "h3",  hoverclass: "sir_lt_hon", content: "div", contentclass: "sir_lt_on" } );

처음 만들어보는 것이라 시간이 제법 걸렸는데 jQuery 플러그인 방식에 익숙해지면 여러 가지를 만들어 볼 수 있을 것 같다.