Develop a jQuery Plugin-multi-level linkage menu and jquery plugin Linkage

Develop a jQuery Plugin-multi-level linkage menu and jquery plugin Linkage
Introduction

In development, there are many areas where the linkage menu is used. In the past, I used to re-write the linkage menu every time, and the code reuse rate was very low. I encountered the linkage menu problem a few days ago, you can develop a function for linking menus, which is more convenient to use later. Every page in the project references jQuery and develops a jQuery linkage menu plug-in. I will share it with you.

My jQuery plug-in method

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

JQuery imports jquery objects and must be referenced before extension. JQuery short format $ is also used in expansion.

$. Fn refers to the namespace of jquery. The methods and attributes added to fn are valid for each jquery instance. See the following jquery source code line 101:

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

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

There is also an extension method:

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

This extension method is different from the above one. If you use classes for analogy, $. extend is equivalent to a static method in the class. The above method is equivalent to a non-static method and can only be used if an object is required. A simple understanding is as follows:

// $. Fn. the casemenu extension method can be used only when there is a jquery object $ ("# mydiv "). casmenu (); // $. extend ({}) method, you can directly use $. add (2, 3 );

Design Concept

The first is the data storage method of the hierarchical menu. Let's take a look at the following data:

Var levels = {// The content contains quotation marks, which must be single quotation marks and double quotation marks. // name => value 1: {exit application: "code1003". logon interface: "code1004", jump to the Personal Data Page: "code1005" ,}, 2 :{ exit application: {Application 1: "gameid1", Application 2: "gameid2", application 3: "gameid3", application 4: "gameid4", application 5: "gameid5",}, go to the profile page: {main interface: "main interface", }}, 3: {Application 1: {Intermediate field: "12", advanced field: "13", professional field: "14", competition field: "15 ",}}}

The direct key values 1, 2, and 3 in the levels object represent the menu level. If no key value exists, it is unnecessary. Each name => value indicates the option name and value in the select statement.

The level is regular. a certain item in a level has a lower menu, and the next menu has the name of the item, just like levels [1] ['exit application'] has a lower menu, levels [2] ['exit application']. If there is a lower-level menu, it is like levels [2] ['exit application'] ['application 1']. levels [3] ['application 1'] will continue at the next layer and in the middle. In this way, you can implement unlimited levels of linkage menus. You only need to modify the menu configuration file for different linkage menus.

However, if two sub-items in level2 [2] have the same name and have sub-menus, and the sub-menus have different content, the problem may occur, therefore, different names must be obtained for items with lower-level menus. For the moment, it is simple, easy to understand, and enough.

Code Implementation

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

Note that the menu value of the actual task will be put into the input with the property "hidden" during Association, and the value between each level will be separated by commas by default, you can easily obtain the values of all items in the linkage menu.

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 ($) {// configure var AI = {opts: {saveinput: "jumpcode", // whether to save the result to input levels :{}, ulObj :{}, // Save the generated ul list length: 0, // level divide: ",", // default delimiter between menus of each level}; $. 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 = 'den den '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"> select </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 input value. The cascading menu value 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 levels object does not contain the directory if (typeof (AI. opts. levels [level]) = "undefined") return; // obtain the key value of the next level directory. If the value does not exist, 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"> select </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

Next let's take a look at the effect

The copyright of this article is owned by the author iforever (luluyrt@163.com), without the author's consent to prohibit any form of reprint, repost the article must be in the obvious position on the article page to give the author and the original connection, otherwise, you are entitled to pursue legal liability.