Context menu zones
zone A
zone B
zone C
</> Source
<!DOCTYPE html>
<html>
<head>
<title>Context menu zones</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
<script src="../../../codebase/dhtmlx.js"></script>
<script>
var myContextMenu;
var sel;
function doOnLoad() {
myContextMenu = new dhtmlXMenuObject({
icons_path: "../common/imgs/",
context: true,
xml: "../common/dhxmenu.xml"
});
sel = document.getElementById("sel");
}
function getId() {
var id = sel.options[sel.selectedIndex].value;
return id;
}
function addZone() {
myContextMenu.addContextZone(getId());
}
function removeZone() {
myContextMenu.removeContextZone(getId());
}
function checkZone() {
alert(myContextMenu.isContextZone(getId()));
}
</script>
</head>
<body onload="doOnLoad()">
<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="addZone();">
<input type="button" value="Remove Context Zone" onclick="removeZone();">
<input type="button" value="Is Context Zone?" onclick="checkZone();">
</div>
</body>
</html>Documentation
Check documentation to learn how to use the components and easily implement them in your applications.