下拉菜单的jquery组件封装

首先晒出封装好的dropdown.js

(function($){
    'use strict';//使用严格模式

    构造函数形式
     Dropdown(elem,options){
        保存到this中才能公用
        this.elem=elem;
        this.options=options;
        this.timer=null;
        this.list=this.elem.find(".dropdown-list");下拉列表是需要动画的部分
        this.activeClass=options.active+"-active";

        this._init();初始化
    }
    Dropdown.defaults={
        event:"hover",还有click
        css3:false,js:默认无延迟
        active:"dropdown"
    };
    约定俗称：内部使用的可以以_开头
    Dropdown.prototype._init=(){
        var self=this指定动画模式
        this.list.showHide(.options);
    
        绑定事件
        this.list.on("show shown hide hidden",1)">(e){
            console.log(e.type);
            消息转发
            self.elem.trigger("dropdown-"+e.type);触发事件
        });
        if(this.options.event==="click"){    

            this.elem.click((e){
                self.show();
                e.stopPropagation();阻止冒泡，否则点击下拉时也会冒泡到document，导致显示后立刻隐藏的效果
            });
            点击空白处消失
            $(document).click($.proxy(this.hide,1)">));

        }else{容错机制，写错默认也是hover
            this.elem.hover($.proxy(this.show,1)">this),$.proxy());
        }            
    };
    Dropdown.prototype.show=.options.delay){
            如果有延迟
            this.timer=setTimeout((){
                _show();
            },.options.delay);
        }else{
            没有延迟
            _show();
        }
         _show(){
            self.elem.addClass(self.activeClass);
            self.list.showHide("show");show
        }
        
    }
    Dropdown.prototype.hide=.options.delay){
            clearTimeout(.timer);
        }
        this.elem.removeClass(.activeClass);
        this.list.showHide("hide");    }

    插件形式
    $.fn.extend({
        dropdown:(opt){
            return this.each((){
                var ui=$();
                var dropdown=ui.data("dropdown"opt是参数对象
                var options=$.extend({},Dropdown.defaults,ui.data(),1)">typeof opt==="object"&&opt);
                
                单例：一个DOM元素对应一个实例，如果已经存在则不需要反复实例化
                if(!dropdown){
                    dropdown=new Dropdown(ui,options);
                    ui.data("dropdown"opt是show或者hide
                typeof dropdown[opt]==="function"){
                    dropdown[opt]();
                }
            });
        }
    });

})(jQuery);
为了防止$符发生冲突，将jQuery作为参数传入，则$符作为内部变量，不会发生冲突

使用方法：

在页面中引入base.css https://www.cnblogs.com/chenyingying0/p/12363689.html

transition.js https://www.cnblogs.com/chenyingying0/p/12363649.html

showhide.js https://www.cnblogs.com/chenyingying0/p/12363707.html

dropdown.js （上面刚贴的）

然后上代码：

<!DOCTYPE html>
<html lang="en"head>
    meta charset="UTF-8"title>dropdown</link rel="stylesheet" href="../css/base.css"style>
        /*分离出dropdown公共样式*/
        .dropdown{
            position: relative;
        }
        .dropdown-toggle;
            z-index2
        .dropdown-arrow
            display inline-block
            vertical-align middle
            background-repeat no-repeat
        .dropdown-list none absolute1
        .dropdown-left
            left0
            rightauto
        .dropdown-right}
        分离出nav的dropdown独有样式
        .menu .dropdown-toggle block
            padding0 16px 0 12px
            border-right1px solid #f3f5f7
            border-left
        .menu .dropdown-arrow
            margin-left8px
        .menu .dropdown-list
            border1px solid #cdd0d4
            background-color #fff
            top100%
            overflowhidden避免容器还没显示时，文字提前显示*/
        
        .menu-item
            height30px
            line-height0 12px
            white-space nowrap鼠标移入
        .menu-item:hover #f3f5f7
        .menu-active .dropdown-toggle
            color#f01414#fff
            border-color#cdd0d4

        @font-face 
          font-family "iconfont"
          src url('../font/iconfont.eot?t=1582272973653');  IE9  url('../font/iconfont.eot?t=1582272973653#iefix') format('embedded-opentype'), IE6-IE8 
          url('data:application/x-font-woff2charset=utf-8;base64,d09GMgABAAAAAAMgAAsAAAAABxAAAALRAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqBbIFbATYCJAMMCwgABCAFhG0HQRssBsgekiSCCCFEuNlXEQBAPHzt93ru7n5ElURBCR2BR5Bliy51gKpGVNYCG9XxbMSbd+4zPSCMOgTu9Sct57/89MAB8gDg+U2hMJtwk9PLaOlpn+dyehPoQO6qb1lua9nY4/lRL8A4oEDHGrQICiQgT0F2R6CWvJtA25Ik3NGapi7gonAGBeKOLPLApRRRFCnfFOotM4t4zVEzPUnf8Cr+fvy3M1xIapkz8vi1agso+zX5VZFnqjVDIUG9nAvSPDI2AwpxtTVznr2QOHttk0N/eV0R0lLxqiJWmZb6Qf94iahzartgPc0mfvn7coJfFXdIIIM6Co4BTlN2+u4sWkuugcK7XzPWn03hfqHrBFzKHnD9N/PZ4F7P9ffhg8fc2Vs3r7PmkLOEZ8HuotvxoydrARZ8tPZoJtANHTbfLfNt8m1kb0r92n/hum2PejfY0bcssN9up2U/iqlrDF15exnd72H3eLIT35f1BRwJ/n/uTXKjpdzjBd/wyYYk987lMN+Ix9xY6SQYA1D9yB9yEQDktVT2m3/jYS3h8+ig6F+zU8BP8933OFL9KHBL8yaMMVH5U9VgQzG1jjUXXeWrbF+2/QZdCVrXRsUJjP2ZbpnBtYSmWY6kYRFZ0zJZ2M2o6diNuqYDaNukdn7HBGUvSgsbLRKEoZdI+j4jG/pOFvY3aub+om4Y9mg7G/4rdqyG7FZJEc+QBY5PQ1kgBvbszC2p70CiqfG0qI35HkRtchymp6RV87XIQHSJMbYJMYMxDDElOqwh+yFNI9BKiYIEliIxZi1ITcVtD0oRiA7cHEEhPAaxgMZNg2QCwoDD1oxb7fMdEJFJw6M9ooZiD4SykTuH0qVIA8hakwGJHuUemwmiDAyDQRhF6KAa0g3RaAjI2t5NgQiYFNKElFWBVLcZRk0p21v0/9sGbc7KOVLkKJrXiTlpChLymJJ5jVeCMoMREwAAAAA=') format('woff2'),url('../font/iconfont.woff?t=1582272973653') format('woff'),url('../font/iconfont.ttf?t=1582272973653') format('truetype'),1)"> chrome,firefox,opera,Safari,Android,iOS 4.2+ 
          url('../font/iconfont.svg?t=1582272973653#iconfont') format('svg');  iOS 4.1- 

        .iconfont  "iconfont" !important
          font-size 14px
          font-style normali标签自带斜体效果
          -webkit-font-smoothing antialiased在webkit内核和火狐浏览器中，抗锯齿
          -moz-osx-font-smoothing grayscale

        [class*="-active"] .dropdown-arrow
            -webkit-transformrotate(180deg)
            -moz-transform
            -ms-transform
            -o-transform
            transform提取出过渡样式，可公用
        .transition
            -webkit-transitionall .5s
            -moz-transition
            -ms-transition
            -o-transition
            transitionshowhide组件的样式
        .fadeOut
            opacity 0
            visibility hidden收缩样式
        .slideUpDownCollapse0 !important避免因为优先级不够而无法生效
            padding-top
            padding-bottom
        .slideLeftRightCollapse
            width
            padding-left
            padding-right
        .dropdown-loading32px
            backgroundurl(../img/loading.gif) no-repeat
            margin20px}
    body<!-- 用data-load来确定数据源 -->
    div class="menu dropdown fl" data-active="menu" data-load="dropdown.json">
        a href="javascript:;" class="dropdown-toggle">我的慕淘i ="dropdown-arrow iconfont transition">&#xe642;i></aul ="dropdown-list dropdown-left">
            li ="dropdown-loading"liuldiv="menu"="menu-item"><="#">已买到的宝贝>我的足迹>

    button ="show-btn">点我显示button="hide-btn">点我隐藏script src="../js/jquery.js"script="../js/transition.js"="../js/showhide.js"="../js/dropdown.js"//绑定事件 显示之前加载数据
        $(".dropdown).on(dropdown-showfunction(e){

            var ui=$(this);
             dataLoadui.data(load);

            if(!dataLoad) return;

            只请求一次即可
            loaded)){

                 listui.find(.dropdown-list);
                 html"";

                $.getJSON(文件,回调) jquery封装的获取json数据的方法
                setTimeout((){
                    $.getJSON(dataLoad,1)">(data){
                        console.log(data);
                        for i;i<data.length;i++){
                            console.log(data[i]);
                            html+='<li class="menu-item"><a href="+data[i][url]">name</a></li>;
                        }
                        console.log(html);    
                        list.html(html);    
                        ui.data(true);

                    });                
                },1)">500);模拟线上延迟                
            }
            
        });

        指定参数
).dropdown({
            event:hoverslideUpDown
        });

        通过按钮也可以控制下拉菜单的显示隐藏
.show-btnclick(){
            $().dropdown(show);
        });
        $(.hide-btnhide);
        });
    html>

这块区域是按需加载的过程，设置的是页面第一次加载时，下拉菜单的项没有加载

等到用户将鼠标移入时，通过ajax请求获取数据加载进来

这是dropdown.json数据的结构：

[
    {
        "url":"#"
    },{
        "url":"#"
    }
]

效果图

下拉菜单的jquery组件封装

相关文章