基于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 相关文章推荐
早该知道的7个JavaScript技巧
Jun 21 Javascript
微信小程序 地图map详解及简单实例
Jan 10 Javascript
JavaScript Date 知识浅析
Jan 29 Javascript
bootstrap table单元格新增行并编辑
May 19 Javascript
Angular项目从新建、打包到nginx部署全过程记录
Dec 09 Javascript
Vue实现todolist删除功能
Jun 26 Javascript
更改BootStrap popover的默认样式及popover简单用法
Sep 13 Javascript
JS实现倒计时图文效果
Nov 17 Javascript
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
C#程序员入门学习微信小程序的笔记
Mar 05 Javascript
使用watch在微信小程序中实现全局状态共享
Jun 03 Javascript
React传值 组件传值 之间的关系详解
Aug 26 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中urlencode与rawurlencode的区别
2016/09/05 PHP
PHP使用phpunit进行单元测试示例
2019/09/23 PHP
JavaScript延迟加载
2021/03/09 Javascript
jquery 双色表格实现代码
2009/12/08 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
从数组中随机取x条不重复数据的JS代码
2013/12/24 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
Bootstrap每天必学之导航
2015/11/26 Javascript
jquery调整表格行tr上下顺序实例讲解
2016/01/09 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
2017/02/15 Javascript
20行js代码实现的贪吃蛇小游戏
2017/06/20 Javascript
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
2018/05/31 Javascript
浅谈微信小程序flex布局基础
2018/09/10 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
2018/09/25 Javascript
Webstorm2016使用技巧(SVN插件使用)
2018/10/29 Javascript
vue项目刷新当前页面的三种方法
2018/12/04 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
vue生命周期与钩子函数简单示例
2019/03/13 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
2019/05/09 Javascript
JS中准确判断变量类型的方法
2020/06/01 Javascript
举例详解Python中yield生成器的用法
2015/08/05 Python
详解Python网络爬虫功能的基本写法
2016/01/28 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
Python实现的爬取百度贴吧图片功能完整示例
2019/05/10 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
IntelliJ 中配置 Anaconda的过程图解
2020/06/01 Python
django跳转页面传参的实现
2020/09/17 Python
HTML5表单验证特性(知识点小结)
2020/03/10 HTML / CSS
39美元购买一副眼镜或太阳镜:39DollarGlasses.com
2018/06/17 全球购物
Zavvi西班牙:电子游戏、极客服装、Blu-ray、Funko Pop等
2019/05/03 全球购物
OSPF有什么优点?为什么OSPF比RIP收敛快?
2013/02/13 面试题
体育专业学生自我评价范文
2014/01/17 职场文书
个人对照检查剖析材料
2014/10/13 职场文书
SpringBoot2零基础到精通之数据与页面响应
2022/03/22 Java/Android