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

其他 2020-02-29 20:17:27 阅读次数: 0

效果图

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",//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);

猜你喜欢

转载自www.cnblogs.com/chenyingying0/p/12384926.html
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022