jquery Custom plugins-parameterized Configuration Multilevel menu navigation bar Plugin

1 The necessity of customizing the menu navigation bar plugin

Looking at the diagram, here is an example of a site navigation created using the custom menu navigation bar plugin SimpleMenu:

　　

The plugin defaults to the navigation bar style, i.e. the level one or two menu is horizontal, and the level three or four menu is vertically distributed.

When using plug-ins, you can modify the default parameters , the current plug-in provides the distribution of the Settings menu: Landscape or Portrait; menu position: dependent on the position of the upper-level menu bar: position up or down.

Modify the call parameters, change the level one or two menu to portrait orientation, and change the display position of the level three menu to the right of the two level menu bar (the other is consistent with the default), and then run the effect as follows:

　　

Careful observation, you will find the above two menu navigation bar style is basically the same, only in the local adjustment. The reason for this design is that as the site grows richer, the needs of the menu navigation bar often change. The parameterized Configuration menu allows you to quickly adapt to new changes based on existing ones. Of course, this will also be for us to write plug-ins to ask more requirements and greater challenges, and always can not do a universal menu out!

2 Customizing the menu navigation bar plug-in using the jquery UI widget Library

The JQuery UI is powerful and consists of 3 parts: Interaction, Widgets (widgets), and effects libraries . Where interaction is something that interacts with the mouse, such as dragging, zooming, selecting, and sorting, and so on, the widgets are mostly extensions of programs including dialogs, calendars, progress bars, and, of course, similar menu navigation; the effect library is used to provide a rich animation effect so that animations are not limited to the Animate method.

Although the jquery UI already provides navigation-like functionality, its functionality and effectiveness are often difficult to meet the needs of complex projects. Here is the key point, I would like to implement the plug-in function is: plug-in provides the interface function to create a menu, input parameters to contain menu item information data source, output to the corresponding multilevel menu . Using the widget Library of the jquery UI, we can easily customize the new jquery UI widget to meet these functional requirements.

2.1 Creating Widget Plugins

The way to create widgets with Widget Factory is to pass a widget's name and prototype object to $.widget (). For example, in the menu navigation bar plug-in, the definition is as follows:

var menu = $.widget (' Myplugin.simplemenu ', {version: "1.0.1", Pathprefix: $.myplugin.config.pathprefix,        options: { /*default params*/        },        _create:function () {},/        * Specific implementation function slightly *        /_destroy:function () {},});

Here, a widget named SimpleMenu is defined under the Myplugin namespace, which is the menu navigation bar plugin. The version of the plugin is also defined in the given prototype object, the path prefix, the default parameter, the creation function, the implementation function, and so on. It is important to note that thewidget plugin is actually created from _create , and this function we can rewrite overrides, as to how the inside is called this process plug-in is transparent to us.

2.2 Specific features that need to be implemented

As already mentioned, the input data for the menu navigation bar plug-in is the data source that contains the menu item information. For versatility, it is recommended to use JSON as the data source. JSON data assembly and reading are very simple, the difficulty is how to convert the JSON data to any level of the menu, and to ensure that the menu each level of food items can be properly bound to listen to events (mouse click or mouse pass, leave and other events).

The resulting menu navigation and the original JSON data are hierarchical, and the simplest and most efficient way to generate the same menu hierarchy as the JSON hierarchy is recursive invocation. However , the recursive invocation of a multilevel menu is not a one-shot, but a call on demand-a recursive call that is triggered once a user taps or passes a menu item . The following is the first CreateMenu code, which basically implements the current menu item collection based on Menulist (the set of menu items to load) and Menupath (the path to the previous level menu items). For example, when executing the function for the first time, menulist-json an array for the original menu item, Menupath as "item"-The top-level initial value, and traversing each element of the Menulist (the menu item corresponding to the first-level menu), creating an HTML structure with an initial style And then set the status of the current level (such as the first level) menu, including the position in the document, the binding event, and the ability to provide scrolling page breaks when the menu item is too large; recursion is generated in the binding event function, and the CreateMenu function is called when the user triggers the binding event. and pass two parameters: trigger the menu item's submenu collection and path information.

The CreateMenu private function is implemented as follows:

_createmenu:function (Menulist, Menupath) {var Patharr = menupath.split ('-'), level = Patharr.length,menuclass = ". Menu" + Level,menudiv,menuul,content = "", menusubflag,menuname,menuitem;if ((Menudiv = This.element.find (Menuclass)). length = = = 0) {return;} Menuul = Menudiv.children ("ul");/* loop to generate the HTML code of Level menu and add to the menu UL */for (var i = 0, len = menulist.length; i < Len; i++) {MenuItem = Menulist[i];menuname = Menuitem.menuname;menusubflag = "";/* Determines whether the menu item is a leaf menu (without submenus) */if (Menuitem.submenu & & menuItem.subMenu.length > 0) {if (Level > 1) {menuName + = "<div class= ' Sub ' ></div>";}} Else{menusubflag = "class = ' leaf '";} Content + = "<li data-path=" + Menupath + "-" + (i + 1) + "" "+menusubflag +" > "+ menuName +" </li> ";}menuul.html (content);/* Displays the current menu bar (some menu bars are set to hidden by default) *//* set the position of the level menu bar */this._setposition (Patharr, MENUDIV);/* Bind menu mouse click or go through event */this._bindmenuevents (Menulist, Menuul, level);/* Set Menu Horizontal scroll */this._setmenuscroll ();}

The binding menu item event function is as follows:

/* Menu event function, handle menu click or mouse through event */_bindmenuevents:function (Menulist, Menuul, level) {/* Record the current this pointer so that it is used inside the binding function */var that = this;/* binds a mouse event to a menu item-mouse click or mouse over event */Menuul.children ("Li"). Bind (This.options.menuevents[level-1],(function (menulist) {return function () {$ (this). addclass (' select '). Siblings (). Removeclass (' select '), var submenu = menulist[$ (this). Index ()].submenu; That._createmenu (submenu, $ (this). attr ("Data-path"));} }) (Menulist)); /* Bind a mouse click event to a leaf menu item-Perform a jump (a level menu does not perform a jump) */if (Levels <= 1) {return;} Menuul.children ("Li.leaf"). Click (function (menulist) {return function () {var menuItem = menulist[$ (This). index ()]; That._executemenu (MenuItem);};} (menulist));}

The code above implements the dynamic generation of any level menu. The next thing to do is to enrich the plugin on this basis and add flexibility. In subsequent development, I added the ability to set menu orientation: For example, to set the level menu to horizontal or vertical, and to add the menu positioning function: For example, the resulting level two menu is displayed on the right or bottom level relative to the position of the primary menu item that triggered it.

While providing additional functionality, it also faces more problems: first, these features increase the user's learning costs, followed by some features such as menu positioning in some unreasonable settings. These are looking forward to continuous improvement in the future!

3 How to use plugins

Plug-in use: first need to provide a well-formed JSON menu data, the current custom plug-in processing is mainly based on the JSON Menuname, submenu, actionlist and other keys to obtain the actual value values, So the JSON data provided must resemble the following example form. Then use the plug-in name to invoke the plug-in: note that in addition to providing the basic information of the menu in the plug-in parameters, you can also specify a callback function to handle the linked jump , through the callback function to implement the menu generation plugin itself and the implementation of the jump logic decoupling, The user can write a callback function according to the actual situation to choose the way to jump .

$ (document). Ready (function () {var Menujson = [{"MenuName": "Navigation menu Column 1", "Menucode": "", "submenu": [{"MenuName": "Level two menu 1", " Menucode ":", "submenu": [{"MenuName": "Three level Menu 1", "Menucode": "", "submenu": [{"MenuName": "Level four menu 1", "Menucode": "", "action List ":" Www.abchina.com "," submenu ": []}]},{" MenuName ":" Level Three Menu 2 "," Menucode ":" "," submenu ": [{" MenuName ":" Level four menu 1 "," Menucode ":", "submenu": []}]}, {"MenuName": "Level two menu 2", "Menucode": "", "submenu": []}]},{"MenuName": "Navigation menu column 2", "Menuco De ":" "," submenu ": [{" MenuName ":" Level two menu 3 "," Menucode ":" "," submenu ": [{" MenuName ":" Level Three menu 3 "," Menucode ":" "," submenu ": [] }]}, {"MenuName": "Level two menu 4", "Menucode": "", "submenu": []}]},{"MenuName": "Navigation menu column 3", "Menucode": "", "submenu": [{"Menunam E ":" Level two menu 5 "," Menucode ":" "," submenu ": []}]}];$ (". Menu "). SimpleMenu ({Menulist:menujson, executemenu:function ( actionlist) {window.location.href = actionlist;});});

This blog post is a personal original work, please specify the source when reproduced. If there are suggestions, please reply directly to exchange, thank you!

JQuery Custom Plug-in-parameterized Configuration Multilevel menu navigation bar plugin