基于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图片预加载 等比缩放实现代码
Oct 04 Javascript
JQuery的Ajax跨域请求原理概述及实例
Apr 26 Javascript
jquery取消选择select下拉框示例代码
Feb 22 Javascript
用js闭包的方法实现多点标注冒泡示例
May 29 Javascript
jQuery动态创建html元素的常用方法汇总
Sep 05 Javascript
深入理解jQuery之防止冒泡事件
May 24 Javascript
jquery插件方式实现table查询功能的简单实例
Jun 06 Javascript
JS拉起或下载app的实现代码
Feb 22 Javascript
在vue中使用Autoprefixed的方法
Jul 27 Javascript
vue登录注册实例详解
Sep 14 Javascript
vue实现购物车小案例
Sep 27 Javascript
一行JavaScript代码如何实现瀑布流布局
Dec 11 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相当简单的分页类
2008/10/02 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
php使用curl下载指定大小的文件实例代码
2017/09/30 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
多浏览器兼容的获取元素和鼠标的位置的js代码
2009/12/15 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
使用forever管理nodejs应用教程
2014/06/03 NodeJs
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
如何用JS判断两个数字的大小
2016/07/21 Javascript
js HTML5手机刮刮乐代码
2020/09/29 Javascript
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
完美实现js选项卡切换效果(一)
2017/03/08 Javascript
js canvas实现橡皮擦效果
2018/12/20 Javascript
如何用JavaScript实现功能齐全的单链表详解
2019/02/11 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
2019/07/10 Javascript
小程序实现按下录音松开识别语音
2019/11/22 Javascript
[51:27]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
浅谈python字典多键值及重复键值的使用
2016/11/04 Python
python调用百度语音REST API
2018/08/30 Python
python编写简单端口扫描器
2019/09/04 Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
2020/04/22 Python
Python如何实现的二分查找算法
2020/05/27 Python
浅谈django不使用restframework自定义接口与使用的区别
2020/07/15 Python
Python中logging日志记录到文件及自动分割的操作代码
2020/08/05 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
大专自我鉴定范文
2013/10/23 职场文书
电子银行营销方案
2014/02/22 职场文书
人事行政专员岗位职责
2014/07/23 职场文书
党员干部反四风对照检查材料思想汇报
2014/09/14 职场文书
2014司机年终工作总结
2014/12/05 职场文书
2015年度个人业务工作总结
2015/04/27 职场文书
基于Golang 高并发问题的解决方案
2021/05/08 Golang
python数字转对应中文的方法总结
2021/08/02 Python