JQuery 탭 탭 효과 코드 개선됨 version_jquery

도입된 것은 JQuery 기반의 탭 효과입니다. 핵심은 HTML에는 인라인 이벤트 핸들러가 없지만 js 파일에 정의되어 동작과 구조를 분리한다는 것입니다. 실제 애플리케이션에서는 탭 모듈 구조 코드의 무결성이 보장되는 한 동일한 유형의 N개 탭을 임의로 추가할 수 있으며, HTML에서 이벤트 핸들러를 수동으로 바인딩하고 콘텐츠 레이어에 ID를 추가하여 숨길 필요가 없습니다. .
여기서 탭 자동 전환 기능과 탭 클릭 또는 마우스 배치에 해당하는 매개변수를 추가하는 등 몇 가지 수정을 가하면서도 여전히 다중 호출을 지원합니다.
이제 코드를 붙여넣고 동료 블로거들과 공유합니다
js 스크립트입니다

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

/* jquery-fn-accordion v0
* jQuery JavaScript Library v3 기반
* http://jquery.com/
*
* 다음 코드의 작성자: miqi2214 , wbpbest
* 블로그:eycbest.cnblogs.com , miqi2214.cnblogs.com
* 날짜: 2010-3-10
*/
//참고 : 디버깅 오류가 발생한 경우 인용한 jquery 버전 번호를 확인하세요. 현재 참조 버전은 1.3입니다.
//매개변수 설명:
//tabList: 래핑된 탭의 상위 레이어
//tabTxt: The 래핑된 콘텐츠 레이어 상위 레이어
//options.currentTab: 활성화된 탭의 일련 번호
//options.defaultClass: 현재 탭 활성화 상태 스타일 이름, 기본 이름은 "current"입니다.
// isAutoPlay: 자동 전환 여부
//stepTime: 전환 간격
//switchingMode: 전환 모드 ('c'는 클릭 전환을 의미하고 'o'는 마우스 오버 전환을 의미)
//호출 방법은 다음과 같습니다. 이 페이지 하단의 코드에 표시됩니다.
$.fn.tabs = function(tabList, tabTxt, options) {
var _tabList = $(this).find(tabList)
var _tabTxt = $(this).find(tabTxt);
//작업을 단순화하려면 탭을 li 태그로 구현해야 합니다.
var tabListLi = _tabList.find("li"); >var defaults = { currentTab: 0, defaultClass: "current", isAutoPlay: false, stepTime: 2000, SwitchingMode: "c" }
var o = $.extend({}, defaults, options); >var _isAutoPlay = o.isAutoPlay;
var _stepTime = o.stepTime ;
var _switchingMode = o.switchingMode
_tabList.find("li:eq(" o.currentTab ")").addClass (o.defaultClass);
//
_tabTxt.children("div").each(function(i) {
$(this)를 구현하려면 콘텐츠 레이어가 div여야 합니다. attr("id", "wp_div" i);
}).eq( o.currentTab).css({ "display": "block" })
tabListLi.each(
function( i) {
$(tabListLi[i]).mouseover(
function () {
if (_switchingMode == "o") {
$(this).click();
}
_isAutoPlay = false;
}
)
>$(tabListLi[i]).mouseout(
function() {
_isAutoPlay = true;
}
)
}
)
_tabTxt.each(
function(i) {
$(_tabTxt[i]).mouseover(
function() {
_isAutoPlay = false;
}
);
$(_tabTxt[ i]).mouseout(
function() {
_isAutoPlay = true;
}
) 🎜>});
// }
// else {
tabListLi.each(
function(i) {
$(tabListLi[i]).click(
function () {
if ($(this).className != o.defaultClass) {
$(this).addClass(o.defaultClass).siblings().removeClass(o.defaultClass)
}
if ($.browser.msie) {
_tabTxt.children(" div").eq(i).siblings().css({ "display": "none" }); _tabTxt.children("div").eq(i).fadeIn(600);
} else {
_tabTxt.children("div").eq(i).css({ "display": " block" }).siblings().css({ "display": "none" }) ; //표준 스타일
}
}
)
}
);
// }
function selectMe(oo) {
if (oo != null && oo.html() != null && _isAutoPlay) {
oo.click()
}
if (oo.html() == null) {
selectMe(_tabList.find( "li").eq(0))
} else {
window.setTimeout(selectMe, _stepTime, oo .next());
}
}
if (_isAutoPlay) {
//alert("_isAutoPlay:" _isAutoPlay)
selectMe(_tabList.find("li"). eq(o.currentTab));
//alert(_isAutoPlay) ;
return this;
}
var __sti = setInterval ;
window.setInterval = function(callback, timeout, param) {
var args = Array.prototype.slice.call(arguments, 2)
var _cb = function() {
콜백 .apply(null, args);
}
__sti(_cb, timeout) ;
}
//window.setInterval(hello,3000,userName)
var __sto = setTimeout;
window.setTimeout = function(callback, timeout, param) {
var args = Array.prototype.slice.call(arguments, 2);
var _cb = function() {
callback. apply(null, args);
}
__sto(_cb, timeout)
}


데모 주소:
http://demo.jb51.net/ js/wbpbest/index.html


패키지 다운로드 주소

http://www.jb51.net/jiaoben/25569.html