jQuery自定义插件之tab标签切换
更多jQuery常用插件使用请访问：jQuery常用插件汇总
tab标签切换是网页中最常见不过的插件了，所以写一个自用的tab标签切换插件，偷懒一下。
上源码，想用的直接复制走，保存在一个js文件即可使用。
插件源码
/*
* @Author: JiaoShou
* @Date: 2020-07-09 16:46:28
* @Last Modified by: JiaoShou
* @Last Modified time: 2020-07-10 18:40:56
*/
;(function(window,$,undefined){
$.fn.extend({
/**
* tab标签切换插件
* 插件默认获取的是tan的父级，在父级下面去获取tab、content，所以写选择器的时候不需要单独写父级选择器了
* @param {object} option 可选参数
*/
'tab': function(option){
var defaults = {
index: 0, //tabs焦点的索引值,如果用户传入的值不能转换成数值，将使用此默认值
tab: '.tab-tab', //tba切换时候对应tab选择器(用于jq获取content元素集合，需要带#、.前缀)，会在父级范围内获取，所以不需要带父级了
class: 'tab-active', //tabs焦点的className
attr: 'data-tab-index', //tabs需要增加的自定义属性，方便取焦点索引值使用的,防止data-index与其它自定义属性冲突
autoplay: false, //tabs是否自动切换
speed: 1000, //tabs自动切换速度,如果用户传入的值不能转换成数值，将使用此默认值
eventType: '', //触发焦点切换的事件类型，目前可传'click'、'touchend'。
content: '', //tbas切换时候对应需要切换的内容选择器(用于jq获取content元素集合，需要带#、.前缀)，会在父级范围内获取，所以不需要带父级了，不需要内容切换的时候，此选项可不传值
contentClass: 'tab-content-active', //content焦点的className
contentAttr: 'data-tab-content-index', //content需要增加的自定义属性，方便取焦点索引值使用的,防止data-index与其它自定义属性冲突
callbackContent: function(){}, //鼠标移入content时候的回调函数,比如仅在鼠标移入content之后，才会显示当前选中项
callback: function(){} //鼠标移入tabs时候的回调函数,比如仅在鼠标移入tabs之后，才会显示当前选中项
},
opts = $.extend({}, defaults, option);
// 遍历插件对象，防止多个效果同步bug
return this.each(function () {
var tab = {
$el: $(this),
defaults: defaults, //插件默认值
iTabLength: 0, //tabs的总个数
index: opts.index, //tabs焦点的索引值
tab: opts.tab, //tbas切换时候对应tab选择器(用于jq获取content元素集合，需要带#、.前缀)
class: opts.class, //tabs焦点的className
attr: opts.attr, //tabs需要增加的自定义属性，方便取焦点索引值使用的
autoplay: opts.autoplay, //tabs是否自动切换
speed: opts.speed, //tabs自动切换速度
eventType: opts.eventType, //触发切换的事件类型
content: opts.content, //tbas切换时候对应需要切换的内容选择器(用于jq获取content元素集合)，不需要内容切换的时候，此选项可不传值
contentClass: opts.contentClass, //content焦点的className
contentAttr: opts.contentAttr, //content需要增加的自定义属性，方便取焦点索引值使用的
callbackContent: opts.callbackContent, //鼠标移入content时候的回调函数
callback: opts.callback, //鼠标移入tabs时候的回调函数
$tab: null, //用jq获取tab元素集合
$content: null, //用jq获取content元素集合
iContentLength: 0, //用jq获取content元素集合
timer: null, //tabs定时器变量
// 初始化函数
'init': function(){
// 规范初始化参数
this.initProp();
// 给tabs设置自定义属性
this.setAttr();
// 给content内容设置自定义属性
this.setContentAttr();
// 重新计算index，防止传入错误的范围
this.countIndex();
// 初始化焦点元素
this.setFocus();
// 自动切换事件，内部会自己判断
this.play();
// 鼠标移入tabs的事件
this.enterTabs();
// 鼠标移出tabs的事件
this.leaveTabs();
// 如果有切换内容，才给内容添加响应事件
if (this.iContentLength>0) {
// 鼠标移入content的事件
this.enterContent();
// 鼠标移出content的事件
this.leaveContent();
}
},
// 规范初始化参数
'initProp': function(){
if ($.trim(this.content).length > 0) {
// 如果选择器不为空，说明有切换内容
this.content = $.trim(this.content);
this.$content = $(opts.content,this.$el);
this.iContentLength = this.$content.length;
}
// 获取tab按钮
this.$tab = $(opts.tab,this.$el);
// 获取tabs的总长度
this.iTabLength = this.$tab.length;
// 规范规数值参数,防止手残输入错误，输入错误则恢复成插件默认值
this.index = Number(this.index) || this.defaults.index;
this.speed = Number(this.speed) || this.defaults.speed;
// 规范字符串参数，去除首尾空格
this.class = $.trim(this.class);
this.attr = $.trim(this.attr);
this.contentClass = $.trim(this.contentClass);
this.contentAttr = $.trim(this.contentAttr);
},
// 切换tabs焦点样式
'setFocus': function(){
// 先清除样式，因为有可能不是同级，所以没用.siblings()方法清除样式
this.$tab.removeClass(this.class);
// 再给焦点添加样式
this.$tab.eq(this.index).addClass(this.class);
// 鼠标移入tabs时候的回调函数
this.callback&&this.callback();
// 如果有内容需要切换，就进行内容切换
if (!!this.iContentLength) {
this.setContentFocus();
}
},
// 设置content焦点样式
'setContentFocus': function(){
// 先清除样式，因为有可能不是同级，所以没用.siblings()方法清除样式
this.$content.removeClass(this.contentClass);
// 再给焦点添加样式
this.$content.eq(this.index).addClass(this.contentClass);
},
// 给tabs设置自定义属性，方便取索引值
'setAttr': function(){
// 存this对象，方便下面指向调用
var _this = this;
// 给每个tabs对象添加data-index自定义属性,方便取当前元素的索引值
this.$tab.each(function(index) {
// 切记！！！each回调里面的this是元素的js对象，没用jq方法
this.setAttribute(_this.attr, index);
});
},
// 给tabs设置自定义属性，方便取索引值
'setContentAttr': function(){
// 存this对象，方便下面指向调用
var _this = this;
// 如果有content内容需要切换，同样设置自定义属性
if (!!this.iContentLength) {
this.$content.each(function(index) {
// 切记！！！each回调里面的this是元素的js对象，没用jq方法
this.setAttribute(_this.contentAttr, index);
});
}
},
// 鼠标移入tabs的事件
'enterTabs': function(){
// 存this对象，方便下面指向调用
var _this = this;
// 移入元素清空定时器，并给当前元素设置焦点样式
this.$tab.on('mouseenter',function(){
// 清空定时器
clearInterval(_this.timer);
// 如果鼠标反复移入当前焦点，就不进行切换渲染
if (_this.index == parseInt($(this).attr(_this.attr))) {
return false;
}
if (_this.eventType == 'click') {
$(this).on(_this.eventType,function(){
// 如果是当前焦点，就不进行切换渲染
if (_this.index != parseInt($(this).attr(_this.attr))) {
// 改变index索引值
_this.index=parseInt($(this).attr(_this.attr));
// 设置tabs焦点样式
_this.setFocus();
}
})
}else{
// 改变index索引值
_this.index=parseInt($(this).attr(_this.attr));
// 设置tabs焦点样式
_this.setFocus();
}
});
},
// 鼠标移出tabs的事件
'leaveTabs': function(){
// 存this对象，方便下面指向调用
var _this = this;
// 移出元素开启定时器
this.$tab.on('mouseleave',function(){
_this.play();
});
},
// 鼠标移入content的事件
'enterContent': function(){
// 存this对象，方便下面指向调用
var _this = this;
// 移入元素清空定时器，并给当前元素设置焦点样式
this.$content.on('mouseenter',function(){
// 清空定时器
clearInterval(_this.timer);
// 鼠标移入content时候的回调函数
_this.callbackContent&&_this.callbackContent();
});
},
// 鼠标移出content的事件
'leaveContent': function(){
// 存this对象，方便下面指向调用
var _this = this;
// 移出元素开启定时器
this.$content.on('mouseleave',function(){
_this.play();
});
},
// 计算索引值是否超出tabs的最大长度
'countIndex': function(){
this.index = parseInt(this.index);
// 如果index小于0，重置为0
if (this.index<0) {
this.index=0;
}
// 如果index超出tabs的总个数，index归零
this.index = this.index % this.iTabLength;
},
// 焦点index自增事件
'addIndex': function(_this){
// 因为在定时器调用addIndex函数，this指向出现问题，所以需要修改this指向
return function(){
// index自增
_this.index++;
// 重新判断index
_this.countIndex();
// 设置样式
_this.setFocus(_this.index);
}
},
// 自动焦点切换事件
'play': function(){
if (this.autoplay) {
// 自动切换定时器
this.timer = setInterval(this.addIndex(this), this.speed);
}
}
};
// 初始化tab函数
tab.init();
});
}
});
})(window,jQuery);
案例html布局
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>较瘦 - 博客园</title>
<style>
*{
margin: 0;
padding: 0;
}
span{display: inline-block;}
span.tab-active{background: rgb(38, 184, 221);}
.tab div{width: 100px;height: 100px;border: 1px solid #000;display: none;}
.tab div.tab-content-active{background: rgb(38, 184, 221);display: block;}
.tab div.active{background: rgb(245, 76, 9);display: block;}
</style>
<script src="./scripts/jQuery/jquery-1.8.3.min.js"></script>
<script src="./scripts/myjQuery/jquery.tab.js"></script>
</head>
<body>
<div class="tab tab1">
<p>当前焦点是：<i></i></p>
<br/>
<br/>
<span>选项卡11</span>
<br/>
<span>选项卡22</span>
<br/>
<span>选项卡33</span>
<br/>
<span>选项卡44</span>
<br/>
<span>选项卡55</span>
<br/>
<div>内容111</div>
<br/>
<div>内容222</div>
<br/>
<div>内容333</div>
<br/>
<div>内容444</div>
<br/>
<div>内容555</div>
<br/>
</div>
<div class="tab tab2">
<p>当前焦点是：<i></i></p>
<br/>
<br/>
<span>选项卡11</span>
<br/>
<span>选项卡22</span>
<br/>
<span>选项卡33</span>
<br/>
<span>选项卡44</span>
<br/>
<span>选项卡55</span>
<br/>
<div class="tab-content">内容111</div>
<br/>
<div class="tab-content">内容222</div>
<br/>
<div class="tab-content">内容333</div>
<br/>
<div class="tab-content">内容444</div>
<br/>
<div class="tab-content">内容555</div>
<br/>
</div>
<script>
$(function(){
// $('.tab1').tab({'autoplay':true,'tab':'span','content':' div','speed':300});
// $('.tab2').tab({'autoplay':true,'tab':'span'});
$('.tab1').tab({
autoplay:true,
tab:'span',
content: 'div', //tbas切换时候对应需要切换的内容选择器(用于jq获取content元素集合)，不需要内容切换的时候，此选项可不传值
contentClass: 'active', //content焦点的className
callback: function(){
var str = this.$tab.eq(this.index).html() +'---'+ this.$content.eq(this.index).html();
$('p i').html(str);
}
});
});
</script>
</body>
</html>
自定义tab标签切换插件使用方法
在页面中引入jquery和jquery.tab.js文件(根据项目目录引入必要文件)。
<script src="./js/jquery-1.11.3.min.js"></script>
<script src="./js/jquery.tab.js"></script>
HTML结构
没有特殊说明，只要可以选取到元素即可
初始化插件
在页面DOM元素加载完毕之后，通过tab()方法来初始化该插件。
$(function(){
$('span').tab();
});
插件配置参数
该插件的可用配置参数有：
index：tabs焦点的索引值,也可以用于插件初始化的选中项用,如果用户传入的值不能转换成数值，将使用此默认值。默认为0tab：tba切换时候对应tab选择器(用于jq获取content元素集合，需要带#、.前缀)，会在父级范围内获取，所以不需要带父级了。默认为'.tab-tab'class：tabs焦点的className。默认为'tab-active'attr：tabs需要增加的自定义属性，方便取焦点索引值使用的,防止data-index与其它自定义属性冲突。默认为'data-tab-indexautoplay：tabs是否自动切换,默认不自动切换。默认为falsespeed：tabs自动切换速度,如果用户传入的值不能转换成数值，将使用此默认值。默认为1000eventType：触发焦点切换的事件类型，目前可传'click'、'touchend'。默认为''content：tbas切换时候对应需要切换的内容选择器(用于jq获取content元素集合，需要带#、.前缀)，会在父级范围内获取，所以不需要带父级了，不需要内容切换的时候，此选项可不传值。默认为 ``contentClass：content焦点的className。默认为'tab-content-active'contentAttr：content需要增加的自定义属性，方便取焦点索引值使用的,防止data-index与其它自定义属性冲突。默认为data-tab-content-indexcallbackContent：鼠标移入content时候的回调函数,比如仅在鼠标移入content之后，才会显示当前选中项。默认为function(){}callback：鼠标移入tabs时候的回调函数,比如仅在鼠标移入tabs之后，才会显示当前选中项。默认为function(){}
插件使用案例
使用一：最基础版 只需要切换三个span标签,这个插件所有的option都是可选项，都是可选项！！！
$(function () {
$('.tab').tab({
tab:'span', //tab选择器
});
});
最基础的是不会自动切换的，需要鼠标移入才会切换,这个插件所有的option都是可选项，都是可选项！！！
使用二：设置默认值焦点，设置焦点className，自动切换，设置切换speed
$(function () {
$('.tab').tab({
tab:'span', //tab选择器
index: 0, //tabs焦点的索引值
class: 'active', //tabs焦点的className
attr: 'data-index', //tabs需要增加的自定义属性，方便取焦点索引值使用的,防止data-index与其它自定义属性冲突
autoplay: false, //tabs是否自动切换
speed: 1000 //tabs自动切换速度
});
});
使用三：设置内容同步切换，设置内容焦点className，设置tab切换时候，在p标签内显示当前焦点内容
$(function () {
$('.tab1').tab({
autoplay:true,
tab:'span',
content: 'div', //tbas切换时候对应需要切换的内容选择器(用于jq获取content元素集合)，不需要内容切换的时候，此选项可不传值
contentClass: 'active', //content焦点的className
callback: function(){
var str = this.$tab.eq(this.index).html() +'---'+ this.$content.eq(this.index).html();
$('p i').html(str);
}
});
});
好了，暂时就写这三个使用案例，仔细看一下代码，都有注释不是很难。
