CSS, jQuery 로 만든 TAB (TAB menu), 탭메뉴, 최신글 출력 탭 > 공지사항

본문 바로가기
사이트 내 전체검색

공지사항

CSS, jQuery 로 만든 TAB (TAB menu), 탭메뉴, 최신글 출력 탭

페이지 정보

작성자 최고관리자 댓글 0건 조회 526회 작성일 19-01-28 16:58

본문

 CSS와 jQuery로 만든 TAB입니다.

페이지의 메뉴나 최신글 구성할때 유용하게 사용할 수 있습니다.

 

한페이지에 다수의 탭을 구성할 수 있으면, 1개의 탭에는 자동탭으로 설정할 수 있습니다.

 

데모페이지1 :  https://www.suu.kr/DEMO/tab.php 

데모페이지2 :  https://www.suu.kr/DEMO/tab2.php 

데모페이지2 :  https://www.suu.kr/DEMO/tab3.php 

  

CSS

[code]

<style>

ul.rumi_tabs { margin: 0; padding: 0; float: left; list-style: none; height: 40px; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 0px solid #ccc; border-top: 0px solid #ccc; width: 100%; font-size:12px; }

ul.rumi_tabs li { float: left; text-align:center; cursor: pointer; width:82px; height: 40px; line-height: 40px; border: 1px solid #ccc; border-left: none; font-weight: bold; background: #fafafa; overflow: hidden; position: relative; }/* 탭 - 메뉴 */

ul.rumi_tabs li:hover { background:#eee; color:red} 

ul.rumi_tabs li.active { background: #FFFFFF; color:#dd6666; border-top:3px solid #dd6666; border-bottom: 1px solid #FFFFFF; } /* 선택된 탭 스타일 */

.rumi_tab_container { border: 1px solid #ccc; padding:12px 8px 8px 8px; border-top: none; clear: both; float: left; width: 100%; background: #FFFFFF; height:200px; }/* 탭 내용 박스 */

.rumi_tab_content { padding: 5px; font-size: 12px; display: none; text-align:left; }

.rumi_tab_container .rumi_tab_content ul { width:100%; margin:0px; padding:0px; }

.rumi_tab_container .rumi_tab_content ul li { padding:5px; list-style:none }

.rumi_tab_box { width: 100%;}/* 탭 전체 크기 */

#TAB_A { min-height:240px; margin-bottom:30px; }

</style>

[/code]

 

 

 

HTML

[code]

<div id="TAB_A" class="rumi_tab_box">

    <ul class="rumi_tabs">

        <li rel="A_tab1">A-첫번째</li>

        <li rel="A_tab2">A-두번째</li>

        <li rel="A_tab3">A-세번째</li>

        <li rel="A_tab4">A-네번째</li>

        <li rel="A_tab5">A-다섯번째</li>

        <li rel="A_tab6">A-여섯번째</li>

        <li rel="A_tab7">A-일곱번째</li>

    </ul>

    <div class="rumi_tab_container">

        <div id="A_tab1" class="rumi_tab_content"><ul><li><a href="#">A그룹 첫번째 탭</a></li></ul></div>

        <div id="A_tab2" class="rumi_tab_content"><ul><li><a href="#">A그룹 두번째 탭</a></li></ul></div>

        <div id="A_tab3" class="rumi_tab_content"><ul><li><a href="#">A그룹 세번째 탭</a></li></ul></div>

        <div id="A_tab4" class="rumi_tab_content"><ul><li><a href="#">A그룹 네번째 탭</a></li></ul></div>

        <div id="A_tab5" class="rumi_tab_content"><ul><li><a href="#">A그룹 다섯번째 탭</a></li></ul></div>

        <div id="A_tab6" class="rumi_tab_content"><ul><li><a href="#">A그룹 여섯번째 탭</a></li></ul></div>

        <div id="A_tab7" class="rumi_tab_content"><ul><li><a href="#">A그룹 일곱번째 탭</a></li></ul></div>

    </div>

</div>

[/code]

 


 

Javascript (jQuery)

[code] 

<script>

$(function () {

    /* latest_tab(요소ID, 탭번호(열림), 자동탭[true-실행,false-정지], 시간[1000-1초]), 주의:자동탭은 1개만 사용하세요. 2개부터는 오류 발생. */

    latest_tab("TAB_A", 2, true, 3000);

});


// 자동탭의 시간을 담는 전역변수.

var tabTimer;


/*

* @param id : 요소ID (탭ID)

* @param s : 시작탭번호

* @param t : 반복시간 (1000 = 1초)

*/

function start_auto_tab(id, s, t) {

    var max_idx = $("#"+id+" ul.rumi_tabs li").length;

    tabTimer = setInterval(function() {

        

        $("#"+id+" ul.rumi_tabs li:nth-child("+s+")").trigger("click");

        //$("#"+id+" ul.rumi_tabs li").removeClass("active").removeClass("active").css("color", "#333");

        //$("#"+id+" ul.rumi_tabs li:nth-child("+s+")").addClass("active").css({"color":"#dd6666"});

        //$("#"+id+" .rumi_tab_content").hide();

        //$("#"+id+" .rumi_tab_content:nth-child("+s+")").fadeIn();


        if(s==max_idx) {

                s=1; // 탭의 마지막이면 다시 1번부터 시작

        } else {

            s++;

        }

    },t);

}


/**

* 최신글 탭메뉴 (최신글로 사용)

* @param id     : TAB ID

* @param idx    : 초기 열릴 페이지

* @param auto   : 탭 자동이동 (false=수동, true=자동)

* @param t      : 탭 자동이동시 간견 (1000 = 1초)

*/

function latest_tab(id, idx, auto, t) {


    $("#"+id+" .rumi_tab_content").hide();

    $("#"+id+" ul.rumi_tabs li:nth-child("+idx+")").addClass("active").css({"color":"#dd6666"});

    $("#"+id+" .rumi_tab_content:nth-child("+idx+")").show();


    $("#"+id+" ul.rumi_tabs li").click(function (event) {

        var target    = event.currentTarget||event.explicitOriginalTarget||event.srcElement||document.activeElement;

        $(target.parentElement.children).removeClass("active").css("color", "#333");

        $(target).addClass("active").css({"color":"#dd6666"});

        //$("#"+id+" ul.rumi_tabs li").removeClass("active").css("color", "#333");

        //$(this).addClass("active").css({"color":"#dd6666"});

        $("#"+id+" .rumi_tab_content").hide();

        var activeTab = $(this).attr("rel");

        $("#" + activeTab).fadeIn()

    });


    if(auto==true){

        

        var s = (idx+1); // 초기 열린 페이지부터 탭 자동 실행

        start_auto_tab(id, s, t);


        $("#"+id).mouseenter(function() {

            clearInterval(tabTimer);

            console.log("반복종료");

        });


        $("#"+id).mouseleave(function() {

            var re_total = $("#"+id+" ul.rumi_tabs li").index();

            var re_idx = $("#"+id+" ul.rumi_tabs li").index($("#"+id+" ul.rumi_tabs li").closest("li.active"));

            s = (re_idx + 2)

            if(s>(re_total+1)) { s=1; }

            start_auto_tab(id, s, t);

            console.log("반복시작");

        });

    }

}

</script>

[/code]


 

 

 

 

댓글목록

등록된 댓글이 없습니다.

회원로그인

다음맵 : 업체소개용지도
A그룹 두번째 탭
  • 공지사항
  • A-두번째
A그룹 첫번째 탭
A그룹 두번째 탭

접속자집계

오늘
54
어제
65
최대
121
전체
11,650

그누보드5
Copyright © SUU All rights reserved.
상단으로
하단으로