jQuery封装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 https://www.cnblogs.com/chenyingying0/p/12363689.html

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 https://www.cnblogs.com/chenyingying0/p/12363649.html

showhide.js https://www.cnblogs.com/chenyingying0/p/12363707.html

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",//clickcss3:false,js:false,animation:"fade",activeIdx:0,interval:0,delay:0//是否延迟
    };Tab.prototype._init=function(){var self=this;var timer=null;//init showthis.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 eventthis.panels.on("show shown hide hidden",function(e){self.elem.trigger("tab-"+e.type,[e.type,self.panels.index(this),this]);//传递的参数：事件类型 触发事件的索引，触发事件的元素
        })//showHide initthis.panels.showHide(this.options);//bind eventthis.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-itemif(self.options.delay){//delayclearTimeout(timer);//先清除之前的定时器timer=setTimeout(function(){self.toggle(self.items.index(elem));//传入被点击的项的索引
                },self.options.delay);}else{//no delayself.toggle(self.items.index(elem));//传入被点击的项的索引
            }})//autoif(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或者hideif(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",//clickcss3:false,js:false,animation:"fade",activeIdx:0,interval:500,delay:0//是否延迟
    });})(jQuery);

jQuery封装tab选项卡组件(自定义自动功能和延迟显示功能）相关推荐

使用jQuery开发tab选项卡插件
为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...
html tab选项卡控件,Tab选项卡组件
Tab选项卡组件 Tab组件是根据AppCan 布局框架对数据列表进行封装的JS对象,通过配合的样式,使开发者在界面中可以快速完成选项卡控件的开发. 依赖 appcan.js appcan.contr ...
基于jquery的php分页,基于jQuery封装的分页组件
前言: 由于项目需要实现分页效果,上jQuery插件库找了下,但是木有找到自己想要的效果,于是自己封装了个分页组件. 思路: 主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新DOM的分页 ...
tab weui 页面切换_WeUI教程 - loadmore、msg、tab选项卡组件
loadmore 加载更多 Loadmore 加载更多正在加载暂无数据小程序下拉刷新,下拉加载更多的教程(29.30节) https://ke.qq.com/course/183926#tuin ...
jQuery制作tab选项卡
用jQuery来制作tab的选项卡. 说白了就是切换到别的选项,已简单的例子来说,先写出样式. CSS部分: <style>ul,li{list-style: none;margin: 0 ...
基于jQuery实现tab选项卡【js实现页签切换】
任务描述本关任务:用jquery实现一个tab切换的功能. 效果图如下: 相关知识为了完成本关任务,你需要掌握:1.层次选择器,2.方法show和hide, 3.操作css类的方法. 层次选择器 ...
【jQuery】前端项目实践案例1——使用jQuery制作Tab选项卡点击切换效果
1.实现效果: 案例描述:当用户单击不同的导航时,与其对应的内容回相应的呈现. 案例要求:使用jquery制作实现tab选项卡单击切换效果. 2.实现思路: (1)div+css布局,制作选项卡和对应 ...
tab栏圆点按钮_zzx-tabs tab选项卡可动态设置小圆点
更新记录 1.0.1(2020-05-14) 解决底部line跟选中颜色不同步问题 1.0.0(2020-04-29) 组件初始化,功能完成查看更多 zzx-tabs 这是一个tab选项卡组件,可以 ...
Tab选项卡切换效果JavaScript汇总
tab切换在现在的网页上,真是十分的常用呀.但是tab切换的JavaScript实现却有很多需要注意的地方,如何用最少的代码,最灵活的实现.这里收集了37个tab实现的JavaScript代码,在此备 ...

jQuery封装tab选项卡组件(自定义自动功能和延迟显示功能）

jQuery封装tab选项卡组件(自定义自动功能和延迟显示功能）相关推荐

最新文章

热门文章