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

效果图

tab2.html

<!DOCTYPE html>
<html lang="zh-CN"><!-- 设置简体中文 -->
head>
    meta charset="UTF-8"title>tab2按需加载</link rel="stylesheet" href="../css/base.css"="../css/tab2.css" css一般放在DOM加载前，防止DOM裸奔 body 楼层一 -->
    div class="floor">
        ="container">
            ="tab-head">
                ="tab-head-title fl">
                    span ="tab-head-title-num">1Fspan><="tab-head-title-name">服装箱包divul ="tab-head-item-wrap fr"li ="fl"a href="javascript:;" class="tab-head-item tab-head-item-active">大牌a></li="fl tab-head-item-divider text-hidden">分割线="tab-head-item">男装>女装ul="tab-body"="tab-body-panel"="tab-body-panel-item fl">
                        p ="tab-body-panel-item-pic"="#"="link"img src="../img/floor/loading.gif" data-src="../img/floor/1/1/1.png"="floor-img"p="tab-body-panel-item-name">匡威男棒球开衫外套2020="tab-body-panel-item-price">￥479="../img/floor/1/2/1.png"="../img/floor/1/3/1.png"script ="../js/jquery.js"script="../js/transition.js"="../js/showhide.js"="../js/tab2.js"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{#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{
        padding-left:
        padding-right:0 !important;
    }

floor楼层区域
    .floor{
        margin-top:7px;
    }
    .tab-head{68px;
        border-bottom:1px solid #f01414;
    }
    .tab-head-title{22px;
    }
    .tab-head-title-num{
        display: inline-block;24px;
        border-radius:50%;
        background-color:#07111b;#fff;
        text-align: center;
        line-height:
        margin-right:10px;
    }
    .tab-head-title-name{
        font-size:20px;
        position: relative;
        top:3px;
    }
    .tab-head-item-wrap{8px;62px;62px;
    }
    .tab-head-item{14px;    
        color:#93999f;16px;
    }
    .tab-head-item-active{#f01414;
        background:url(../img/floor-arrow.png) center bottom no-repeat;
    }
    .tab-head-item-divider{1px;#d9dde1;21px;
    .tab-body{233px;
    }
    .tab-body-panel{466px; none;
    }
    .tab-body-panel-item{200px;233px; center;
    }
    .tab-body-panel-item:hover{
        box-shadow:0 0 10px rgba(0,.2);
    }
    .tab-body-panel-item-pic{24px;
    }
    .tab-body-panel-item-name{23px;12px;#07111b;
    }
    .tab-body-panel-item-price{9px;#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";

     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:0是否延迟
    };

    Tab.prototype._init=(){
        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",1)">(e){
            self.elem.trigger("tab-"+e.type,[e.type,self.panels.index(this),1)">]);
            传递的参数：事件类型 触发事件的索引，触发事件的元素
        })

        showHide init
        this.panels.showHide(.options);

        bind event
        this.options.event=this.options.event==="click"?"click":"mouseenter"事件代理，替被点击的tab项做代理
        this.elem.on(this.options.event,".tab-head-item",1)">(){
            var elem=this;elem指向被点击的那个.tab-head-item

            if(self.options.delay){delay
                clearTimeout(timer);先清除之前的定时器
                timer=setTimeout((){
                    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(.options.interval))){
            this.elem.hover($.proxy(this.pause,$.proxy(this.auto,1)">));
            .auto();
        }
    }

    获取合理的索引
    Tab.prototype._getIdx=(index){
        if(isNaN(Number(index))) return 0if(Number(index)<0) return this.tabNum-1if(Number(index)>this.tabNum-1) return index;
    }

    切换面板
    Tab.prototype.toggle=this.curIdx===index) this.curIdx).removeClass("tab-head-item-active"this.items.eq(index).addClass("tab-head-item-active");

        this.curIdx).showHide("hide"this.panels.eq(index).showHide("show"index;
    }

    自动切换
    Tab.prototype.auto=this.timer=setInterval((){
            self.toggle(self._getIdx(self.curIdx+1));
        },self.options.interval);    
    }
    停止
    Tab.prototype.pause=(){
        clearInterval(.timer);    
    }

    注册插件，相当于对外暴露接口
    $.fn.extend({
        Tab:(opt){
            return this可以返回对象，方便连写
            this.each((){
                var ui=$();
                var tab=ui.data("tab"opt是参数对象
                var options=$.extend({},Tab.defaults,ui.data(),1)">typeof opt==="object"&&opt);
                
                单例：一个DOM元素对应一个实例，如果已经存在则不需要反复实例化
                if(!tab){
                    tab=new Tab(ui,options);
                    ui.data("tab"opt是show或者hide
                typeof tab[opt]==="function"){
                    Tab[opt]();
                }
            });
        }
    });


    调用tab插件
    var floor=$(".floor");

    floor.on("tab-show tab-shown tab-hide tab-hidden",1)">(e,type,index,elem){
        根据自己需求来写
        console.log(type);
        console.log(index);
        console.log(elem);
    })

    floor.Tab({
        event:"mouseenter",interval:500    });

})(jQuery);

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

相关文章