jquery 플러그인 Tabs_jquery를 만드는 단계별 구현 프로세스

* 작성자: 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);