return this.each(function () { //여기에 각 바인딩된 DOM 플러그인이 있습니다.
var target = $(this);
var div = target.children().not( "ul,span"); //모든 탭에 본문 div 표시
var tabs = target.find('ul:eq(0) li') //모든 탭 헤더 인덱스
function Tabs( ) {
if ($(this).hasClass(opts.className)) {
return false;
}
tabsShow(div, $(this))
return false;
function tabsShow(div, li, index) {
div.stop(true, true).hide()
//
if (typeof (index) = "number를 사용하여 자동 회전) ") {
if (li.find("a").attr("rel")) ajax(div, li);
$(div[index]).stop(true,true ).fadeIn (opts.fadeIn);
tabs.stop(true, true).removeClass(opts.className);
$(tabs[index]).stop(true, true).addClass(opts.className);
}
//비자동 회전
else {
var tabBody = div.filter(li.find("a").attr("href"))
if ( li.find("a").attr("rel")) ajax(div, li);
tabBody.stop(true,true).fadeIn(opts.fadeIn)
tabs.stop(true) , true).removeClass(opts.className);
li.stop(true, true).addClass(opts.className)
}
}
function ajax(div, li) { / /여기에 rel
var href = li.find("a").attr("href")
var rel = li.find( "a)를 실행하여 서버를 한 번만 요청하는 핵심 ajax가 있습니다. ").attr("rel"); //ajax 요청 url
var i = div.filter(href); //현재 div
if (rel) { //ajax 요청 url이 비어 있지 않은 경우, ajax는 한 번만
i.html(opts.loadName);
$.ajax({
url: rel,
cache: false,
success: function (html) {
i.html(html);
},
error: function () {
i.html('로드 오류입니다. 다시 시도해 주세요! ');
}
});
li.find("a").removeAttr("rel") //Ajax 한 번만
}
if ( opts.autoFade) {
var index = opts.firstOn 1;
setInterval(function () {
if (index >= div.length) {
index = 0;
}
tabsShow(div, $(this), index );
}, opts.autoFadeTime * 1000)
}
tabs.bind(opts.eventName == 'all' ? '마우스오버 클릭 ' : opts.eventName, Tabs) //이벤트 바인딩
.filter(':first').trigger(opts.eventName == 'all' ? 'click' : opts.eventName) //자동으로 이벤트 트리거
});
마침내 위의 내용을 통합한 후 전체 소스 코드는 다음과 같습니다.
/* * 작성자: Obsidian
*/
(function ($) {
$.fn.aTabs = 기능(옵션) {
$.fn.aTabs.defaults = {
firstOn: 0,
className: '선택됨',
eventName: 'all' , //click,mouserover, all
loadName: 'Loading...', //ajax 대기 문자열
fadeIn: 'normal',
autoFade: false,
autoFadeTime: 3
};
var opts = $.extend({}, $.fn.aTabs.defaults, options)
return this.each(function () {
var target = $(this);
var div = target.children().not("ul,span"); //모든 탭에는 본문 div가 표시됩니다.
var tabs = target.find('ul:eq(0) li') // 모든 탭 헤더 부서 색인
function Tabs() {
if ($(this).hasClass(opts.className)) {
return false;
}
tabsShow(div, $( this)) ;
return false;
}
function tabsShow(div, li, index) {
div.stop(true, true).hide();
if (typeof (index) == "number") {
if (li.find("a").attr("rel")) ajax(div, li)
$(div [index ]).stop(true,true).fadeIn(opts.fadeIn);
tabs.stop(true, true).removeClass(opts.className)
$(tabs[index]).stop (true , true).addClass(opts.className);
}
//비자동 회전
else {
var tabBody = div.filter(li.find("a"). attr(" href"));
if (li.find("a").attr("rel")) ajax(div, li)
tabBody.stop(true,true).fadeIn( opts.fadeIn );
tabs.stop(true, true).removeClass(opts.className);
li.stop(true, true).addClass(opts.className)
}
}
function ajax(div, li) {
var href = li.find("a").attr("href")
var rel = li.find("a").attr ("rel "); //ajax 요청 URL
var i = div.filter(href); //현재 div
if (rel) { //ajax 요청 URL이 비어 있지 않으면 ajax 한 번만
i .html(opts.loadName);
$.ajax({
url: rel,
cache: false,
success: function (html) {
i.html( html);
},
error: function () {
i.html('로드 오류입니다. 다시 시도해 주세요! ');
}
});
li.find("a").removeAttr("rel") //Ajax 한 번만
}
if ( opts.autoFade) {
var index = opts.firstOn 1;
setInterval(function () {
if (index >= div.length) {
index = 0;
}
tabsShow(div, $(this), index );
}, opts.autoFadeTime * 1000)
}
tabs.bind(opts.eventName == 'all' ? '마우스오버 클릭 ' : opts.eventName, Tabs) //이벤트 바인딩
.filter(':first').trigger(opts.eventName == 'all' ? 'click' : opts.eventName) //자동으로 이벤트 트리거
});
})(jQuery);