JQuery Tab選項卡效果代碼改進(jìn)版
更新時間:2010年04月01日 21:40:05 作者:
JQuery制作的選項卡改進(jìn)版,已經(jīng)有人將這個效果改進(jìn)下封裝成一個完整的方法。
介紹的是基于JQuery實(shí)現(xiàn)的一個選項卡效果,重點(diǎn)體現(xiàn)在HTML里沒有內(nèi)聯(lián)事件處理程序,而是定義在js文件里,做到行為與結(jié)構(gòu)的分離。在實(shí)際應(yīng)用過程中,只 要保證選項卡模塊結(jié)構(gòu)代碼的完整性,就可以任意添加N個同類選項卡,不需要手動在HTML里綁定事件處理程序以及給要隱藏顯示的內(nèi)容層添加ID。
在這里,我又做了部分的修改,增加了選項卡可自動切換功能,以及選項卡點(diǎn)擊相應(yīng)還是鼠標(biāo)放上后相應(yīng)的參數(shù),同時依然支持多次調(diào)用。
現(xiàn)在,我把代碼貼上,與眾博友共享
這是js腳本
/* 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)試出錯,請檢查您引用的jquery版本號,當(dāng)前引用版本為1.3
//參數(shù)說明:
//tabList:包裹選項卡的父級層
//tabTxt :包裹內(nèi)容層的父級層
//options.currentTab:激活選項卡的序列號
//options.defaultClass:當(dāng)前選項卡激活狀態(tài)樣式名,默認(rèn)名字為“current”
//isAutoPlay:是否自動切換
//stepTime:切換間隔時間
//switchingMode:切換方式('c'表示click切換;'o'表示mouseover切換)
//調(diào)用方式 如本頁最下方代碼
$.fn.tabs = function(tabList, tabTxt, options) {
var _tabList = $(this).find(tabList);
var _tabTxt = $(this).find(tabTxt);
//為了簡化操作,強(qiáng)制規(guī)定選項卡必須用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來實(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);
}
演示地址:http://demo.jb51.net/js/wbpbest/index.html
打包下載地址 http://www.dbjr.com.cn/jiaoben/25569.html
在這里,我又做了部分的修改,增加了選項卡可自動切換功能,以及選項卡點(diǎn)擊相應(yīng)還是鼠標(biāo)放上后相應(yīng)的參數(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)試出錯,請檢查您引用的jquery版本號,當(dāng)前引用版本為1.3
//參數(shù)說明:
//tabList:包裹選項卡的父級層
//tabTxt :包裹內(nèi)容層的父級層
//options.currentTab:激活選項卡的序列號
//options.defaultClass:當(dāng)前選項卡激活狀態(tài)樣式名,默認(rèn)名字為“current”
//isAutoPlay:是否自動切換
//stepTime:切換間隔時間
//switchingMode:切換方式('c'表示click切換;'o'表示mouseover切換)
//調(diào)用方式 如本頁最下方代碼
$.fn.tabs = function(tabList, tabTxt, options) {
var _tabList = $(this).find(tabList);
var _tabTxt = $(this).find(tabTxt);
//為了簡化操作,強(qiáng)制規(guī)定選項卡必須用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來實(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);
}
演示地址:http://demo.jb51.net/js/wbpbest/index.html
打包下載地址 http://www.dbjr.com.cn/jiaoben/25569.html
您可能感興趣的文章:
- 基于JQuery的6個Tab選項卡插件
- jQuery實(shí)現(xiàn)TAB選項卡切換特效簡單演示
- jQuery實(shí)現(xiàn)Tab選項卡切換效果簡單演示
- jquery實(shí)現(xiàn)超簡潔的TAB選項卡效果代碼
- jQuery實(shí)現(xiàn)滾動切換的tab選項卡效果代碼
- jQuery實(shí)現(xiàn)移動端Tab選項卡效果
- jQuery封裝的tab選項卡插件分享
- jquery實(shí)現(xiàn)tab選項卡切換效果(懸停、下方橫線動畫位移)
- 動感效果的TAB選項卡jquery 插件
- 基于jquery實(shí)現(xiàn)的tab選項卡功能示例【附源碼下載】
相關(guān)文章
jQuery的Scrollify插件實(shí)現(xiàn)滑動到頁面下一節(jié)點(diǎn)
這篇文章主要介紹了jQuery的Scrollify插件實(shí)現(xiàn)滑動到頁面下一節(jié)點(diǎn)的相關(guān)資料,需要的朋友可以參考下2015-07-07jQuery實(shí)現(xiàn)將頁面上HTML標(biāo)簽換成另外標(biāo)簽的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)將頁面上HTML標(biāo)簽換成另外標(biāo)簽的方法,實(shí)例說明了兩種實(shí)現(xiàn)html頁面元素替換的技巧,需要的朋友可以參考下2015-06-06jQuery Ajax async=>false異步改為同步時,解決導(dǎo)致瀏覽器假死的問題
今天小編就為大家分享一篇jQuery Ajax async=>false異步改為同步時,解決導(dǎo)致瀏覽器假死的問題,具有很好的參考價值,希望對大家有所幫助,一起跟隨小編過來看看吧2019-07-07jquery下json數(shù)組的操作實(shí)現(xiàn)代碼
在jquery中處理JSON數(shù)組的情況中遍歷用到的比較多,但是用添加移除這些好像不是太多。2010-08-08jQuery Validation Engine驗(yàn)證控件調(diào)用外部函數(shù)驗(yàn)證的方法
這篇文章主要介紹了jQuery Validation Engine驗(yàn)證控件調(diào)用外部函數(shù)驗(yàn)證的方法,需要的的朋友參考下吧2017-01-01