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
'Code Lab' 카테고리의 다른 글
슬라이딩 배너(페이드효과,재생,정지버튼) - Key Visual (5) | 2016.05.22 |
---|---|
Accessibility Skip Navigation Script (0) | 2016.05.21 |
Tooltip UI - 툴팁 레이어 (0) | 2016.01.26 |
스크롤 메뉴(Scroll Menu) 구현해보기 (5) | 2016.01.18 |
Accordion Pattern Collection(아코디언 메뉴) (2) | 2016.01.15 |