码迷，mamicode.com
首页 > Web开发 > 详细

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

时间：2020-02-29 20:31:39      阅读：93      评论：0      收藏：0      [点我收藏+]

标签：存在   dex   ext   no-repeat   触发事件   isp   data   装箱   注册   

效果图

技术图片

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封装的tab组件（可选自动+可选延迟处理+按需加载）

标签：存在   dex   ext   no-repeat   触发事件   isp   data   装箱   注册   

原文地址：https://www.cnblogs.com/chenyingying0/p/12384972.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！