jQuery封装tab选项卡组件(自定义自动功能和延迟显示功能）
程序员文章站
2022-07-09 20:00:50
效果图 tab.html tab
效果图
tab.html
<!doctype html>
<html lang="zh-cn"><!-- 设置简体中文 -->
<head>
<meta charset="utf-8">
<title>tab</title>
<link rel="stylesheet" href="../css/base.css">
<link rel="stylesheet" href="../css/tab.css">
<!-- css一般放在dom加载前，防止dom裸奔 -->
</head>
<body>
<!-- 楼层一 -->
<div class="floor">
<div class="container">
<div class="tab-head">
<div class="tab-head-title fl">
<span class="tab-head-title-num">1f</span><span class="tab-head-title-name">服装箱包</span>
</div>
<ul class="tab-head-item-wrap fr">
<li class="fl"><a href="javascript:;" class="tab-head-item tab-head-item-active">大牌</a></li>
<li class="fl tab-head-item-divider text-hidden">分割线</li>
<li class="fl"><a href="javascript:;" class="tab-head-item">男装</a></li>
<li class="fl tab-head-item-divider text-hidden">分割线</li>
<li class="fl"><a href="javascript:;" class="tab-head-item">女装</a></li>
</ul>
</div>
<div class="tab-body">
<ul class="tab-body-panel">
<li class="tab-body-panel-item fl">
<p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/1/1.png"></a></p>
<p class="tab-body-panel-item-name">匡威男棒球开衫外套2020</p>
<p class="tab-body-panel-item-price">￥479</p>
</li>
<li class="tab-body-panel-item fl">
<p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/1/1.png"></a></p>
<p class="tab-body-panel-item-name">匡威男棒球开衫外套2020</p>
<p class="tab-body-panel-item-price">￥479</p>
</li>
<li class="tab-body-panel-item fl">
<p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/1/1.png"></a></p>
<p class="tab-body-panel-item-name">匡威男棒球开衫外套2020</p>
<p class="tab-body-panel-item-price">￥479</p>
</li>
<li class="tab-body-panel-item fl">
<p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/1/1.png"></a></p>
<p class="tab-body-panel-item-name">匡威男棒球开衫外套2020</p>
<p class="tab-body-panel-item-price">￥479</p>
</li>
<li class="tab-body-panel-item fl">
<p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/1/1.png"></a></p>
<p class="tab-body-panel-item-name">匡威男棒球开衫外套2020</p>
<p class="tab-body-panel-item-price">￥479</p>
</li>
<li class="tab-body-panel-item fl">
<p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/1/1.png"></a></p>
<p class="tab-body-panel-item-name">匡威男棒球开衫外套2020</p>
<p class="tab-body-panel-item-price">￥479</p>
</li>
<li class="tab-body-panel-item fl">
<p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/1/1.png"></a></p>
<p class="tab-body-panel-item-name">匡威男棒球开衫外套2020</p>
<p class="tab-body-panel-item-price">￥479</p>
</li>
<li class="tab-body-panel-item fl">
<p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/1/1.png"></a></p>
<p class="tab-body-panel-item-name">匡威男棒球开衫外套2020</p>
<p class="tab-body-panel-item-price">￥479</p>
</li>
<li class="tab-body-panel-item fl">
<p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/1/1.png"></a></p>
<p class="tab-body-panel-item-name">匡威男棒球开衫外套2020</p>
<p class="tab-body-panel-item-price">￥479</p>
</li>
<li class="tab-body-panel-item fl">
<p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/1/1.png"></a></p>
<p class="tab-body-panel-item-name">匡威男棒球开衫外套2020</p>
<p class="tab-body-panel-item-price">￥479</p>
</li>
<li class="tab-body-panel-item fl">
<p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/1/1.png"></a></p>
<p class="tab-body-panel-item-name">匡威男棒球开衫外套2020</p>
<p class="tab-body-panel-item-price">￥479</p>
</li>
<li class="tab-body-panel-item fl">
<p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/1/1.png"></a></p>
<p class="tab-body-panel-item-name">匡威男棒球开衫外套2020</p>
<p class="tab-body-panel-item-price">￥479</p>
</li>
</ul>
<ul class="tab-body-panel">
<li class="tab-body-panel-item fl">
<p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/2/1.png"></a></p>
<p class="tab-body-panel-item-name">匡威男棒球开衫外套2020</p>
<p class="tab-body-panel-item-price">￥479</p>
</li>
<li class="tab-body-panel-item fl">
<p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/2/1.png"></a></p>
<p class="tab-body-panel-item-name">匡威男棒球开衫外套2020</p>
<p class="tab-body-panel-item-price">￥479</p>
</li>
<li class="tab-body-panel-item fl">
<p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/2/1.png"></a></p>
<p class="tab-body-panel-item-name">匡威男棒球开衫外套2020</p>
<p class="tab-body-panel-item-price">￥479</p>
</li>
<li class="tab-body-panel-item fl">
<p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/2/1.png"></a></p>
<p class="tab-body-panel-item-name">匡威男棒球开衫外套2020</p>
<p class="tab-body-panel-item-price">￥479</p>
</li>
<li class="tab-body-panel-item fl">
<p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/2/1.png"></a></p>
<p class="tab-body-panel-item-name">匡威男棒球开衫外套2020</p>
<p class="tab-body-panel-item-price">￥479</p>
</li>
<li class="tab-body-panel-item fl">
<p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/2/1.png"></a></p>
<p class="tab-body-panel-item-name">匡威男棒球开衫外套2020</p>
<p class="tab-body-panel-item-price">￥479</p>
</li>
<li class="tab-body-panel-item fl">
<p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/2/1.png"></a></p>
<p class="tab-body-panel-item-name">匡威男棒球开衫外套2020</p>
<p class="tab-body-panel-item-price">￥479</p>
</li>
<li class="tab-body-panel-item fl">
<p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/2/1.png"></a></p>
<p class="tab-body-panel-item-name">匡威男棒球开衫外套2020</p>
<p class="tab-body-panel-item-price">￥479</p>
</li>
<li class="tab-body-panel-item fl">
<p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/2/1.png"></a></p>
<p class="tab-body-panel-item-name">匡威男棒球开衫外套2020</p>
<p class="tab-body-panel-item-price">￥479</p>
</li>
<li class="tab-body-panel-item fl">
<p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/2/1.png"></a></p>
<p class="tab-body-panel-item-name">匡威男棒球开衫外套2020</p>
<p class="tab-body-panel-item-price">￥479</p>
</li>
<li class="tab-body-panel-item fl">
<p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/2/1.png"></a></p>
<p class="tab-body-panel-item-name">匡威男棒球开衫外套2020</p>
<p class="tab-body-panel-item-price">￥479</p>
</li>
<li class="tab-body-panel-item fl">
<p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/2/1.png"></a></p>
<p class="tab-body-panel-item-name">匡威男棒球开衫外套2020</p>
<p class="tab-body-panel-item-price">￥479</p>
</li>
</ul>
<ul class="tab-body-panel">
<li class="tab-body-panel-item fl">
<p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/3/1.png"></a></p>
<p class="tab-body-panel-item-name">匡威男棒球开衫外套2020</p>
<p class="tab-body-panel-item-price">￥479</p>
</li>
<li class="tab-body-panel-item fl">
<p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/3/1.png"></a></p>
<p class="tab-body-panel-item-name">匡威男棒球开衫外套2020</p>
<p class="tab-body-panel-item-price">￥479</p>
</li>
<li class="tab-body-panel-item fl">
<p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/3/1.png"></a></p>
<p class="tab-body-panel-item-name">匡威男棒球开衫外套2020</p>
<p class="tab-body-panel-item-price">￥479</p>
</li>
<li class="tab-body-panel-item fl">
<p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/3/1.png"></a></p>
<p class="tab-body-panel-item-name">匡威男棒球开衫外套2020</p>
<p class="tab-body-panel-item-price">￥479</p>
</li>
<li class="tab-body-panel-item fl">
<p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/3/1.png"></a></p>
<p class="tab-body-panel-item-name">匡威男棒球开衫外套2020</p>
<p class="tab-body-panel-item-price">￥479</p>
</li>
<li class="tab-body-panel-item fl">
<p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/3/1.png"></a></p>
<p class="tab-body-panel-item-name">匡威男棒球开衫外套2020</p>
<p class="tab-body-panel-item-price">￥479</p>
</li>
<li class="tab-body-panel-item fl">
<p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/3/1.png"></a></p>
<p class="tab-body-panel-item-name">匡威男棒球开衫外套2020</p>
<p class="tab-body-panel-item-price">￥479</p>
</li>
<li class="tab-body-panel-item fl">
<p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/3/1.png"></a></p>
<p class="tab-body-panel-item-name">匡威男棒球开衫外套2020</p>
<p class="tab-body-panel-item-price">￥479</p>
</li>
<li class="tab-body-panel-item fl">
<p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/3/1.png"></a></p>
<p class="tab-body-panel-item-name">匡威男棒球开衫外套2020</p>
<p class="tab-body-panel-item-price">￥479</p>
</li>
<li class="tab-body-panel-item fl">
<p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/3/1.png"></a></p>
<p class="tab-body-panel-item-name">匡威男棒球开衫外套2020</p>
<p class="tab-body-panel-item-price">￥479</p>
</li>
<li class="tab-body-panel-item fl">
<p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/3/1.png"></a></p>
<p class="tab-body-panel-item-name">匡威男棒球开衫外套2020</p>
<p class="tab-body-panel-item-price">￥479</p>
</li>
<li class="tab-body-panel-item fl">
<p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/3/1.png"></a></p>
<p class="tab-body-panel-item-name">匡威男棒球开衫外套2020</p>
<p class="tab-body-panel-item-price">￥479</p>
</li>
</ul>
</div>
</div>
</div>
<script src="../js/jquery.js"></script>
<script src="../js/transition.js"></script>
<script src="../js/showhide.js"></script>
<script src="../js/tab.js"></script>
</body>
</html>
base.css
tab.css
/*common*/
.container{
width:1200px;
margin:0 auto;
}
.link{
color:#4d555d;
}
a.link:hover{
color:#f01414;
}
.fl{
float:left;
}
/*文字隐藏*/
.text-hidden{
text-indent:-9999px;
overflow:hidden;
}
/*showhide*/
.fadeout{
opacity: 0;
visibility: hidden;
}
.slideupdowncollapse{
height:0 !important;/*避免因为优先级不够而无法生效*/
padding-top:0 !important;
padding-bottom:0 !important;
}
.slideleftrightcollapse{
width:0 !important;/*避免因为优先级不够而无法生效*/
padding-left:0 !important;
padding-right:0 !important;
}
/*floor楼层区域*/
.floor{
margin-top:7px;
}
.tab-head{
height:68px;
border-bottom:1px solid #f01414;
}
.tab-head-title{
margin-top:22px;
}
.tab-head-title-num{
display: inline-block;
width:24px;
height:24px;
border-radius:50%;
background-color:#07111b;
color:#fff;
text-align: center;
line-height:24px;
margin-right:10px;
}
.tab-head-title-name{
font-size:20px;
color:#07111b;
position: relative;
top:3px;
}
.tab-head-item-wrap{
margin-top:8px;
height:62px;
line-height:62px;
}
.tab-head-item{
display: inline-block;
font-size:14px;
color:#93999f;
margin-right:16px;
}
.tab-head-item-active{
color:#f01414;
background:url(../img/floor-arrow.png) center bottom no-repeat;
}
.tab-head-item-divider{
display: inline-block;
width:1px;
height:14px;
background-color:#d9dde1;
margin-top:21px;
margin-right:16px;
}
.tab-body{
height:466px;
}
.tab-body-panel{
height:466px;
display: none;
}
.tab-body-panel-item{
width:200px;
height:233px;
text-align: center;
}
.tab-body-panel-item:hover{
box-shadow:0 0 10px rgba(0,0,0,.2);
}
.tab-body-panel-item-pic{
margin-top:24px;
}
.tab-body-panel-item-name{
margin-top:23px;
font-size:12px;
color:#07111b;
}
.tab-body-panel-item-price{
margin-top:9px;
font-size:14px;
color:#f01414;
}
transition.js
showhide.js
tab.js
(function($){
"use strict";
function tab(elem,options){
this.elem=elem;
this.options=options;
this.items=this.elem.find(".tab-head-item");//tab选项卡
this.panels=this.elem.find(".tab-body-panel");//tab选项面板
this.tabnum=this.items.length;//tab选项数量
this.curidx=this._getidx(this.options.activeidx);//当前选项卡索引
this._init();//初始化
}
//默认参数
tab.defaults={
event:"mouseenter",//click
css3:false,
js:false,
animation:"fade",
activeidx:0,
interval:0,
delay:0//是否延迟
};
tab.prototype._init=function(){
var self=this;
var timer=null;
//init show
this.items.removeclass("tab-head-item-active");
this.items.eq(this.curidx).addclass("tab-head-item-active");//指定item添加样式
this.panels.eq(this.curidx).show();//指定panel显示
//trigger event
this.panels.on("show shown hide hidden",function(e){
self.elem.trigger("tab-"+e.type,[e.type,self.panels.index(this),this]);
//传递的参数：事件类型 触发事件的索引，触发事件的元素
})
//showhide init
this.panels.showhide(this.options);
//bind event
this.options.event=this.options.event==="click"?"click":"mouseenter";
//事件代理，替被点击的tab项做代理
this.elem.on(this.options.event,".tab-head-item",function(){
var elem=this;//elem指向被点击的那个.tab-head-item
if(self.options.delay){//delay
cleartimeout(timer);//先清除之前的定时器
timer=settimeout(function(){
self.toggle(self.items.index(elem));//传入被点击的项的索引
},self.options.delay);
}else{//no delay
self.toggle(self.items.index(elem));//传入被点击的项的索引
}
})
//auto
if(this.options.interval && !isnan(number(this.options.interval))){
this.elem.hover($.proxy(this.pause,this),$.proxy(this.auto,this));
this.auto();
}
}
//获取合理的索引
tab.prototype._getidx=function(index){
if(isnan(number(index))) return 0;
if(number(index)<0) return this.tabnum-1;
if(number(index)>this.tabnum-1) return 0;
return index;
}
//切换面板
tab.prototype.toggle=function(index){
if(this.curidx===index) return;
this.items.eq(this.curidx).removeclass("tab-head-item-active");
this.items.eq(index).addclass("tab-head-item-active");
this.panels.eq(this.curidx).showhide("hide");
this.panels.eq(index).showhide("show");
this.curidx=index;
}
//自动切换
tab.prototype.auto=function(){
var self=this;
this.timer=setinterval(function(){
self.toggle(self._getidx(self.curidx+1));
},self.options.interval);
}
//停止
tab.prototype.pause=function(){
clearinterval(this.timer);
}
//注册插件，相当于对外暴露接口
$.fn.extend({
tab:function(opt){
//return this可以返回对象，方便连写
return this.each(function(){
var ui=$(this);
var tab=ui.data("tab");
//opt是参数对象
var options=$.extend({},tab.defaults,ui.data(),typeof opt==="object"&&opt);
//单例：一个dom元素对应一个实例，如果已经存在则不需要反复实例化
if(!tab){
tab=new tab(ui,options);
ui.data("tab",tab);
}
//opt是show或者hide
if(typeof tab[opt]==="function"){
tab[opt]();
}
});
}
});
//调用tab插件
var floor=$(".floor");
floor.on("tab-show tab-shown tab-hide tab-hidden",function(e,type,index,elem){
//根据自己需求来写
console.log(type);
console.log(index);
console.log(elem);
})
floor.tab({
event:"mouseenter",//click
css3:false,
js:false,
animation:"fade",
activeidx:0,
interval:500,
delay:0//是否延迟
});
})(jquery);