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


Posted in Javascript onApril 01, 2010

介绍的是基于JQuery实现的一个选项卡效果,重点体现在HTML里没有内联事件处理程序,而是定义在js文件里,做到行为与结构的分离。在实际应用过程中,只 要保证选项卡模块结构代码的完整性,就可以任意添加N个同类选项卡,不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID。
在这里,我又做了部分的修改,增加了选项卡可自动切换功能,以及选项卡点击相应还是鼠标放上后相应的参数,同时依然支持多次调用。
现在,我把代码贴上,与众博友共享
这是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 
*/ 
//注意:如果调试出错,请检查您引用的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); 
}

演示地址:http://demo.3water.com/js/wbpbest/index.html

打包下载地址 https://3water.com/jiaoben/25569.html

Javascript 相关文章推荐
用js实现键盘方向键翻页功能的代码
Jun 03 Javascript
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
Nov 24 Javascript
自己用jQuery写了一个图片的马赛克消失效果
May 04 Javascript
JQuery.validate在ie8下不支持的快速解决方法
May 18 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
Sep 01 Javascript
Bootstrap整体框架之JavaScript插件架构
Dec 15 Javascript
jquery.cookie.js的介绍与使用方法
Feb 09 Javascript
深入理解vue中的$set
Jun 01 Javascript
mongoose更新对象的两种方法示例比较
Dec 19 Javascript
swiper 解决动态加载数据滑动失效的问题
Feb 26 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
Jan 08 Javascript
基于Vue中的父子传值问题解决
Jul 27 Javascript
JQuery autocomplete 使用手册
Apr 01 #Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
Apr 01 #Javascript
js 实现打印网页中定义的部分内容的代码
Apr 01 #Javascript
js prototype截取字符串函数
Apr 01 #Javascript
javascript getElementsByClassName函数
Apr 01 #Javascript
JS getStyle获取最终样式函数代码
Apr 01 #Javascript
Javascript 通过json自动生成Dom的代码
Apr 01 #Javascript
You might like
实测在class的function中include的文件中非php的global全局环境
2013/07/15 PHP
浅谈PHP正则中的捕获组与非捕获组
2016/07/18 PHP
jquery的extend和fn.extend的使用说明
2011/01/09 Javascript
JS重要知识点小结
2011/11/06 Javascript
js动态设置鼠标事件示例代码
2013/10/30 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
JS中的构造函数详细解析
2014/03/10 Javascript
Javascript中判断对象是否为空
2015/06/10 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
2015/07/20 Javascript
Javascript实现网络监测的方法
2015/07/31 Javascript
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
AngularJS 所有版本下载地址
2016/09/14 Javascript
Vue filter介绍及其使用详解
2017/10/21 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
用Vue写一个分页器的示例代码
2018/04/22 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
2018/09/03 Javascript
iView框架问题整理小结
2018/10/16 Javascript
jquery图片预览插件实现方法详解
2019/07/18 jQuery
jquery实现直播弹幕效果
2019/11/28 jQuery
jQuery带控制按钮轮播图插件
2020/07/31 jQuery
Django中对数据查询结果进行排序的方法
2015/07/17 Python
python自动翻译实现方法
2016/05/28 Python
python 转换 Javascript %u 字符串为python unicode的代码
2016/09/06 Python
Python调用C# Com dll组件实战教程
2017/10/12 Python
pytorch程序异常后删除占用的显存操作
2020/01/13 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
编译 pycaffe时报错:fatal error: numpy/arrayobject.h没有那个文件或目录
2020/11/29 Python
喜诗官方在线巧克力店:See’s Candies
2017/01/01 全球购物
夏尔巴人登珠峰品牌:Sherpa Adventure Gear
2018/02/08 全球购物
完美主义个人的自我评价
2014/02/17 职场文书
《我不是最弱小的》教学反思
2014/02/23 职场文书
个人自荐书怎么写
2015/03/26 职场文书
三八红旗手主要事迹材料
2015/11/04 职场文书
公文写作:工伤事故分析报告怎么写?
2019/11/05 职场文书
mysql下的max_allowed_packet参数设置详解
2022/02/12 MySQL
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL