탭패널 양식 만들기(javascript/jQuery)

2019. 9. 24. 13:28

HTML과 CSS코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Tab-Panel</title>
    <link rel="stylesheet" type="text/css" href="tabbox.css">
    
</head>
<body>
    <div class="tab-box" id="tabBox">
        <div class="tab-menu">
            <ul class="item-list">
                <li class="tab-item">
                    <a href="#">menu1</a>
                </li>
                <li class="tab-item">
                    <a href="#">menu2</a>
                </li>
                <li class="tab-item">
                    <a href="#">menu3</a>
                </li>
                <li class="tab-item">
                    <a href="#">menu4</a>
                </li>
                <li class="tab-item">
                    <a href="#">menu5</a>
                </li>
            </ul>
        </div>
        <div class="tab-contents">
            <div id="contents0">
                <p>contents1</p>
            </div>
            <div id="contents1">
                <p>contents2</p>
            </div>
            <div id="contents2">
                <p>contents3</p>
            </div>
            <div id="contents3">
                <p>contents4</p>
            </div>
            <div id="contents4">
                <p>contents5</p>
            </div>
        </div>
    </div>

    <!--제이쿼리-->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="tabpanel.js"></script>
</body>
</html>

@charset "UTF-8";
a:link {text-decoration:none; color:#000;}
a:visited {text-decoration:none; color:#000;}
a:active {text-decoration:none; color:#000;}
a:hover {text-decoration:none; color:#000;}

.tab-box{
    border: solid 1px #000;
    border-radius: 5px;
    width: 700px;
    height: 300px;
    left: 100px;
    top: 100px;
    position: relative;
}

.tab-box .tab-menu{
    position: relative;
    top: -32px;
    margin-left: 60px;
}

.tab-box .item-list{
    height: 44px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tab-box .item-list .tab-item{
    position: relative;
    height: 30px;
    width: 99px;
    float: left;
    border: solid 1px #000;
}

.tab-box .item-list .tab-item:hover {
    background-color: #fff000;
}

.tab-box .item-list .tab-item.over {
    background-color: #fff000;
}

.tab-box .item-list .tab-item.select {
    background-color: #666;
    height: 30px;
}

.tab-box .item-list .tab-item a {
    width: 100%;
    display: block;
    text-align: center;
    margin-top: 3px;
}

.tab-panel .tab-contents {
    width: 700px;
    height: 300px;
    overflow: hidden;
    position: relative;
    text-align: center;
}
#contents0, #contents1, #contents2, #contents3, #contents4 {
    opacity: 0;
}

서식보다는 기능을 만들어 놓는 것이 목적이기에 서식은 대충 만들었습니다.

위에 있는 html과 css를 실행하면 다음과 같은 모양이 나옵니다.

이제 인덱스 부분을 누르면 해당하는 컨텐츠를 보여주고 인덱스 부분을 표시해주는 기능을 구현해보겠습니다.

제이쿼리로 탭기능 구현하기

$(document).ready(function(){
    tabPanel("#tabBox");
});

페이지가 준비되면 tabPanel함수를 실행하겠습니다.

function tabPanel(selector, selectIndex){
    let $selectTabItem = null;
    let $selectContent = null;
    const $tabItems = $(selector).find(".tab-menu .tab-item");
    const $tabContents = $(selector).find(".tab-contents div");
    init();
    initEvent();
    setSelectTabItemAt(selectIndex, false);
}

tabPanel 함수는 selector와 selectIndex를 인자로 받습니다.

우선 우리가 필요한 변수와 상수를 정의해줍니다.

여기서 let과 const의 차이를 간단하게 알아보겠습니다.

let은 변수에 대한 선언입니다. 그러므로 해당되는 값이 나중에 바뀔 수 있습니다.

const는 상수에 대한 선언입니다. 그러므로 해당되는 값은 바꿀 수 없습니다.

function init(){
        if(selectIndex==undefined){
            selectIndex=0;
        }
    }

init함수는 초기값을 설정해줍니다.

selectIndex가 안정해져있으면 0이 기본값입니다.

function initEvent(){
        $tabItems.on("click", function(e){
            e.preventDefault();
            setSelectTabItemAt($(this).index());
        })
    }

initEvent는 클릭이벤트에 대한 내용입니다. 클릭이벤트가 발생하면, preventDefault를 통해 이벤트 전파를 막고 setSelectTabItemAt함수에 클릭 이벤트가 발생한 리스트의 인덱스를 입력합니다.

function setSelectTabItemAt(index, effect){
        setSelectTabItem($tabItems.eq(index));
        setSelectTabContentAt(index, effect);
        $("#contents"+index).css("opacity", 1);
    }

setSelectTabItemAt은 index와 effect를 매개변수로 합니다.

$tabItems.eq(index)에 해당하는 요소를 setSelectTabItem함수에 입력합니다.

기본값이 모든 contents에 opacity가 0이므로 초기에 설정된 index에 맞춰서 contents의 opacity를 1로 바꿔주어 표시가 되도록 합니다.

function setSelectTabItem($item){
        if($selectTabItem) {
            $selectTabItem.removeClass("select");
        }
        $selectTabItem = $item;
        $selectTabItem.addClass("select");
    }

setSelectTabItem은 $item을 받아서 $selectTabItem에 입력합니다.

만약에 $selectTabItem이 이미 정의되어 있으면 해당 요소에 select클래스를 먼저 지워줍니다. 그다음에 해당요소에 select클래스를 더 해줍니다.

function setSelectTabContentAt(index, effect){
        if($selectContent!=null){
            if(effect!=false){
                $selectContent.animate({opacity:"0"}, 500);
            }else {
                $selectContent.css("opacity", 0);
            }
        }
        $selectContent = $tabContents.eq(index);
        if(effect!=false){
            $selectContent.animate({opacity:"1"}, 500);
        }else {
            $selectContent.css("opacity", 1);
        }

setSelectTabContentAt은 내용부분을 index에 맞게 표시할 수 있게 합니다.

animate({opacity:"1"}, 500);과 같은 이벤트를 통해 서서히 사라지고 서서히 나타나게 합니다.

자바스크립트 최종코드

$(document).ready(function(){
    tabPanel("#tabBox");
});
function tabPanel(selector, selectIndex){
    let $selectTabItem = null;
    let $selectContent = null;
    const $tabItems = $(selector).find(".tab-menu .tab-item");
    const $tabContents = $(selector).find(".tab-contents div");

    function init(){
        if(selectIndex==undefined){
            selectIndex=0;
        }
    }
    
    function initEvent(){
        $tabItems.on("click", function(e){
            e.preventDefault();
            setSelectTabItemAt($(this).index());
        })
    }

    function setSelectTabItem($item){
        if($selectTabItem) {
            $selectTabItem.removeClass("select");
        }
        $selectTabItem = $item;
        $selectTabItem.addClass("select");
    }

    function setSelectTabItemAt(index, effect){
        setSelectTabItem($tabItems.eq(index));
        setSelectTabContentAt(index, effect);
        $("#contents"+index).css("opacity", 1);
    }
    function setSelectTabContentAt(index, effect){
        if($selectContent!=null){
            if(effect!=false){
                $selectContent.animate({opacity:"0"}, 500);
            }else {
                $selectContent.css("opacity", 0);
            }
        }
        $selectContent = $tabContents.eq(index);
        if(effect!=false){
            $selectContent.animate({opacity:"1"}, 500);
        }else {
            $selectContent.css("opacity", 1);
        }
    }
    init();
    initEvent();
    setSelectTabItemAt(selectIndex, false);
}

저작자표시

'웹개발(웹퍼블리셔) > 프론트엔드(HTML, CSS, JAVASCRIPT)' 카테고리의 다른 글

SQL INJECTION(SQL 인젝션, 웹보안) (0)	2019.11.17
Vue.js 시작하기 1일차(선언적 렌더링하기) (0)	2019.10.11
(JavaScript)자바스크립트 타이머 setTimeout, setInterval, clearInterval (0)	2019.09.12
(jQuery) 제이쿼리 핵심 메소드 정리(pdf) (0)	2019.09.10
가상요소(Pseudo-Element) ::before ::after (0)	2019.08.19

포림프 노트