AddObject - NlsMenu Developer's Guide

Popup/Context Menu

NlsMenu Professional - Advanced Javascript Drop Down Menu Control

Popup menu is no different to the regular drop down menu except the menu is displayed upon user click on element which trigger the menu. With NlsMenu you not only can create a standard popup menu but also create context sensitive menu. To use the NlsMenu as popup menu (context menu):

Construct the menu as desribed in Using NlsMenu Pro.
Use showMenu() function to show the popup/context menu.

For example:

         
          <script>
            //menu on onclick event handler.
            function menuClick(menuId, itemId) {
              alert("Clicked Menu: " + menuId + ", item: " + itemId);
            }
            
            //display the popup menu.
            function showPopupMenu(e) {
              menuMgr.hideMenus();
              main.showMenu(e.clientX, e.clientY, e.clientX, e.clientY, "", null);
            }            
          </script>         
         
          <script>
            var menuMgr = new NlsMenuManager("mgr");

            //create the popup menu.
            var main = menuMgr.createMenu("main");
            main.addItem("1", "Add New", "");
            main.addItem("2", "Edit", "");
            main.addItem("3", "Delete", "");
            main.addItem("4", "Insert ", "");
            main.addSeparator();
            main.addItem("5", "Others", "");

            //set the menu onclick handler.
            main.menuOnClick=menuClick;
          </script>
          
          <body>
            ...
            <span onmousedown="showPopupMenu(event)" oncontextmenu="return false;">Click me to show the context menu!</span>
            ...
          </body>

Useful function when working with context menu

enableItem()
With this function you can enable/disable menu item. For example:

              //disable item with id=1
              main.enableItem("1", false);

setItemVisible()
With this function you can show/hide menu item. For example:
```
              //hide item with id=1
              main.setItemVisible("1", false);
            
```
Note that the setItemVisible() function is defined in nlsmenuext_dyn.js, you need to include this script in your page when you use this function.

For complete working context menu example, please see the context menu example in the menu package.