DIY jquery 플러그인 - 탭 라벨 전환 구현 code_jquery

/*
* jquery.tab
* 작성자: Winter Grass
* 날짜: 2010/12/07
*/
jQuery.fn.tab = function(options) {
var 설정 =
{
activeTabClass: "tab-selected",
defaultTabClass: "tab-default",
tabContainerClass: "tabContainer",
tabPanelCls: "tabPanel",
mouseoverTabClass: null,
hiddenTabClass: 'tab-hide',
tabPanel: null,
selectHandler: null,
iframeIdPrex: 'iframe_'
}

if(옵션) {
jQuery.extend(설정, 옵션);
}
//#region 공개 이벤트
$.fn.setActiveTab = function(tabIndex) {
if (tabIndex) {
return this.each(function() {
this.setActiveTab(tabIndex);
})
}
}
$.fn.getFrameByTabId = function(tabId) {
if (tabId) {
var iframeId = settings.iframeIdPrex tabId;
returnframes[iframeId];
}
return null
//#endregion 공개 이벤트
return this.each(function() {
var ts = this;
var $tabContainer = $(ts);
ts.activeTab = null;
ts.tabPanelId = null;
ts.selectedTab = null;
ts.selectedIndex = 0;
ts.iframeId = null;

//#region 'private' 메소드
this.setActiveTab = function( tabIndex) {
if (typeof (tabIndex) != "number") {
return;
}

var selectedTab = $('li:visible', $tabContainer).eq (tabIndex );
if (selectedTab.length == 0) {
return;
}
//활성 탭 클릭
if (ts.iframeId == settings.iframeIdPrex selectedTab. attr( 'id')) {
return;
}
else {
if (ts.iframeId != null) {
//$(frames[activeTabId]).hide( );
$("iframe").hide();
}
}
$('.' settings.activeTabClass, $tabContainer).removeClass(settings.activeTabClass)
ts.activeTab = selectedTab;
ts.activeTab.addClass(settings.activeTabClass);
var target = ts.activeTab.attr('target')
if (typeof (target) != 'string ') {
return;
}
ts.iframeId = settings.iframeIdPrex selectedTab.attr('id')
if ($('#' ts.iframeId).length == 0 ) {
var iframe = $('')
iframe.attr('id', ts.iframeId)
.attr('src', target)
.css({ 너비: '100%', 높이: '100%' })
iframe.appendTo(settings.tabPanel)
}
else {
$(' #' ts.iframeId).show();
}
};
varinitialTabs = function() {
$tabContainer.addClass(settings.tabContainerClass)
$(settings. tabPanel) .addClass(settings.tabPanelCls);
var stopFloatDiv = $('')
stopFloatDiv.css({clear: 'both', height: '0px' })
.insertAfter($tabContainer);
$('li', $tabContainer).each(function(i) {
var $tab = $(this);
var $link = $ ('a', $tab);
var href = $link.attr('href')
$link.attr('href', "#"); attr( '대상', href)
.addClass(settings.defaultTabClass)
.click(function(e) {
ts.selectedTab = $tab;
ts.selectedIndex = i;
if (typeof (settings.selectHandler) == "function") {
settings.selectHandler();
}
else {
ts.setActiveTab(i)
; >} )
})
};
//#endregion 'private' 메소드
initialTabs()
ts.setActiveTab(0); //기본값으로 설정 .
})
};


데모