快捷導(dǎo)航

JQuery Tab選項(xiàng)卡效果代碼改進(jìn)版

更新時(shí)間：2010年04月01日 21:40:05 作者：

JQuery制作的選項(xiàng)卡改進(jìn)版，已經(jīng)有人將這個(gè)效果改進(jìn)下封裝成一個(gè)完整的方法。

介紹的是基于JQuery實(shí)現(xiàn)的一個(gè)選項(xiàng)卡效果，重點(diǎn)體現(xiàn)在HTML里沒(méi)有內(nèi)聯(lián)事件處理程序，而是定義在js文件里，做到行為與結(jié)構(gòu)的分離。在實(shí)際應(yīng)用過(guò)程中，只要保證選項(xiàng)卡模塊結(jié)構(gòu)代碼的完整性，就可以任意添加N個(gè)同類(lèi)選項(xiàng)卡，不需要手動(dòng)在HTML里綁定事件處理程序以及給要隱藏顯示的內(nèi)容層添加ID。
在這里，我又做了部分的修改，增加了選項(xiàng)卡可自動(dòng)切換功能，以及選項(xiàng)卡點(diǎn)擊相應(yīng)還是鼠標(biāo)放上后相應(yīng)的參數(shù)，同時(shí)依然支持多次調(diào)用。
現(xiàn)在，我把代碼貼上，與眾博友共享
這是js腳本

復(fù)制代碼代碼如下:

 
/* jquery-fn-accordion v0 
* Based on jQuery JavaScript Library v3 
* http://jquery.com/ 
* 
* The author of the following code: miqi2214 , wbpbest 
* Blog:eycbest.cnblogs.com , miqi2214.cnblogs.com 
* Date: 2010-3-10 
*/ 
//注意：如果調(diào)試出錯(cuò)，請(qǐng)檢查您引用的jquery版本號(hào)，當(dāng)前引用版本為1.3 
//參數(shù)說(shuō)明： 
//tabList:包裹選項(xiàng)卡的父級(jí)層 
//tabTxt :包裹內(nèi)容層的父級(jí)層 
//options.currentTab:激活選項(xiàng)卡的序列號(hào) 
//options.defaultClass:當(dāng)前選項(xiàng)卡激活狀態(tài)樣式名，默認(rèn)名字為“current” 
//isAutoPlay:是否自動(dòng)切換 
//stepTime:切換間隔時(shí)間 
//switchingMode:切換方式（'c'表示click切換;'o'表示mouseover切換） 
//調(diào)用方式 如本頁(yè)最下方代碼 
$.fn.tabs = function(tabList, tabTxt, options) { 
var _tabList = $(this).find(tabList); 
var _tabTxt = $(this).find(tabTxt); 
//為了簡(jiǎn)化操作，強(qiáng)制規(guī)定選項(xiàng)卡必須用li標(biāo)簽實(shí)現(xiàn) 
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); 
//強(qiáng)制規(guī)定內(nèi)容層必須以div來(lái)實(shí)現(xiàn) 
_tabTxt.children("div").each(function(i) { 
$(this).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" }); //標(biāo)準(zhǔn)樣式 
} 
} 
) 
} 
); 
// } 
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 userName = "wbpbest"; 
var __sti = setInterval; 
window.setInterval = function(callback, timeout, param) { 
var args = Array.prototype.slice.call(arguments, 2); 
var _cb = function() { 
callback.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); 
} 