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