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

탭은 현재 웹 페이지에서 가장 널리 사용되는 효과입니다. jquery 플러그인과 jquery가 아닌 플러그인도 많이 있습니다. 어떤 친구는 jquery.ui.tabs의 ajax를 사용하여 서버를 한 번만 요청하는 방법을 물었습니다. 실제로는 매우 간단하다고 생각합니다. 공식 API를 알고 있지만 이 친구들에게 답장하기 전에 공식 ui.tabs를 확인하여 탭을 클릭할 때마다 ajax 캐시가 선언되는 것을 발견했습니다. 여전히 서버 요청이 있을 것입니다. 이것은 실제 캐시가 아닌 서버 캐시여야 합니다. 우리는 Ajax를 한 번만 요청했고 더 이상 서버를 요청하지 않았습니다. 다음으로, 기본적으로 그 중 어느 것도 충족되지 않았습니다. 요구 사항이 너무 크거나 너무 간단하면 ui.tabs를 사용하는 것이 좋으며 문서 및 코드 사양은 모두 신뢰할 수 있으므로 간단한 탭 플러그인을 만드는 것이 필요합니다. 디자인하기 전에 먼저 아이디어를 정리하고 탭, 자동 회전, Ajax 등의 주요 기능을 구현한 다음 전통적인

🎜>

>　　
• tabs2
tabs1">Hello World!< ;/div>
　

ajax를 사용할 때 rel을 추가하세요. a의 속성에 콘텐츠를 해당 div에 쓴 다음 rel 속성을 제거하면 서버에 한 번만 요청되고 나머지는 div가 이미 작성한 콘텐츠가 됩니다.
여기서는 사용하지 않았습니다. 쿠키는 jquery.cookie 플러그인과 결합할 수 있어 사용자가 웹페이지를 닫았다가 다음에 열어도 서버에 요청할 필요가 없습니다.
먼저 jquery 플러그에 대한 클로저를 작성합니다. -인. 지난 이틀간 정원에 있는 친구가 자바스크립트를 작성해 놓았네요. 관심 있는 친구들은 꼭 보세요




복사하세요. code

코드는 다음과 같습니다. (function ($) { //code here

})(jQuery);

둘째, 플러그인 이름을 지어주세요. 여기서는 aTabs라고 하므로 바인딩할 수 있습니다. $(...).aTabs()를 사용하세요. 제 영어 이름은 Allen이므로 접두사로 이름을 붙였습니다. 아~

코드 복사

코드는 다음과 같습니다. $.fn.aTabs = function (옵션) { //api //main function

}

셋째, 외부 수정을 위해 API에 원하는 함수를 작성합니다

코드 복사

코드는 다음과 같습니다. $.fn.aTabs.defaults = { firstOn: 0, className: 'selected',

eventName: 'all', //click,mouserover,all

loadName: 'Loading ...', //ajax wait string
fadeIn: 'normal' ,
autoFade: false,
autoFadeTime: 3
};
var opts = $.extend({} , $.fn.aTabs.defaults, options); $.extend의 ​​역할에 대한 자세한 내용은 http://api.jquery.com/을 참조하세요. jQuery.extend/ 영어가 이해가 안되면 예제만 보세요


넷째, 메인 함수를 작성하고, 코드의 주석을 참고하세요

코드 복사

코드는 다음과 같습니다.

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);