基于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 性能优化指南(2)
May 21 Javascript
javascript闭包的高级使用方法实例
Jul 04 Javascript
利用jQuery实现可以编辑的表格
May 26 Javascript
jquery实现通用的内容渐显Tab选项卡效果
Sep 07 Javascript
javascript 广告移动特效的实现代码
Jun 25 Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 Javascript
Vuex之理解Getters的用法实例
Apr 19 Javascript
JavaScript常用数组操作方法,包含ES6方法
May 10 Javascript
如何用原生js写一个弹窗消息提醒插件
May 24 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
Sep 04 Javascript
JavaScript中的几种继承方法示例
Dec 06 Javascript
手写实现JS中的new
Nov 07 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
for循环连续求和、九九乘法表代码
2012/02/20 PHP
php 判断数组是几维数组
2013/03/20 PHP
浅析十款PHP开发框架的对比
2013/07/05 PHP
PHP中命名空间的使用例子
2019/03/22 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
jQuery 中ajax异步调用的四种方式
2016/06/28 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
2016/09/14 Javascript
javascript的几种写法总结
2016/09/30 Javascript
微信小程序入门教程
2016/11/18 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
2017/03/13 Javascript
写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
如何通过JS实现日历简单算法
2020/10/14 Javascript
django 自定义用户user模型的三种方法
2014/11/18 Python
python提取内容关键词的方法
2015/03/16 Python
python 远程统计文件代码分享
2015/05/14 Python
Ubuntu 16.04 LTS中源码安装Python 3.6.0的方法教程
2016/12/27 Python
python实现监控某个服务 服务崩溃即发送邮件报告
2018/06/21 Python
python中协程实现TCP连接的实例分析
2018/10/14 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
在pandas中遍历DataFrame行的实现方法
2019/10/23 Python
python3 pathlib库Path类方法总结
2019/12/26 Python
Python 爬取必应壁纸的实例讲解
2020/02/24 Python
Selenium 配置启动项参数的方法
2020/12/04 Python
如何在vscode中安装python库的方法步骤
2021/01/06 Python
俄罗斯电子产品在线商店:UltraTrade
2020/01/30 全球购物
什么是SCM(软件配置管理)
2014/08/16 面试题
线程同步的方法
2016/11/23 面试题
人事专员岗位职责
2013/11/20 职场文书
优秀实习自我鉴定
2013/12/04 职场文书
《听鱼说话》教学反思
2014/02/15 职场文书
本科生就业推荐信
2014/05/19 职场文书
作文之亲情600字
2019/09/23 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers
如何利用React实现图片识别App
2022/02/18 Javascript