基于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 相关文章推荐
为你的网站增加亮点的9款jQuery插件推荐
May 03 Javascript
js操作iframe的一些方法介绍
Jun 25 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
Sep 17 Javascript
JS实现页面进入和返回定位到具体位置
Dec 08 Javascript
JS使用正则实现去掉字符串左右空格的方法
Dec 27 Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 Javascript
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
Angular使用Restful的增删改
Dec 28 Javascript
如何从0开始用node写一个自己的命令行程序
Dec 29 Javascript
webpack+express实现文件精确缓存的示例代码
Jun 11 Javascript
JS自定义右键菜单实现代码解析
Jul 16 Javascript
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
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数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
PHP中返回引用类型的方法
2015/04/03 PHP
7个鲜为人知却非常实用的PHP函数
2015/07/01 PHP
CI框架AR数据库操作常用函数总结
2016/11/21 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
javascript html 静态页面传参数
2009/04/10 Javascript
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
2013/06/06 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
2014/01/06 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
2014/04/29 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
2014/05/13 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
H5手机端多文件上传预览插件
2017/04/21 Javascript
AngularJS日程表案例详解
2017/08/15 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
ajax前台后台跨域请求处理方式
2018/02/08 Javascript
VeeValidate 的使用场景以及配置详解
2019/01/11 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2019/06/10 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
python中django框架通过正则搜索页面上email地址的方法
2015/03/21 Python
Python验证码识别处理实例
2015/12/28 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
pytorch查看torch.Tensor和model是否在CUDA上的实例
2020/01/03 Python
Python3 assert断言实现原理解析
2020/03/02 Python
Python使用Selenium实现淘宝抢单的流程分析
2020/06/23 Python
中专毕业生的自我鉴定
2013/12/01 职场文书
节约电力资源的建议书
2014/03/12 职场文书
鉴定评语大全
2014/05/05 职场文书
庆七一活动总结
2014/08/27 职场文书
写给同事的离职感言
2015/08/04 职场文书
Pandas 稀疏数据结构的实现
2021/07/25 Python
SQL IDENTITY_INSERT作用案例详解
2021/08/23 MySQL
PO模式在selenium自动化测试框架的优势
2022/03/20 Python