当前位置：移动技术网 > IT编程>开发语言>Jquery > 下拉菜单的jquery组件封装

下拉菜单的jquery组件封装

2020年03月09日 | 移动技术网IT编程 | 我要评论

二套房贷政策,不知北山向南,醉长生

首先晒出封装好的dropdown.js

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

    //构造函数形式
    function 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:false,
        animation:"fade",
        delay:0,//默认无延迟
        active:"dropdown"
    };
    //约定俗称：内部使用的可以以_开头
    dropdown.prototype._init=function(){
        var self=this;

        //指定动画模式
        this.list.showhide(this.options);
    
        //绑定事件
        this.list.on("show shown hide hidden",function(e){
            //console.log(e.type);
            //消息转发
            self.elem.trigger("dropdown-"+e.type);//触发事件
        });
        if(this.options.event==="click"){    

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

        }else{//容错机制，写错默认也是hover
            this.elem.hover($.proxy(this.show,this),$.proxy(this.hide,this));
        }            
    };
    dropdown.prototype.show=function(){
        var self=this;
        if(this.options.delay){
            //如果有延迟
            this.timer=settimeout(function(){
                _show();
            },this.options.delay);
        }else{
            //没有延迟
            _show();
        }
        function _show(){
            self.elem.addclass(self.activeclass);
            self.list.showhide("show");//show
        }
        
    }
    dropdown.prototype.hide=function(){
        if(this.options.delay){
            cleartimeout(this.timer);
        }
        this.elem.removeclass(this.activeclass);
        this.list.showhide("hide");//show
    }

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

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

使用方法：

在页面中引入base.css

transition.js

showhide.js

dropdown.js （上面刚贴的）

然后上代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>dropdown</title>
    <link rel="stylesheet" href="../css/base.css">
    <style>
        /*分离出dropdown公共样式*/
        .dropdown{
            position: relative;
        }
        .dropdown-toggle{
            position: relative;
            z-index:2;
        }
        .dropdown-arrow{
            display: inline-block;
            vertical-align: middle;
            background-repeat: no-repeat;
        }
        .dropdown-list{
            display: none;
            position: absolute;
            z-index:1;
        }
        .dropdown-left{
            left:0;
            right:auto;
        }
        .dropdown-right{
            right:0;
            left:auto;
        }
        /*分离出nav的dropdown独有样式*/
        .menu .dropdown-toggle{
            display: block;
            padding:0 16px 0 12px;
            border-right:1px solid #f3f5f7;
            border-left:1px solid #f3f5f7;
        }
        .menu .dropdown-arrow{
            margin-left:8px;
            vertical-align: middle;
        }
        .menu .dropdown-list{
            border:1px solid #cdd0d4;
            background-color: #fff;
            top:100%;
            overflow:hidden;/*避免容器还没显示时，文字提前显示*/
        }
        .menu-item{
            height:30px;
            line-height:30px;
            padding:0 12px;
            white-space: nowrap;
        }
        /*鼠标移入*/
        .menu-item:hover{
            background-color: #f3f5f7;
        }
        .menu-active .dropdown-toggle{
            color:#f01414;
            background-color:#fff;
            border-color:#cdd0d4;
        }

        @font-face {
          font-family: "iconfont";
          src: url('../font/iconfont.eot?t=1582272973653'); /* ie9 */
          src: url('../font/iconfont.eot?t=1582272973653#iefix') format('embedded-opentype'), /* ie6-ie8 */
          url('data:application/x-font-woff2;charset=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'), /* chrome, firefox, opera, safari, android, ios 4.2+ */
          url('../font/iconfont.svg?t=1582272973653#iconfont') format('svg'); /* ios 4.1- */
        }

        .iconfont {
          font-family: "iconfont" !important;
          font-size: 14px;
          font-style: normal;/*i标签自带斜体效果*/
          -webkit-font-smoothing: antialiased;/*在webkit内核和火狐浏览器中，抗锯齿*/
          -moz-osx-font-smoothing: grayscale;
        }

        [class*="-active"] .dropdown-arrow{
            -webkit-transform:rotate(180deg);
            -moz-transform:rotate(180deg);
            -ms-transform:rotate(180deg);
            -o-transform:rotate(180deg);
            transform:rotate(180deg);
        }
        /*提取出过渡样式，可公用*/
        .transition{
            -webkit-transition:all .5s;
            -moz-transition:all .5s;
            -ms-transition:all .5s;
            -o-transition:all .5s;
            transition:all .5s;
        }
        /*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;
        }
        .dropdown-loading{
            width:32px;
            height:32px;
            background:url(../img/loading.gif) no-repeat;
            margin:20px;
        }
    </style>
</head>
<body>
    <!-- 用data-load来确定数据源 -->
    <div class="menu dropdown fl" data-active="menu" data-load="dropdown.json">
        <a href="javascript:;" class="dropdown-toggle">我的慕淘<i class="dropdown-arrow iconfont transition">&#xe642;</i></a>
        <ul class="dropdown-list dropdown-left">
            <li class="dropdown-loading"></li>
        </ul>
    </div>
    <div class="menu dropdown fl" data-active="menu">
        <a href="javascript:;" class="dropdown-toggle">我的慕淘<i class="dropdown-arrow iconfont transition">&#xe642;</i></a>
        <ul class="dropdown-list dropdown-left">
            <li class="menu-item"><a href="#">已买到的宝贝</a></li>
            <li class="menu-item"><a href="#">我的足迹</a></li>
        </ul>
    </div>

    <button class="show-btn">点我显示</button>
    <button class="hide-btn">点我隐藏</button>

    <script src="../js/jquery.js"></script>
    <script src="../js/transition.js"></script>
    <script src="../js/showhide.js"></script>
    <script src="../js/dropdown.js"></script>
    <script>
        //绑定事件 显示之前加载数据
        $(".dropdown").on("dropdown-show",function(e){

            var ui=$(this);
            var dataload=ui.data("load");

            if(!dataload) return;

            //只请求一次即可
            if(!ui.data("loaded")){

                var list=ui.find(".dropdown-list");
                var html="";

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

                    });                
                },500);//模拟线上延迟                
            }
            
        });

        //指定参数
        $(".dropdown").dropdown({
            event:"hover",
            css3:true,
            js:true,
            animation:"slideupdown"
        });

        //通过按钮也可以控制下拉菜单的显示隐藏
        $(".show-btn").on("click",function(){
            $(".dropdown").dropdown("show");
        });
        $(".hide-btn").on("click",function(){
            $(".dropdown").dropdown("hide");
        });
    </script>
</body>
</html>

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

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

这是dropdown.json数据的结构：

[
    {
        "url":"#",
        "name":"已买到的宝贝"
    },
    {
        "url":"#",
        "name":"我的足迹"
    },
    {
        "url":"#",
        "name":"我的优惠券"
    }
]