dhtmlxmenu:dhtmlxmenu_init_constructor [Skin test wiki]

Index

dhtmlxmenu

dhtmlxMenu constructor

General

The first steps that need to be taken for dhtmlxMenu's initialization are the following:

Download dhtmlxMenu package from the server and place it in a folder;
Create an index.html file;
Place a full path to the CSS file into the <head> tag of html file. This file determines menu appearance according to the chosen skin (in this example we use dhx_blue skin, as it's the default one). That's why, we recommend our users to make up their mind on which skin they are going to apply right on this very step;
Place the full paths to JS files into the <head> tag of html file.

    <head>
        <script src="[full path to this file]/dhtmlxcommon.js"></script>
        <script src="[full path to this file]/dhtmlxmenu.js"></script>
        <link rel="stylesheet" type="text/css" href="[full path to this file]/dhtmlxmenu_dhx_blue.css">
    </head>

From this point further steps the user should take are different for creating a usual menu and a contextual menu.

Usual Menu

The user needs to create an object where dhtmlxMenu will be placed later. In this example the object is a <div> element on page, which is placed in the <body> tag:

     <div id="menuObj"></div>

The next step is to create a new dhtmlXMenuObject and place it after the <div> element (object) that we've just created:

    <script>
         var menu = new dhtmlXMenuObject("menuObj", skin);
         // or
         var parentObj = document.getElementById("menuObj");
         var menu = new dhtmlXMenuObject(parentObj, skin);
     </script>

The first parameter defines an HTML object on page to which the menu is attached (the main menu container in the code mentioned above). The second argument is optional, and it indicates the name of the skin chosen for the Menu. If this argument is not indicated, the component will be created with the default skin (dhx_skyblue).

It should be noted that with the way of menu creating described above, the system will first clear the menu container (<div>), and then create the menu.

Contextual Menu

Contextual menu is attached to context zone. Context zone is an html object. In this example the object is a <div> element on page, which is placed in the <body> tag.

    <div id="contextArea"></div>

Note, that for right menu positioning <div> used as context zone should have position relative or absolute.

For a contextual menu the user should:

Create a new dhtmlxMenuObject attached to “contextArea” (or attach it later);
Set the name of the necessary skin as the second argument for dhtmlXMenuObject (optional; if the name of the skin is not indicated, the default one will be used);
Use renderAsContextMenu() method.

    <script>
        var menu = new dhtmlXMenuObject("contextArea");
        menu.renderAsContextMenu();
    </script>

It should be noted that with the way of menu creating described above, the system will first clear the menu container (<div>), and then create the contextual menu. To prevent container data from clearing, the user should use the method described in Contextual menu zones section.

Contextual Menu Zones

A contextual menu zone is the area the user needs to click to make appear contextual menu. The previous snippet shows us initialization of a contextual menu with the predefined contextual zone: when the user indicates contextual zone id while creating a new menu object, it means that this area is set to be a contextual menu zone automatically by script.

In other way, the user can initialize a contextual menu without indicating a contextual zone initially. And use addContextZone() method later, which parameter is id of the object that will act as a contextual zone:

      <script>
          var menu = new dhtmlXMenuObject();
          menu.renderAsContextMenu();
          menu.addContextZone(contextZoneId);
      </script>

A contextual zone can be easily removed with the help of the following method:

    <script>
        menu.removeContextZone(contextZoneId);
    </script>

There is also the possibility to check whether an object is a contextual menu zone:

    <script>
        var isZone = menu.isContextZone(objectId);  // returns true|false
    </script>

Note, that for right menu positioning object used as context zone should have position relative or absolute.

Initialization Recommendation

The recommended way of menu initialization is the following:

      <html>
      <head>
          <script>
              var menu;
              function doOnLoad() {
                  menu = new dhtmlXMenuObject("parentId");
              }
          </script>
          ...
      </head>
      <body onload="doOnLoad();">
          <div id="parentId"></div>
          ...
      </body>
      </html>

Setting Icons Path

In dhtmlxMenu 2.0-2.1 there was setImagePath method to set path for images, needed to render menu. From 2.5 version this method hasn't been supported any more, but for the back compatability it is present in menu. If you have any links to it in your code, please remove them.

By means of this setIconsPath method the user is able to set path to the directory, where menu icons images are stored.

    <script>
        menu.setIconsPath("path/to/icons/");
    </script>