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 相关文章推荐
Javascript代码混淆综合解决方案-Javascript在线混淆器
Dec 18 Javascript
超级酷和最实用的jQuery实例收集(20个)
Apr 21 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
May 26 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
Jun 06 Javascript
jquery+Jscex打造游戏力度条
Sep 12 Javascript
最好用的Bootstrap fileinput.js文件上传组件
Dec 12 Javascript
bootstrap modal+gridview实现弹出框效果
Aug 15 Javascript
webpack引入eslint配置详解
Jan 22 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
Jan 27 Javascript
Bootstrap模态对话框中显示动态内容的方法
Aug 10 Javascript
vue实现简单瀑布流布局
May 28 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
Nov 06 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
PHP中使用unset销毁变量并内存释放问题
2012/07/05 PHP
ucenter中词语过滤原理分析
2016/07/13 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
IE本地存储userdata的一个bug说明
2010/07/01 Javascript
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
2013/10/22 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
2015/03/18 Javascript
JavaScript File分段上传
2016/03/10 Javascript
基于javascript实现全屏漂浮广告
2016/03/31 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
JS与HTML结合实现流程进度展示条思路详解
2017/09/03 Javascript
JavaScript屏蔽Backspace键的实现代码
2017/11/02 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
2018/03/06 Javascript
jQuery中常用动画效果函数知识点整理
2018/08/19 jQuery
Vue绑定内联样式问题
2018/10/17 Javascript
Vuex 单状态库与多模块状态库详解
2018/12/11 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
2020/08/08 Javascript
python基于pygame实现响应游戏中事件的方法(附源码)
2015/11/11 Python
详解python实现识别手写MNIST数字集的程序
2018/08/03 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
Python Django Vue 项目创建过程详解
2019/07/29 Python
python实现BP神经网络回归预测模型
2019/08/09 Python
Python unittest 自动识别并执行测试用例方式
2020/03/09 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
python批量生成身份证号到Excel的两种方法实例
2021/01/14 Python
Python实现随机爬山算法
2021/01/29 Python
德国婴儿推车和儿童安全座椅商店:BABYSHOP
2016/09/01 全球购物
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
法国亚马逊官方网站:Amazon.fr
2020/12/19 全球购物
小学生春游活动方案
2014/08/20 职场文书
趣味运动会广播稿
2014/09/13 职场文书
2014年高三班主任工作总结
2014/12/05 职场文书
结婚保证书
2015/01/16 职场文书
2016年元旦致辞
2015/08/01 职场文书
Python实战之OpenCV实现猫脸检测
2021/06/26 Python
MySQL sql模式设置引起的问题
2022/05/15 MySQL