Creating a Context Menu

Initialization

Contextual menu is attached to the 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 the right menu positioning the <div> used as a context zone should have relative or absolute position.

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 the renderAsContextMenu method.

var myMenu = new dhtmlXMenuObject("contextArea");
myMenu.renderAsContextMenu();

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 below.

Contextual Menu Zones

A contextual menu zone is the area the user needs to click to make a contextual menu to appear. The previous snippet has shown initialization of a contextual menu with the predefined contextual zone. When the user indicates the 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 a different way, the user can initialize a contextual menu without indicating a contextual zone initially. Then to use the addContextZone method and pass to it the id of the object that will act as a contextual zone:

var myMenu = new dhtmlXMenuObject();
myMenu.renderAsContextMenu();
myMenu.addContextZone(contextZoneId);

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

myMenu.removeContextZone(contextZoneId);

There is also the possibility to check whether an object is a contextual menu zone, using the isContextZone method:

var isZone = myMenu.isContextZone(objectId);  // returns true/false

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