<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxmenu_dhx_skyblue.css">
<script src="../../codebase/dhtmlxcommon.js"></script>
<script src="../../codebase/dhtmlxmenu.js"></script>
 
<div style="height: 400px; position: relative;">
    <div id="contextZone_A" style="position: absolute; left: 100px; top: 100px; width: 100px; height: 60px; border: #C1C1C1 1px solid; background-color: #E7F4FF;">zone A</div>
    <div id="contextZone_B" style="position: absolute; left: 220px; top: 100px; width: 100px; height: 60px; border: #C1C1C1 1px solid; background-color: #E7F4FF;">zone B</div>
    <div id="contextZone_C" style="position: absolute; left: 340px; top: 100px; width: 100px; height: 60px; border: #C1C1C1 1px solid; background-color: #E7F4FF;">zone C</div>
</div>
<div>
    <select id="sel">
        <option value="contextZone_A">zone A</option>
        <option value="contextZone_B">zone B</option>
        <option value="contextZone_C">zone C</option>
    </select>
    <input type="button" value="Add Context Zone" onclick="add();">
    <input type="button" value="Remove Context Zone" onclick="remove();">
    <input type="button" value="Is Context Zone?" onclick="check();">
</div>
 
<br>
<script>
var menu;
function initMenu() {
    menu = new dhtmlXMenuObject();
    menu.setIconsPath("../common/imgs/");
    menu.renderAsContextMenu();
    menu.loadXML("../common/dhxmenu.xml?e=" + new Date().getTime());
}
var sel = document.getElementById("sel");
function getId() {
    return sel.options[sel.selectedIndex].value;
}
function add() {
    menu.addContextZone(getId());
}
function remove() {
    menu.removeContextZone(getId());
}
function check() {
    alert(menu.isContextZone(getId()));
}</script>