웹사이트 탭 기능(최신 글 등) - jquery

 

꽤 오래전에 구입한 도서를 참고해서 만들고 사용한 코드인데, 책 제목은 생각이 안 나네요.

 

몇 해 전부터 jquery 같은 JS 플러그인 보단 순정(바닐라) javascript 가 인기를 끌고 있지만, 케케묵은 코드 공개해 봅니다.

실무에 여러 번 사용했던 코드지만 검증해 보고 사용해 보세요.

 

1. css style입니다.

<style>
#lt_tabs {margin:0; margin-top:50px; padding:0; list-style:none;}
#lt_tabs li{display:inline; padding:10px; border:1px solid #ccc;}
.lt_active {background-color:#336699;}

#lt_tabContent{padding:20px; border:1px solid #ccc;}
.lt_content { display:none; }
.lt_active_content {display:block; background-color:#eee;}
</style>

2. html 부분입니다.

<ul id="lt_tabs">
    <li data-tab="lt_tab_01">lt_tab_01</li>
    <li data-tab="lt_tab_02">lt_tab_02</li>
</ul>
<div id="lt_tabContent">
    <div data-tab="lt_tab_01" class="lt_content">asdfas</div>
    <div data-tab="lt_tab_02" class="lt_content">121212</div>
</div>

 

 

3. 자바스크립트 - jquery 부분입니다.

문서 상단에 jquery js를 불러와야 정상 작동됩니다.

 

<script>
/* 1.4~ 버전일경우 on 대신 delegate 사용하면 됨  element.delegate("li", "click", func~ )  */
jQuery.fn.tabs = function(control){
    var element = $(this); //ul li
    control = $(control); // div content
    
    element.on("click", "li", function(){
        var tabName = $(this).attr("data-tab");
        element.trigger("change.tabs", tabName);
    });
    
    element.bind("change.tabs", function(e, tabName){
        element.find("li").removeClass("lt_active");
        element.find(">[data-tab='"+ tabName + "']").addClass("lt_active");
    });
    
    element.bind("change.tabs", function(e, tabName){
        control.find(">[data-tab]").removeClass("lt_active_content");
        control.find(">[data-tab='"+ tabName +"']").addClass("lt_active_content");
    });
    
    var firstName = element.find("li:first").attr("data-tab");
    element.trigger("change.tabs", firstName);
    control.find(">[data-tab='"+ firstName +"']").addClass("lt_active_content");
        
    return this;
}


// 최신글 탭 롤링
jQuery.fn.tabs_rolling = function(control, rolling){
    var element = $(this); //ul li
    control = $(control); // div content
    
    var m_delay = 3000;
    var start = 0;
    var len = element.find("li").length;
    var m_timer;
    
    function rolling_start(num){
        if(num) {
            start = num;
            m_timer = setInterval(tab_rolling, m_delay);
        } else {
            m_timer = setInterval(tab_rolling, m_delay);
        }
    }
    /*
    element.on("mouseover", "li", function(){
        var tabName = $(this).attr("data-tab");
        element.trigger("change.tabs", tabName);
        
        if(rolling == 'y') {
            clearInterval(m_timer);
            
            start += 1;
            if(start > len - 1) { start = 0; } //tab 갯수 수정
            var re_num = start;
            console.log(re_num);
            
            rolling_start(re_num);
        }
    });
    */
    element.on({
        mouseenter:function(){
            var tabName = $(this).attr("data-tab");
            element.trigger("change.tabs", tabName);
            
            if(rolling == 'y') {
                clearInterval(m_timer);
            }
        },
        mouseleave:function(){
            if(rolling == 'y') {               
                start = $(this).index() + 1;
                if(start > len - 1) { start = 0; } //tab 시작번호 수정
                var re_num = start;

                rolling_start(re_num);
            }
        }
    }, "li");

    
    element.bind("change.tabs", function(e, tabName){
        element.find("li").removeClass("lt_active");
        element.find(">[data-tab='"+ tabName + "']").addClass("lt_active");
    });
    
    element.bind("change.tabs", function(e, tabName){
        control.find(">[data-tab]").removeClass("lt_active_content");
        control.find(">[data-tab='"+ tabName +"']").addClass("lt_active_content");
    });
    
    var firstName = element.find("li:first").attr("data-tab");
    element.trigger("change.tabs", firstName);
    control.find(">[data-tab='"+ firstName +"']").addClass("lt_active_content");
    
    
    //console.log(len);
    
    function tab_rolling() {
        element.find("li").each(function(e){
            if(start == e) {
                var tabName = $(this).attr("data-tab");
                $(this).trigger("change.tabs", tabName);
            } else {
                //alert('ss');
            }
        });
        start += 1;
        if(start > len - 1) { start = 0; }
    }
    
    if(rolling == 'y') {
         rolling_start();
    }
    
    return this;
}


$("ul#lt_tabs").tabs("#lt_tabContent");
$("ul#lt_tabs2").tabs_rolling("#lt_tabContent2", "y");

</script>

 

tabs 함수는 탭 형태로 만들어 주고, tabs_rolling 함수는 탭 자동 롤링 기능입니다.

 

표기법(네이밍)은 프로그래밍 언어 다양하게 공부하다 보니 짬뽕으로 되어 있네요~;; 요즘은 그냥 소문자-소문자가 편하다는 생각을 하는데 습관적으로 언더바( _ ) 또는 처음, 중간 대문자 사용하고 있습니다.

예전에 작업하고 기록해 둔 코드기 때문에, 혹시 필요하면 조금 더 다듬어서 사용하시길 바랍니다.

 

감사합니다.