jQuery封裝的tab組件（可選自動+可選延遲處理+按需加載）

時間  2020-03-06
標籤 jquery 封裝 tab 組件 可選 自動 延遲 處理 按需 加載 欄目 JQuery 简体版
原文   原文鏈接

效果圖javascript

tab2.htmlcss

<!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 http://www.javashuo.com/article/p-hddyogwd-by.htmlhtml

tab2.css java

/*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 http://www.javashuo.com/article/p-nbnfsgpd-w.htmljquery

showhide.js http://www.javashuo.com/article/p-cgnrmqkl-h.htmlcss3

tab2.jside

(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);
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程