1. 技术文章
  2. jQuery封装的tab组件（可选自动+可选延迟处理+按需加载）

jQuery封装的tab组件（可选自动+可选延迟处理+按需加载）

由 可紊 提交于 2020-02-29 21:04:38

效果图

tab2.html

<!DOCTYPE html>
<html lang="zh-CN"><!-- 设置简体中文 -->
<head>
    <meta charset="UTF-8">
    <title>tab2按需加载</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/tab2.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/loading.gif" data-src="../img/floor/1/1/1.png" class="floor-img"></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/loading.gif" data-src="../img/floor/1/1/1.png" class="floor-img"></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/loading.gif" data-src="../img/floor/1/1/1.png" class="floor-img"></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/loading.gif" data-src="../img/floor/1/1/1.png" class="floor-img"></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/loading.gif" data-src="../img/floor/1/1/1.png" class="floor-img"></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/loading.gif" data-src="../img/floor/1/1/1.png" class="floor-img"></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/loading.gif" data-src="../img/floor/1/2/1.png" class="floor-img"></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/loading.gif" data-src="../img/floor/1/2/1.png" class="floor-img"></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/loading.gif" data-src="../img/floor/1/2/1.png" class="floor-img"></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/loading.gif" data-src="../img/floor/1/2/1.png" class="floor-img"></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/loading.gif" data-src="../img/floor/1/2/1.png" class="floor-img"></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/loading.gif" data-src="../img/floor/1/2/1.png" class="floor-img"></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/loading.gif" data-src="../img/floor/1/3/1.png" class="floor-img"></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/loading.gif" data-src="../img/floor/1/3/1.png" class="floor-img"></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/loading.gif" data-src="../img/floor/1/3/1.png" class="floor-img"></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/loading.gif" data-src="../img/floor/1/3/1.png" class="floor-img"></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/loading.gif" data-src="../img/floor/1/3/1.png" class="floor-img"></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/loading.gif" data-src="../img/floor/1/3/1.png" class="floor-img"></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/tab2.js"></script>
</body>
</html>

base.css https://www.cnblogs.com/chenyingying0/p/12363689.html

tab2.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:233px;
    }
    .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

tab2.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);

 

标签
jquery事件
floor
margin
tab
jquery
fl
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!