DHTMLX Docs & Samples Explorer

### Context Menu Zones

zone A
zone B
zone C
Source

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