基于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 相关文章推荐
sliderToggle在写jquery的计时器setTimeouter中不生效
May 26 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
Sep 25 Javascript
js实现简单的计算器功能
Jan 16 Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 Javascript
node学习记录之搭建web服务器教程
Feb 16 Javascript
深究AngularJS中ng-drag、ng-drop的用法
Jun 12 Javascript
详解vue渲染从后台获取的json数据
Jul 06 Javascript
JS判断数组那点事
Oct 10 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
Jan 07 Javascript
记一次vue去除#问题处理经过小结
Jan 24 Javascript
react使用antd表单赋值,用于修改弹框的操作
Oct 29 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之第五天
2006/10/09 PHP
php数字转汉字代码(算法)
2011/10/08 PHP
编译php 5.2.14+fpm+memcached(具体操作详解)
2013/06/18 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
Valerio 发布了 Mootools
2006/09/23 Javascript
基于jquery完美拖拽,可返回拖动轨迹
2012/03/29 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
jQuery中extend函数的实现原理详解
2015/02/03 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
在网页中插入百度地图的步骤详解
2016/12/02 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
彻底理解js面向对象之继承
2018/02/04 Javascript
vue自动化表单实例分析
2018/05/06 Javascript
vue awesome swiper异步加载数据出现的bug问题
2018/07/03 Javascript
解决vue中post方式提交数据后台无法接收的问题
2018/08/11 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
详解如何提升JSON.stringify()的性能
2019/06/12 Javascript
vue-devtools的安装和使用步骤详解
2019/10/17 Javascript
微信小程序纯文本实现@功能
2020/04/08 Javascript
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
Python collections模块的使用方法
2020/10/09 Python
Python plt 利用subplot 实现在一张画布同时画多张图
2021/02/26 Python
HTML5实现表单自动验证功能实例代码
2017/01/11 HTML / CSS
萌新的HTML5 入门指南
2020/11/06 HTML / CSS
美国酒店控股公司:Choice Hotels
2018/06/15 全球购物
应届生自荐信范文
2014/02/21 职场文书
2014年连锁店圣诞节活动方案
2014/12/09 职场文书
万能检讨书
2015/01/27 职场文书
工程服务质量承诺书
2015/04/29 职场文书
大学毕业晚会开场白
2015/05/29 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
python利用pandas分析学生期末成绩实例代码
2021/07/09 Python