基于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和css代码压缩工具[附JAVA环境配置方法]
Apr 16 Javascript
一个可绑定数据源的jQuery数据表格插件
Jul 17 Javascript
13个绚丽的Jquery 界面设计网站推荐
Sep 28 Javascript
整理一些JavaScript的IE和火狐的兼容性注意事项
Mar 17 Javascript
js识别不同浏览器基于userAgent做判断
Jul 29 Javascript
js库Modernizr的介绍和使用
May 07 Javascript
javascript设计简单的秒表计时器
Sep 05 Javascript
Vue2 SSR渲染根据不同页面修改 meta
Nov 20 Javascript
JS表单传值和URL编码转换
Mar 03 Javascript
微信小程序 JS动态修改样式的实现方法
Dec 16 Javascript
vue 路由守卫(导航守卫)及其具体使用
Feb 25 Javascript
Element Alert警告的具体使用方法
Jul 27 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实现LOL数据远程获取
2014/06/10 PHP
ThinkPHP中URL路径访问与模块控制器之间的关系
2014/08/23 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
Yii2框架配置文件(Application属性)与调试技巧实例分析
2019/05/27 PHP
laravel通用化的CURD的实现
2019/12/13 PHP
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
二级域名或跨域共享Cookies的实现方法
2008/08/07 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
跟我学习javascript的this关键字
2020/05/28 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
2015/11/19 Javascript
vue实现动态数据绑定
2017/04/28 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
微信小程序结合Storage实现搜索历史效果
2019/05/18 Javascript
原生js实现trigger方法示例代码
2019/05/22 Javascript
Vue watch响应数据实现方法解析
2020/07/10 Javascript
vue实现表格合并功能
2020/12/01 Vue.js
[02:43]DOTA2英雄基础教程 德鲁伊
2014/01/13 DOTA
[01:49]一目了然!DOTA2DotA快捷操作对比第二弹
2014/05/16 DOTA
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
Python如何设置指定窗口为前台活动窗口
2020/08/12 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
Bose法国官网:购买耳机、扬声器、家庭影院、专业音响
2017/12/21 全球购物
德国富尔达运动鞋店:43einhalb
2020/12/25 全球购物
2014年“四风”问题个人整改措施
2014/09/17 职场文书
售房协议书范本2014
2014/10/23 职场文书
2014年电信员工工作总结
2014/12/19 职场文书
小学语文继续教育研修日志
2015/11/13 职场文书
大学军训口号大全
2015/12/24 职场文书
导游词之阳朔遇龙河
2019/12/16 职场文书
解决Pytorch半精度浮点型网络训练的问题
2021/05/24 Python
JavaScript实现简单拖拽效果
2021/09/15 Javascript
青岛市的收音机研制与生产
2022/04/07 无线电
Web应用开发TypeScript使用详解
2022/05/25 Javascript