基于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 相关文章推荐
js修改input的type属性及浏览器兼容问题探讨与解决
Jan 23 Javascript
javascript jq 弹出层实例
Aug 25 Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 Javascript
JS、jQuery中select的用法详解
Apr 21 Javascript
js 两个日期比较相差多少天的实例
Oct 19 Javascript
AjaxUpLoad.js实现文件上传功能
Mar 02 Javascript
微信网页授权并获取用户信息的方法
Jul 30 Javascript
浅谈Fetch 数据交互方式
Dec 20 Javascript
如何从0开始用node写一个自己的命令行程序
Dec 29 Javascript
egg.js的基本使用和调用数据库的方法示例
May 18 Javascript
原生js+css实现tab切换功能
Sep 17 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
Oct 30 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
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
php不允许用户提交空表单(php空值判断)
2013/11/12 PHP
深入浅析用PHP实现MVC
2016/03/02 PHP
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
js弹出窗口之弹出层的小例子
2013/06/17 Javascript
javascript unicode与GBK2312(中文)编码转换方法
2013/11/14 Javascript
js变量、作用域及内存详解
2014/09/23 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
2016/10/10 Javascript
AngularJS实现ajax请求的方法
2016/11/22 Javascript
深入对Vue.js $watch方法的理解
2017/03/20 Javascript
在vue中添加Echarts图表的基本使用教程
2017/11/22 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
React.js绑定this的5种方法(小结)
2018/06/05 Javascript
JS实现将二维数组转为json格式字符串操作示例
2018/07/12 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
2018/09/08 Javascript
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
实例详解vue中的$root和$parent
2019/04/29 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
[02:09:59]火猫TV国士无双dota2 6.82版本详解(下)
2014/09/29 DOTA
python实现数通设备端口监控示例
2014/04/02 Python
Python3 中把txt数据文件读入到矩阵中的方法
2018/04/27 Python
Python 中字符串拼接的多种方法
2018/07/30 Python
车间工艺员岗位职责
2013/12/09 职场文书
运动会广播稿150字
2014/02/19 职场文书
《数星星的孩子》教学反思
2014/04/11 职场文书
怎样拟定创业计划书
2014/05/01 职场文书
项目建议书范文
2014/05/12 职场文书
反邪教警示教育方案
2014/05/13 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
2014年项目经理工作总结
2014/11/24 职场文书
2019经典广告词集锦!
2019/07/02 职场文书
超详细教你怎么升级Mysql的版本
2021/05/19 MySQL
浅谈Python响应式类库RxPy
2021/06/14 Python
Python下载商品数据并连接数据库且保存数据
2022/03/31 Python