jquery Plug-in--Multilevel Linkage menu

Introduction

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

(function ($) {
$.fn.casmenu=function (Argvs) {
Your code
}
}) (JQuery);

jquery is a jquery object that needs to be referenced before it expands. In the extension, the short form of jquery is also used $.

$.fn refers to the jquery namespace, the methods and properties added to the FN, which are valid for each of the jquery instances, and look at the following jquery source 101 lines:

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

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

Here's another way to extend it:

$.extend ({
Funname:function () {
Your code
},
});

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

The way to extend the $.fn.casemenu method must be available when there is a jquery object
$ ("#mydiv"). Casmenu ();

$.extend ({}) way to extend the method, you can directly use the
$.add (2,3);

Design ideas

The first is the Hierarchy menu data preservation way, look at the following data:



var levels={
There are quotes in the content, you must use single quotes, the external number must be in double quotes
Name => value
1:{
Exit application: "Code1003",
Login interface: "code1004",
Jump to personal Data interface: "Code1005",
},
2:{
Exit Application: {
Application 1: "Gameid1",
Application 2: "Gameid2",
Application 3: "Gameid3",
Application 4: "Gameid4",
Application 5: "Gameid5",
},
Jump to personal Data interface: {
Main interface: "Main Interface",
}
},
3:{
Application 1:{
Intermediate field: "12",
Advanced field: "13",
Occupational field: "14",
Competition field: "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.

Levels are regular, if an item in one level has a next level menu, and the next level and the name of the item, just like levels[1]["Exit application", there is a levels[2]["Exit application" if there is a subordinate menu, like levels[2]["Exit Application". [Application 1] will continue to have levels[3]["Application 1" in the next layer and below. In this way, the implementation of the infinite level linkage menu, the different linkage menu only need to modify the menu configuration file on it.

But there is another regret in doing so, that is, if the subkeys in level2[2] have two identical names, there are subordinate menus, and the contents of the subordinate menu is not the same, there will be problems, so in the setting, there are subordinate menu items to take a different name, here should be noted. So far as this is concerned, simplicity and good understanding are enough.
Code implementation

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

There is also a point to note, in the linkage will be the fact of the menu value into a property for hidden input, with the default comma to separate the values between each level, you can easily get to the linkage menu all the values of the items

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
var ai={
opts:{
Saveinput: "Jumpcode",//whether to save the results to input
levels:{},
ulobj:{},//Save build a good UL list
length:0,//Level menu level
Divide: ",",//default separator between each level menu
}
};

$.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 is not 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 choose </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++;
Remove the menu after the current trigger menu
for (Var num=level;num<=ai.opts.length;num++) {
$ (". Casmenu[level=" +num+ "]"). Remove ();
}

Set the value of input, cascading menu values
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));

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 the value if it does not exist
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 "> Please choose </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);



Effect

Let's see the effect.