基于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 相关文章推荐
一起来写段JS drag拖动代码
Dec 09 Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
Jul 31 Javascript
浅谈jquery回调函数callback的使用
Jan 30 Javascript
使用window.prompt()实现弹出用户输入的对话框
Apr 13 Javascript
JQuery页面地址处理插件jqURL详解
May 03 Javascript
jQuery检测滚动条是否到达底部
Dec 15 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
Jun 03 Javascript
微信小程序 wx:for的使用实例详解
Apr 27 Javascript
vue2 router 动态传参,多个参数的实例
Nov 10 Javascript
JS中touchstart事件与click事件冲突的解决方法
Mar 12 Javascript
JavaScript实现美化滑块效果
May 17 Javascript
Swiper.js实现移动端元素左右滑动
Sep 08 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
Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法
2008/12/06 PHP
PHP 编程的 5个良好习惯
2009/02/20 PHP
php字符集转换
2017/01/23 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
Input 特殊事件onpopertychange和oninput
2009/06/17 Javascript
js multiple全选与取消全选实现代码
2012/12/04 Javascript
jquery实现图片翻页效果
2013/12/23 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
2016/03/25 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
JS从一组数据中找到指定的单条数据的方法
2016/06/02 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
2016/06/06 Javascript
检查表单元素的值是否为空的实例代码
2016/06/16 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
2016/06/24 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
js验证手机号、密码、短信验证码代码工具类
2020/06/24 Javascript
Vue封装一个简单轻量的上传文件组件的示例
2018/03/21 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
2018/09/19 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
前端Electron新手入门教程详解
2019/06/21 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
小程序跳转H5页面的方法步骤
2020/03/06 Javascript
浅析TypeScript 命名空间
2020/03/19 Javascript
原生JavaScript写出Tabs标签页的实例代码
2020/07/20 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
2020/08/10 Javascript
Vue实现指令式动态追加小球动画组件的步骤
2020/12/18 Vue.js
python批量导出导入MySQL用户的方法
2013/11/15 Python
使用python对文件中的数值进行累加的实例
2018/11/28 Python
python requests更换代理适用于IP频率限制的方法
2019/08/21 Python
Python基于正则表达式实现计算器功能
2020/07/13 Python
解决Python import .pyd 可能遇到路径的问题
2021/03/04 Python
保洁主管岗位职责
2013/11/20 职场文书
给领导的检讨书
2014/02/16 职场文书
关于晚自习早退的检讨书
2014/09/13 职场文书
2016春节家属慰问信
2015/03/25 职场文书
资金申请报告范文
2015/05/14 职场文书