常见问题当前位置:万彩娱乐平台 > 常见问题 > >

JQuery Tab选项卡效果代码改进版

  

[JQuery,Tab,选项卡]JQuery Tab选项卡效果代码改进版

  介绍的是基于JQuery实现的一个选项卡效果,重点体现在HTML里没有内联事件处理程序,而是定义在js文件里,做到行为与结构的分离。在实际应用过程中,只 要保证选项卡模块结构代码的完整性,就可以任意添加N个同类选项卡,不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID。

  
在这里,我又做了部分的修改,增加了选项卡可自动切换功能,以及选项卡点击相应还是鼠标放上后相应的参数,同时依然支持多次调用。

  
现在,我把代码贴上,与众博友共享  
这是js脚本  
代码如下:

  
/* jquery-fn-accordion v0  
* Based on jQuery JavaScript Library v3  
*  
*  
* The author of the following code: miqi2214 , wbpbest  
* Blog:eycbest.cnblogs.com , miqi2214.cnblogs.com  
* Date: 2010-3-10  
*/  
//注意:如果调试出错,请检查您引用的jquery版本号,当前引用版本为1.3  
//参数说明:  
//tabList:包裹选项卡的父级层  
//tabTxt :包裹内容层的父级层  
//options.currentTab:激活选项卡的序列号  
//options.defaultClass:当前选项卡激活状态样式名,默认名字为“current”  
//isAutoPlay:是否自动切换  
//stepTime:切换间隔时间  
//switchingMode:切换方式('c'表示click切换;'o'表示mouseover切换)  
//调用方式 如本页最下方代码  
$.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);  
//强制规定内容层必须以div来实现  
_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" }); //标准样式  
}  
}  
)  
}  
);  
// }  
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);  
}  
  
演示地址:  
  
打包下载地址

(责任编辑:admin)

上一篇:万彩娱乐平台网站开发需要的技术人员都有哪些

下一篇:简单实现js选项卡切换效果

推荐内容

客户服务热线

010-400-12345

在线客服