基于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 相关文章推荐
JavaScript中Array 对象相关的几个方法
Dec 22 Javascript
JavaScript面向对象之Prototypes和继承
Jul 12 Javascript
jQuery中复合属性选择器用法实例
Dec 31 Javascript
关于JS 预解释的相关理解
Jun 28 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
Aug 08 Javascript
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
vue.js 中使用(...)运算符报错的解决方法
Aug 09 Javascript
vue监听input标签的value值方法
Aug 27 Javascript
使用Vuex解决Vue中的身份验证问题
Sep 28 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
May 13 Javascript
vue+element实现动态加载表单
Dec 13 Vue.js
JavaScript实现简单的音乐播放器
Aug 14 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
详解HTTP Cookie状态管理机制
2016/01/14 PHP
CodeIgniter控制器之业务逻辑实例分析
2016/01/20 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
PHP实现将多个文件中的内容合并为新文件的方法示例
2017/06/10 PHP
js 页面关闭前的出现提示的实现代码
2011/05/25 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
2012/01/15 Javascript
javascript中数组的concat()方法使用介绍
2013/12/18 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
Jquery响应回车键直接提交表单操作代码
2014/07/25 Javascript
javascript使用正则表达式检测IP地址
2014/12/03 Javascript
简单实现JavaScript图片切换效果
2016/11/28 Javascript
javascript中活灵活现的Array对象详解
2016/11/30 Javascript
vuex 项目结构目录及一些简单配置介绍
2018/04/08 Javascript
vue项目如何刷新当前页面的方法
2018/05/18 Javascript
layer.close()关闭进度条和Iframe窗的方法
2018/08/17 Javascript
JavaScript实现简单计算器功能
2019/12/19 Javascript
Vue-CLI与Vuex使用方法实例分析
2020/01/06 Javascript
微信小程序实现二维码签到考勤系统
2020/01/16 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
2020/03/09 Javascript
javascript中导出与导入实现模块化管理教程
2020/12/03 Javascript
Python中bisect的用法
2014/09/23 Python
Python网络编程基于多线程实现多用户全双工聊天功能示例
2018/04/10 Python
python使用PIL给图片添加文字生成海报示例
2018/08/17 Python
在python中使用with打开多个文件的方法
2019/01/07 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
Python使用enumerate获取迭代元素下标
2020/02/03 Python
pycharm通过ssh连接远程服务器教程
2020/02/12 Python
哪种Python框架适合你?简单介绍几种主流Python框架
2020/08/04 Python
Html5 Geolocation获取地理位置信息实例
2016/12/09 HTML / CSS
美国高端寝具品牌:Coyuchi
2017/02/08 全球购物
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
教师个人自我评价
2015/03/04 职场文书
电台广播稿范文
2015/08/19 职场文书
2016年大学校运会广播稿件
2015/12/21 职场文书
简单了解 MySQL 中相关的锁
2021/05/25 MySQL
直播实况, OMG破敌三路五十分钟大战神技局摩托车
2022/04/01 DOTA