탭 메뉴 프로토타입 Ver.1 - tab menu

tab menu prototype Ver. 1

프로토타입 기반의 탭 메뉴 버전입니다.

data-* 프로퍼티로 컨트롤되는 탭메뉴에 대해 알아봅니다.

마크업 구조

다음은 탭 메뉴에 대한 마크업 구조입니다.

html

<ul class="tab-type01" data-tab="one">
	<li><a href="#tab1">재취업 소식</a></li>
	<li><a href="#tab2"><span>창업 소식 <br> 두줄 탭</span></a></li>
	<li><a href="#tab3">그외 소식</a></li>
</ul>

<div class="panel-wrap">
	<ul class="panel-group" data-tabCont="one">
		<li id="tab1">
			<h3 class="hidden">재취업 소식에 대한 내용</h3>
			<div>
				Lorem ipsum dolor sit amet,  elit. Est, sapiente. <br>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, sapiente. <br>
				Lorem ipsum dolor sit amet,  sapiente.
			</div>
		</li>
		<li id="tab2">
			<h3 class="hidden">창업소식에 대한 내용</h3>
			<div>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, sapiente. <br>
				Lorem ipsum dolor sit amet,  sapiente.<br>
				Lorem ipsum dolor sitsapiente.<br>
				Lorem ipsum dolor sit amet,  elit. Est, sapiente. 
			</div>
		</li>
		<li id="tab3">
			<h3 class="hidden">그외 소식에 대한 내용</h3>
			<div>
				Lorem ipsum dolor sit amet,  elit. Est, sapiente. <br>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, sapiente. <br>
				Lorem ipsum dolor sit amet,  sapiente.
			</div>
		</li>
	</ul>
</div>

CSS Style

탭 메뉴 스타일은 사용자 정의에 따라 정의하도록 합니다.

이 글에서는 다음의 CSS Style 로 구성되어 있습니다.

css

* {margin: 0;padding: 0;}
li {list-style: none}
.hidden {bottom: 0;clip: rect(0,0,0,0); height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;}

.tab-type01 {width: 100%; height: 42px;margin-bottom: 20px;}
.tab-type01:after {content: ""; display: block; clear: both; }
.tab-type01 li { position: relative; float: left; border-bottom: 1px solid #fff; }
.tab-type01 li a {display: block; height: 42px; border: solid #bbb; border-width: 1px 1px 1px 0; background-color: #fff; padding: 11px 30px 13px; font-size: 16px;text-align: center;}
.tab-type01 li a span {display: inline-block;margin-top: -8px;}
.tab-type01 li a:hover { color: #d71921; }
.tab-type01 li.on a {border: solid #d72228; border-width: 1px 1px 0 1px; margin-left: -1px; font-weight: bold; color: #d711921;}
.tab-type01 li.on:after {content: ""; display: block; width: 100%;position: absolute;left: 0;top: 0;border-top: 3px solid #d72228;}
.tab-type01 li:first-child.on a {margin-left: 0;}
.panel-group {position: relative;}
.panel-group li {display: none; position: absolute;left: 0;}
.panel-group li:first-child {display: block;}

탭 메뉴 Script

프로토타입 기반의 탭 메뉴 플러그인 JS는 아래와 같습니다.

JavaScript

(function (global, $) {

    var pluginName = 'tab';

    function TabPlugin($selector, dataVaule, options) {
        this.$selector = $selector;
        this.dataVaule = dataVaule;
        this.config = $.extend({}, this.defaults, options || {});
        this.detect = {
            anchor : 'a',
            tabLis : this.$selector.children('li'),
            targetCont : $('[' + this.config.targetCont + '="' + this.dataVaule + '"]')
        };

        this.init(this.detect);
    }

    TabPlugin.prototype = {
        defaults : {
            targetCont : 'data-tabCont',
            tabActive : 'on',
            fade : false,
            fadeSpeed : 400,
            visibleCont : 1
        },
        init : function (detect) {
            this.setEvent(detect);
            this.visibleTrigger(detect);
        },
        setEvent : function (detect) {
            var _self = this;
            this.$selector.on('click focus', detect.anchor, function () {
                var $this = $(this),
                    idx = $this.closest('li').index();
                _self.radioClass($this);
                _self.config.fade ? _self.fadeEffect(idx) : _self.defaultEffet(idx);
                return false;
            });
        },
        radioClass : function ($this) {
            var $targetClass = $this.closest('li'),
                isActived = $targetClass.siblings('li.' +  this.config.tabActive );
            if( !!isActived) {
                isActived.removeClass(this.config.tabActive)
            }
            $targetClass.addClass(this.config.tabActive);
        },
        checkIndex : function (idx) {
            this.isShow = this.detect.targetCont.children().eq(idx);
        },
        defaultEffet : function (idx) {
            this.checkIndex(idx);
            this.isShow
                .show()
                .siblings()
                .hide();
        },
        fadeEffect : function (idx) {
            this.checkIndex(idx);
            this.isShow
                .stop()
                .fadeTo(this.config.fadeSpeed, 1)
                .siblings()
                .stop()
                .fadeTo(this.config.fadeSpeed, 0)
        },
        visibleTrigger : function (detect) {
            detect.tabLis.eq(this.config.visibleCont -1)
                .children('a').trigger('click');

        }
    };

    $.fn[pluginName] = $.fn[pluginName] || function (options) {
        var $this = this;
        return $.each($this, function (idx, el) {
            var $selector = $this.eq(idx);
                //console.log($selector.data('tab'));
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName, new TabPlugin($selector, $selector.data('tab'), options));
            }
            return $selector;
        });
    };

})(window, window.jQuery);

// 탭 메뉴 플러그인 호출 및 옵션 디폴트값
$('[data-tab]').tab({
    targetCont : 'data-tabCont',
    tabActive : 'on',
    fade : false,
    fadeSpeed : 400,
    visibleCont : 1
});

Code View

See the Pen 탭메뉴 버전1 프로토타입 by jaeheekim (@jaehee) on CodePen.

Jaehee's WebClub