基于jQuery的Tab选项框效果代码(插件)


Posted in Javascript onMarch 01, 2011
/** 
* jQuery插件 
* Author: purecolor@foxmail.com 
* Date : 2011-02-25 
* Params: 
* defaults:{ 
currentClass:当前样式, 
trigger:触发方式, 
callBack:回调函数, 
auto:是否自运行, 
detay:延迟时间, 
index:当前位置 
* } 
* Return: null 
* Note : Tab选项框插件 
* 
*/ 
(function($){ 
$.fn.extend({ 
tabBuild:function(options){ 
return $(this).each(function(){ 
var defaults={ 
currentClass:"currentOne", 
trigger:"mouseover", 
callBack:null, 
auto:true, 
detay:3000, 
index:0 
} 
var params=$.extend(defaults,options); 
var $this=$(this); 
var items=$('.tab-menu',$this),i=0; 
var autoTimer,curro=0; 
items.each(function(){ 
$(this).data('lvl',i); 
if(i==params.index){ 
$('.tab-content',$this).eq(i).show(); 
$(this).addClass(params.currentClass); 
}else{ 
$('.tab-content',$this).eq(i).hide(); 
} 
i++; 
$(this).bind(params.trigger,function(e){ 
//移除自动运行 
if(params.auto){ 
if(autoTimer) clearInterval(autoTimer); 
} 
move($(this).data("lvl")); 
//清除冒泡 
if (e.stopPropagation) { 
e.stopPropagation(); // for Mozilla and Opera 
} 
else if (window.event) { 
window.event.cancelBubble = true; // for IE 
} 
}); 
}); 
//移动播放 
function move(i){ 
//移除上一个效果 
items.eq(params.index).removeClass(params.currentClass); 
$('.tab-content',$this).eq(params.index).hide(); 
//移至当前位置 
items.eq(i).addClass(params.currentClass); 
$('.tab-content',$this).eq(i).show(); 
params.index=i; 
} 
//自动运行 
function auto(){ 
if(params.auto){ 
autoTimer=setInterval(function(){ 
curro=(params.index>=2)?0:(params.index+1); 
move(curro); 
},params.detay); 
}else{ 
if(autoTimer) clearInterval(autoTimer); 
} 
} 
auto(); 
}); 
} 
}); 
})(jQuery);
Javascript 相关文章推荐
文本框的字数限制功能jquery插件
Nov 24 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
Jul 15 Javascript
jQuery使用之标记元素属性用法实例
Jan 19 Javascript
JavaScript的内存释放问题详解
Jan 21 Javascript
js获取时间精确到秒(年月日)
Mar 16 Javascript
Angularjs实现搜索关键字高亮显示效果
Jan 17 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
Aug 11 Javascript
vue filters的使用详解
Jun 11 Javascript
微信小程序实现banner图轮播效果
Jun 28 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
Mar 14 Javascript
JavaScript setInterval()与setTimeout()计时器
Dec 27 Javascript
微信小程序自定义联系人弹窗
May 26 Javascript
jquery中实现标签切换效果的代码
Mar 01 #Javascript
IE图片缓存document.execCommand("BackgroundImageCache",false,true)
Mar 01 #Javascript
收集的10个免费的jQuery相册
Feb 26 #Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
Feb 26 #Javascript
20款超赞的jQuery插件 Web开发人员必备
Feb 26 #Javascript
js对象的比较
Feb 26 #Javascript
基于jquery循环map功能的代码
Feb 26 #Javascript
You might like
JavaScript中的类继承
2010/11/25 Javascript
读jQuery之十四 (触发事件核心方法)
2011/08/23 Javascript
原生js实现给指定元素的后面追加内容
2013/04/10 Javascript
解析jquery获取父窗口的元素
2013/06/26 Javascript
如何解决Jquery库及其他库之间的$命名冲突
2013/09/15 Javascript
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
javascript验证邮件地址和MX记录的方法
2015/06/16 Javascript
JavaScript中removeChild 方法开发示例代码
2016/08/15 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
javascript表单控件实例讲解
2016/09/13 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
2017/04/11 Javascript
提高Node.js性能的应用技巧分享
2017/08/10 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
2019/03/28 Javascript
基于js实现判断浏览器类型代码实例
2020/07/17 Javascript
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
Python制作爬虫抓取美女图
2016/01/20 Python
基于python神经卷积网络的人脸识别
2018/05/24 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
python实现事件驱动
2018/11/21 Python
python多任务及返回值的处理方法
2019/01/22 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
keras训练浅层卷积网络并保存和加载模型实例
2020/07/02 Python
Python中的With语句的使用及原理
2020/07/29 Python
Python 必须了解的5种高级特征
2020/09/10 Python
Python OpenCV中的numpy与图像类型转换操作
2020/12/11 Python
在vscode中启动conda虚拟环境的思路详解
2020/12/25 Python
心得体会范文
2014/01/04 职场文书
便利店的创业计划书
2014/01/15 职场文书
仓库主管岗位职责
2014/03/02 职场文书
培训主管的职业生涯规划
2014/03/06 职场文书
2014大学生全国两会学习心得体会
2014/03/13 职场文书
七一党日活动总结
2014/07/08 职场文书
闪闪红星观后感
2015/06/08 职场文书
2015年物业公司保洁工作总结
2015/10/22 职场文书