基于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实现鼠标经过提示信息的地图热点效果
Apr 26 Javascript
JS实现超简单的仿QQ折叠菜单效果
Sep 21 Javascript
AngularJS实现select的ng-options功能示例
Jul 12 Javascript
详解 vue.js用法和特性
Oct 15 Javascript
JS实现瀑布流布局
Oct 21 Javascript
vue将时间戳转换成自定义时间格式的方法
Mar 02 Javascript
js的各种数据类型判断的介绍
Jan 19 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
Apr 17 Javascript
js实现一个简易计算器
Mar 30 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 Javascript
JavaScript语句错误throw、try及catch实例解析
Aug 18 Javascript
vue-router 控制路由权限的实现
Sep 24 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
php中ob(Output Buffer 输出缓冲)函数使用方法
2007/07/21 PHP
php+mysql查询优化简单实例
2015/01/13 PHP
PHP运行模式汇总
2016/11/06 PHP
PHP 实现缩略图
2021/03/09 PHP
简介JavaScript中的getSeconds()方法的使用
2015/06/10 Javascript
AngularJS在IE8的不支持的解决方法
2016/05/13 Javascript
在localStorage中存储对象数组并读取的方法
2016/09/24 Javascript
javascript中的深复制详解及实例分析
2016/12/29 Javascript
js实现倒计时关键代码
2017/05/05 Javascript
深入研究React中setState源码
2017/11/17 Javascript
JS实现将链接生成二维码并转为图片的方法
2018/03/17 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
VeeValidate 的使用场景以及配置详解
2019/01/11 Javascript
Django+vue跨域问题解决的详细步骤
2019/01/20 Javascript
JS实现获取数组中最大值或最小值功能示例
2019/03/02 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
2019/08/20 Javascript
[02:57]2014DOTA2国际邀请赛 选手辛苦解说更辛苦
2014/07/10 DOTA
[01:32]dota2拉比克至宝(222)
2018/12/20 DOTA
python中的decorator的作用详解
2018/07/26 Python
python 对类的成员函数开启线程的方法
2019/01/22 Python
Python 制作查询商品历史价格的小工具
2020/10/20 Python
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
2014/01/07 HTML / CSS
Chain Reaction Cycles俄罗斯:世界上最大的在线自行车商店
2019/08/27 全球购物
Abbott Lyon官网:女士手表、珠宝及配件
2020/12/26 全球购物
犹他州最古老的体育用品公司:Al’s
2020/12/18 全球购物
医药专业应届毕业生求职信范文
2014/01/01 职场文书
兼职业务员岗位职责
2014/01/01 职场文书
新春寄语大全
2014/04/09 职场文书
2014年技术部工作总结
2014/12/12 职场文书
红旗渠导游词
2015/02/09 职场文书
匿名信格式范文
2015/05/27 职场文书
罗马假日观后感
2015/06/08 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书
golang import自定义包方式
2021/04/29 Golang