Develop a jquery plugin-multi-level linkage menu

Introduction

Development, there are many places to use the Linkage menu, before each encounter linkage menu time to re-write, code reuse rate is very low, a few days ago encountered the problem of linkage menu, summed up the next, found can develop a linkage menu function, later want to use the time is more convenient. Each page in the project has a reference to jquery, the development of a jquery linkage menu plugin, say hands-on, the following share with you.

I used the jquery plugin method

(function($) {    $.fn.casmenu=function(Argvs) {         //your Code    }}) (JQuery);

Where jquery is a jquery object, it needs to be referenced before the extension. The short format of jquery is also used in the extension $.

$.fn refers to the jquery namespace, the methods and properties added on the FN, will be valid for each jquery instance, see the following jquery source 101 lines or so:

Jquery.fn = Jquery.prototype = {    ...}

For example, $.fn.casmenu (), which is to be developed later, can be used by jquery objects later in the definition.

There is also a way to extend this:

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

This extension method and the above is a difference, if the analogy with the class, $.extend this method is equivalent to the static method in the class, one of the above is equivalent to a non-static method, must have an object to be used. The simple understanding is the following:

// The way to extend the $.fn.casemenu method is to use $ ("#mydiv") when there are jquery objects . Casmenu (); // $.extend ({}) way to extend the method, you can directly use $.add (2,3);

Design ideas

The first is how to save the data in the Hierarchy menu, and look at the following data:

varlevels={    //quoted in the content, must use single quotation marks, the exit must be enclosed in double quotation marks    //name = value1: {Exit app:"Code1003", Login interface:"Code1004", jump to profile interface:"Code1005",    },    2: {Exit app: {App 1:"Gameid1", application 2:"Gameid2", application 3:"Gameid3", application 4:"Gameid4", application 5:"GAMEID5",}, jump to profile interface: {Main interface:"Main Interface",        }    },    3: {Apply 1:{intermediate field:"12", superior field:"13", career field:"14", than the game:"15",        }    }}

The direct key values in object levels 1, 2, and 3 represent the level of the menu, no more, and each name=>value represents the name and value of option in select.

The hierarchy is regular, a certain level of the item if there is a next level menu, the next level and the name of the item, like levels[1][' exit application ' , there is a sub-menu, there is a levels[2][' exit application ', if you continue to have a sub-menu, Just like levels[2][' exit application ' [' Application 1 '], it will continue to have levels[3][' Application 1 ' in the next layer and in. in this way, the implementation of the infinite level linkage menu, the different linkage menu only need to modify the menu configuration file.

But there is a regret to do so, that is, if the child in the level2[2] has two names of the same, there are sub-menu, and the content of the subordinate menu is not the same, there is a problem, so in the setting, there are sub-menu items to take a different name, here to pay attention. For the time being, simple, good understanding, and enough.

Code implementation

$.extend is also used in the code to extend the default configuration.

There is one more point to note, in the linkage will be the real menu value into a property of hidden input, with the default comma to separate the values between each level, it is easy to get to the linkage menu all the items of the value

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($){    //Configuration    varAi={opts:{saveinput:"Jumpcode",//whether to save the results to inputlevels:{}, ulobj:{},//Save the generated UL listlength:0,//Hierarchy of hierarchy menusDivide: ",",//default delimiter between different levels of menus        }    }; $.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 being empty"; return; }        var_levels =AI.opts.levels; if(_levels[1] = =undefined) {            Throw"Menu Level 1 must isn't 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 ' > Please select </option> '; $("#" +ai.opts.saveinput). Val (' null ');  for(varIinch_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(){            varLevel = $ ( This). attr ("Level"); if(Level > AI.opts.length)return; level++; //Remove the menu after the current trigger menu             for(varnum=level;num<=ai.opts.length;num++){                $(". Casmenu[level=" +num+ "]"). Remove (); }            //sets the value of input, the value of the cascading menu            var_val = ' ';  for(varval=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)); //the next level directory does not exist in the Levels object            if(typeof(Ai.opts.levels[level]) = = "undefined")return; //gets the key value of the next level directory, and returns if the value does not exist            varName = $ ( 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 ' > Please select </option> '; varLevelinfo =Ai.opts.levels[level][name];  for(varIinchlevelinfo) {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(varval=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);

Effect

Here's a look at the effect

Example: http://aizuyan.github.io/casmenu.html

I put the full code on GitHub: Https://github.com/aizuyan/jquery.plugin

The copyright belongs to the author Iforever ([email protected]) all, without the author's consent to prohibit any form of reprint, reproduced article must be in the article page obvious location to the author and the original text connection, otherwise reserve the right to pursue legal responsibility.

Develop a jquery plugin-multi-level linkage menu