基于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 前台切换网站的样式实现
Jun 22 Javascript
JavaScript写的一个DIV 弹出网页对话框
Aug 14 Javascript
js调用AJAX时Get和post的乱码解决方法
Jun 04 Javascript
Javascript浅谈之引用类型
Dec 18 Javascript
jQuery如何防止这种冒泡事件发生
Feb 27 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
Mar 14 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
Jun 22 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
Dec 02 Javascript
js仿iphone秒表功能 计算平均数
Jan 11 Javascript
基于angular实现模拟微信小程序swiper组件
Jun 11 Javascript
jquery无缝图片轮播组件封装
Nov 25 jQuery
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
Aug 20 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中接口的应用
2015/08/12 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
jQuery Lightbox 图片展示插件使用说明
2010/04/25 Javascript
JavaScript 原型继承
2011/12/26 Javascript
详谈jQuery中的this和$(this)
2014/11/13 Javascript
使用Promise解决多层异步调用的简单学习心得
2016/05/17 Javascript
微信小程序 for 循环详解
2016/10/09 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
js实现悬浮窗效果(支持拖动)
2017/03/09 Javascript
create-react-app构建项目慢的解决方法
2018/03/14 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
axios向后台传递数组作为参数的方法
2018/08/11 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
浅谈JS和jQuery的区别
2019/03/27 jQuery
微信小程序如何获取地址
2019/12/24 Javascript
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python样条插值的实现代码
2018/12/17 Python
详解一种用django_cache实现分布式锁的方式
2019/09/01 Python
python logging 日志的级别调整方式
2020/02/21 Python
python 插入日期数据到Oracle实例
2020/03/02 Python
python实现图像拼接
2020/03/05 Python
python和pywin32实现窗口查找、遍历和点击的示例代码
2020/04/01 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
简单聊聊H5的pushState与replaceState的用法
2018/04/03 HTML / CSS
海滩咖啡馆:Beach Cafe
2018/02/02 全球购物
Ruby中的保护方法和私有方法与一般面向对象程序设计语言的一样吗
2013/05/01 面试题
党支部书记先进事迹
2014/01/17 职场文书
《乡愁》教学反思
2014/02/18 职场文书
幼儿园的门卫岗位职责
2014/04/10 职场文书
债务纠纷委托书范本
2014/10/14 职场文书
MySQL 如何分析查询性能
2021/05/12 MySQL
基于Python实现流星雨效果的绘制
2022/03/18 Python
 Redis 串行生成顺序编码的方法实现
2022/04/03 Redis
win10+RTX3050ti+TensorFlow+cudn+cudnn配置深度学习环境的方法
2022/06/25 Servers