开发一个jQuery插件——多级联动菜单,jquery插件联动

付出贰个jQuery插件——多级联合浮动菜单,jquery插件联合浮动

引言

支出中,有众多地点用到联合浮动菜单,从前每一趟蒙受联合浮动菜单的时候都去重新写,代码重用率十分的低,前日又凌驾联合浮动菜单的标题,总括了下,开掘能够付出二个联合浮动菜单的意义,未来想用的时候就方便多了。项目中每一个页面都有引用jQuery,,开垦个jQuery联合浮动菜单插件,说入手就入手,上边跟我们分享分享。

自己用的jQuery插件格局

(function($){
    $.fn.casmenu=function(argvs){
         //your code
    }
})(jQuery);

当中jQuery传入的是jquery对象,供给在扩张从前援用。在扩张中相仿接纳jQuery的短格式$。

$.fn是指jquery的命名空间,加在fn上的主意及品质,会对jquery实例每一个有效,看看上面包车型地铁jquery源码101行左右:

jQuery.fn = jQuery.prototype = {
    ......
}

诸如前边要开采的$.fn.casmenu(),定义之后,在背后的jquery对象都足以行使该办法。

那边还只怕有风华正茂种扩张的点子:

$.extend({
    funName: function(){
        //your code
   },
});

这种扩大方法和方面包车型大巴是有分其他,假若拿类做类比的话,$.extend这种艺术相当于类中的静态方法,上面包车型地铁大器晚成种方式相当于非静态方法,必得有目的才干够使用。轻便的驾驭,是下面那样的:

//$.fn.casemenu 方式扩展的方法,必须在有jquery对象的时候才可以使用
$("#mydiv").casmenu();

//$.extend({}) 方式扩展的方法,可以直接使用
$.add(2,3);

布署思路

第一是层级菜单的数码保存方法,看看上面的数额:

var levels={
    //内容中有引号,必须使用单引号,外引号必须用双引号
    //name => value
    1:{
        退出应用: "code1003",
        登录界面:"code1004",
        跳转至个人资料界面:"code1005",
    },
    2:{
        退出应用:{
            应用1:"gameid1",
            应用2:"gameid2",
            应用3:"gameid3",
            应用4:"gameid4",
            应用5:"gameid5",            
        },
        跳转至个人资料界面:{
            主界面:"main interface",
        }
    },
    3:{
        应用1:{
            中级场:"12",
            高级场:"13",
            职业场:"14",
            比赛场:"15",
        }
    }
}

对象levels中的直接键值1、2、3表示菜单的层级,未有就毫无些,每大器晚成项name=>value代表select中option的称谓和value。

层级有规律,某风华正茂层级中的某生机勃勃项借使有下一流菜单,在下豆蔻年华层及有该项的称呼,就好像levels[1]['退出应用']在有下级菜单,就有levels[2]['退出应用'],假如继续有下级菜单,好似levels[2]['退出应用']['应用1'],会在下风华正茂层及中延续有levels[3]['应用1']。那样一来,就贯彻了Infiniti级联动菜单,不一样的联合浮动菜单只要求纠正菜单配置文件就能够了。

可是这么做又有一个可惜,正是假使level2[2]中的子项有八个称呼大器晚成致的,都有下级菜单,并且下级菜单内容还不平等,就能够有标题,因而在安装的时候,有下级菜单的项要取分化的称号,这里要留神下。就近年来这种来讲,轻松,好通晓,也够用了。

代码完结

在代码中也接收了$.extend,用来扩Mo Zhang认配置。

再有一个点要专心,在联合浮动的时候会将现实的美食指南值纳入六特性情为hidden的input中,用暗中同意逗号分割每一种层级之间的值,能够非常轻易的取得到联合浮动菜单全体项的值

if(typeof(AI.opts.saveinput) != "undefined" && (AI.opts.saveinput = AI.opts.saveinput.toString()) != ''){
            $("<input type='hidden' value='' name='"+AI.opts.saveinput+"' id='"+AI.opts.saveinput+"' />").appendTo($('body'));
        }

(function($){
    //配置
    var AI={
        opts:{
            saveinput:"jumpcode", //是否将结果保存至input
            levels:{},
            ulObj:{},//保存生成好的ul列表
            length:0, //层级菜单的层级
            divide:",",//默认各个层级菜单之间的分隔符
        }
    };

    $.fn.casmenu=function(opts){
        AI.opts = $.extend(AI.opts, opts);

        if((AI.opts.length = Object.keys(AI.opts.levels).length) <= 0){
            throw "levels arr must not be empty";
            return;
        }

        var _levels = AI.opts.levels;
        if(_levels[1] == undefined){
            throw "menu level 1 must not be empty";
            return;
        }
        var _levels_1 = _levels[1];

        if(typeof(AI.opts.saveinput) != "undefined" && (AI.opts.saveinput = AI.opts.saveinput.toString()) != ''){
            $("<input type='hidden' value='' name='"+AI.opts.saveinput+"' id='"+AI.opts.saveinput+"' />").appendTo($('body'));
        }

        AI.opts.ulObj['level_1'] = '<select class="casmenu" level="1">';
        AI.opts.ulObj['level_1'] += '<option value="null">请选择</option>';
        $("#"+AI.opts.saveinput).val('null');
        for(var i in _levels_1){
            AI.opts.ulObj['level_1'] += '<option name="'+i+'" value="'+_levels_1[i]+'">'+i+'</option>';
        }
        AI.opts.ulObj['level_1'] += '</select>';

        $(AI.opts.ulObj['level_1']).appendTo(this);

        $("body").on("change", ".casmenu", function(){
            var level = $(this).attr("level");
            if(level > AI.opts.length) return;
            level++;
            //移除当前触发菜单之后的菜单
            for(var num=level;num<=AI.opts.length;num++){
                $(".casmenu[level="+num+"]").remove();
            }

            //设置input的值,级联菜单的值
            var _val = '';
            for(var val=1;val<=AI.opts.length;val++){
                var __val = $("select[level="+val+"]");
                if(__val.length <= 0)
                    continue;

                _val += __val.val()+AI.opts.divide;
            }
            $("#"+AI.opts.saveinput).val(_val.substr(0, _val.length-1));

            //levels对象中不存在下一级别目录
            if(typeof(AI.opts.levels[level]) == "undefined") return;

            //获取下一级别目录的键值,值不存在的话返回
            var name = $(this).find("option:selected").attr("name");
            if(typeof(AI.opts.levels[level][name]) == "undefined") return;

            if(typeof(AI.opts.ulObj['level_'+level]) == "undefined" || typeof(AI.opts.ulObj['level_'+level][name]) == "undefined"){
                if(typeof(AI.opts.ulObj['level_'+level]) == "undefined")
                    AI.opts.ulObj['level_'+level] = {};

                AI.opts.ulObj['level_'+level][name] = '<select class="casmenu" level="'+level+'">';
                AI.opts.ulObj['level_'+level][name] += '<option value="null">请选择</option>';
                var levelinfo = AI.opts.levels[level][name];
                for(var i in levelinfo){
                    AI.opts.ulObj['level_'+level][name] += '<option name="'+i+'" value="'+levelinfo[i]+'" >'+i+'</option>';
                }
                AI.opts.ulObj['level_'+level][name] += '</select>';
            }
            $(AI.opts.ulObj['level_'+level][name]).appendTo($(this).parent());
            var _val = '';
            for(var val=1;val<=AI.opts.length;val++){
                var __val = $("select[level="+val+"]");
                if(__val.length <= 0)
                    continue;

                _val += __val.val()+AI.opts.divide;
            }
            $("#"+AI.opts.saveinput).val(_val.substr(0, _val.length-1));
        });
    }
})(jQuery);

效果

上边看看效果

本文版权归小编iforever([email protected])全体,未经笔者本人同意幸免其余情势的转发,转发小说之后必需在随笔页面明显地方给出作者和原著连接,不然保留追究法律权利的职责。

引言 开垦中,有那个地点用到联合浮动菜单,以前每一回境遇联合浮动菜单的时候都去重新写,...

本文由新浦京娱乐站_新浦京娱乐场官网_新浦京娱乐发布于技术创新,转载请注明出处:开发一个jQuery插件——多级联动菜单,jquery插件联动

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。