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

jquery 탭을 DIY하는 이유
저는 jquery를 사용한 지 2~3개월 정도 되었지만 플러그인을 작성한 적이 없습니다. 다만 최근에 시간이 많이 남아서 프로젝트에서 늘 싫었던 기존 탭을 변형해 볼 예정입니다(기존 탭은 컨트롤로 만들 수 없고, 복사 및 과거 코드가 너무 많습니다).
jQuery만큼 강력한 라이브러리에는 탭 플러그인이 없으면 불가능하다고 생각해서 빠르게 검색해봤습니다. 하하하하하하하하하하하하하하하하하하하하하하하하하하하하하하하! jQuery 탭! 은근히 기쁜 마음이 들어서 얼른 로드해서 사용하기 시작했어요. 하지만 사용법을 확인한 결과, 기존 프로젝트에는 적합하지 않다는 사실을 발견했습니다. 각 탭은 iframe을 사용하여 삽입된 전체 페이지에 해당합니다. jQuery 탭은 iframe을 지원하지 않는 것 같습니다. 그럼 개조해 볼까요? 코드를 처음부터 끝까지 공부해야 하는데 머리가 아프네요! 연습을 위해 직접 작성하는 것이 더 좋습니다. 하하. 그냥 해보면 나의 첫 번째 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); //기본값으로 설정 .
})
};


데모

코드 복사

다음과 같습니다:

html 코드:

• 홈페이지


• 관리
  

$(창) .load(function() {
$('#tabs').tab({
tabPanel: '#tabPanel'
});
})

스크린샷:

설명
매개변수(선택) -- 탭 스타일, 트리거 탭 이벤트 등을 사용자 정의할 수 있습니다. 기본값은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

var settings =
{
activeTabClass: "tab-selected", //활성 탭용 CSS
defaultTabClass: "tab-default", //비활성 탭용 CSS
tabContainerClass: "tabContainer", / 탭 컨테이너의 경우 /css
tabPanelCls: "tabPanel", //iframe이 포함된 패널의 경우 css
mouseoverTabClass: null, //탭 위에 마우스를 올리면 css
hiddenTabClass: 'tab-hide ', //숨겨진 탭에 대한 CSS
tabPanelId: null, //iframe 포함에 사용되는 패널 ID
selectHandler: null, //사용자가 탭 전환 시 이벤트 핸들러
iframeIdPrex: 'iframe_' //iframe용 ID prex, 탭 ID로 iframe을 가져오는 데 유용합니다.


공개 메소드 -- setActiveTab(tabIndex) && getFrameByTabId(tabId)

코드 복사 코드는 다음과 같습니다.

setAcitveTab: 탭 인덱스로 활성 탭을 설정합니다.

$(' #tabs').setActiveTab(1); //두 번째 탭을 활성화합니다.
getFrameByTabId: 특정 탭에 대한 프레임을 가져옵니다.
$('#tabs').getFrameByTabId("tabHome");


기타

1. 이 탭은 모든 크기와 호환되도록 3개의 DOM 요소

를 사용합니다. 탭 텍스트에서는 세 장의 그림이 배경으로 사용되었습니다. li를 사용하여 왼쪽에 둥근 모서리 이미지를 표시하고, a를 사용하여 오른쪽에 둥근 모서리를 표시하고, 스팬을 사용하여 가운데 배경을 타일링했습니다. 실제로 두 장의 사진을 사용하여 왼쪽 모서리가 둥글고 오른쪽 모서리가 둥근 긴 배경 그림을 만들어도 달성할 수 있습니다. 그러나 둥근 모서리를 위해 이러한 무의미한 요소를 어떻게 추가하더라도 항상 사람들을 불행하게 만듭니다. CSS3의 둥근 모서리 기술과 하나의 DOM 요소에 여러 배경 이미지를 설정하는 기능이 잘 지원되기를 진심으로 바랍니다.
2. 이 플러그인은 특정 탭 페이지가 확인에 실패하고 전환을 허용하지 않는 등 특별한 요구 사항을 지원하기 위해 사용자 정의 전환 탭 이벤트(selectHandler)를 지원합니다. 사용법:

코드 복사 코드는 다음과 같습니다.

$('#tabs') .tab( {

tabPanel: '#tabPanel',
selectHandler: function() {
switchTab(); //정의한 함수.
}
}); >

3. 탭 플러그인의 activeTab 및 selectedIndex 속성은 사용자가 탭 전환 이벤트를 사용자 정의하여 탭 관련 정보를 얻을 수 있도록 설계되었으며, 이는 필요에 따라 확장될 수 있습니다. 사용법:

코드 복사 코드는 다음과 같습니다. $('#tabs') .each( function() {

var $tabs = this;

var currentTabId = $tabs.activeTab.attr('id');
//...
}