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 相关文章推荐
chrome下jq width()方法取值为0的解决方法
May 26 Javascript
JQuery ztree 异步加载实例讲解
Feb 25 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
Apr 21 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
Jul 07 Javascript
Angular.js中$resource高大上的数据交互详解
Jul 30 Javascript
Vue实例中生命周期created和mounted的区别详解
Aug 25 Javascript
vue 实现的树形菜的实例代码
Mar 19 Javascript
Angular HMR(热模块替换)功能实现方法
Apr 04 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
Apr 02 Javascript
如何进行微信公众号开发的本地调试的方法
Jun 16 Javascript
ES6 Array常用扩展的应用实例分析
Jun 26 Javascript
vue设置一开始进入的页面教程
Oct 28 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内存相关的功能特性详解
2013/06/08 PHP
数组与类使用PHP的可变变量名需要的注意的问题
2013/06/20 PHP
PHP用身份证号获取星座和生肖的方法
2013/11/07 PHP
PHP版QQ互联OAuth示例代码分享
2015/07/05 PHP
PHP实现仿Google分页效果的分页函数
2015/07/29 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
PHP使用JpGraph绘制折线图操作示例【附源码下载】
2019/10/18 PHP
js计数器代码
2006/11/04 Javascript
JavaScript 对象模型 执行模型
2009/12/06 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
js实现温度计时间样式代码分享
2015/08/21 Javascript
jQuery实现文本框邮箱输入自动补全效果
2015/11/17 Javascript
Bootstrap的Refresh Icon也spin起来
2016/07/13 Javascript
AngularJS Controller作用域
2017/01/09 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
Vue.js如何优雅的进行form validation
2017/04/07 Javascript
NodeJs安装npm包一直失败的解决方法
2017/04/28 NodeJs
vue中的router-view组件的使用教程
2018/10/23 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
JS div匀速移动动画与变速移动动画代码实例
2019/03/26 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
Python命令启动Web服务器实例详解
2017/02/23 Python
Python使用装饰器模拟用户登陆验证功能示例
2018/08/24 Python
python实现根据文件格式分类
2019/10/31 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
python开发入门——列表生成式
2020/09/03 Python
美国标志性加大尺码时装品牌:Ashley Stewart
2016/12/15 全球购物
海滩咖啡馆:Beach Cafe
2018/02/02 全球购物
大学毕业生最详细的自我评价分享
2013/11/18 职场文书
超市端午节活动方案
2014/01/23 职场文书
2014年消防工作实施方案
2014/02/20 职场文书
2014年派出所工作总结
2014/11/21 职场文书
签证工作证明模板
2015/06/15 职场文书