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

效果图

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

原文地址:https://www.cnblogs.com/chenyingying0/p/12384926.html

时间: 2024-10-30 03:26:14

jQuery封装tab选项卡组件(自定义自动功能和延迟显示功能)的相关文章

js和jquery实现tab选项卡

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content="Create by double 2015-07-09&quo

jQuery实现Tab选项卡切换

需求: 实现Tab选项卡切换,鼠标悬浮在标签上,进行Tab页面的切换 此处使用的是jQuery1.7.js 实现代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh

利用jQuery实现Tab选项卡

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">{margin: 0px;padding: 0px;font-family: 微软雅黑;}.menu{height: 50px;background: #272822;}.menu a{display: bloc

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

效果图 tab2.html <!DOCTYPE html> <html lang="zh-CN"><!-- 设置简体中文 --> <head> <meta charset="UTF-8"> <title>tab2按需加载</title> <link rel="stylesheet" href="../css/base.css"> &

jQuery封装自定义事件--valuechange(动态的监听input,textarea)之前值,之后值的变化

jQuery封装自定义事件--valuechange(动态的监听input,textarea)之前值,之后值的变化 js监听输入框值的即时变化 网上有很多关于 onpropertychange.oninput的讲解,但是他们都不是我想要的,我想要的是动态的监听input,textarea等之前值和之后改变的值,比如像KISSY中的valuechange事件一样,当我在输入框里面开始输入1的时候,那么之前值是undefined,现在的值是1,当我接着输入2时候,那么之前的值是1,现在的值是2.等,

【技术】同页面可多次使用的jQuery tab选项卡代码

        <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>同页面可多次使用的jQuery tab选项卡代码</title><style type="text/css"> *{ margin:0; pad

tytabs.jquery.min.js实例,渐变的TAB选项卡特效

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>唐山塑钢门窗</title><script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"><

Jquery 简单的Tab选项卡特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

jquery tab选项卡

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ