<!DOCTYPE html>
<html>
<head>
<title>Add / remove items</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 myMenu;
var itemImg;
var parentId;
var itemId;
function doOnLoad() {
myMenu = new dhtmlXMenuObject({
parent: "menuObj",
icons_path: "../common/imgs/",
xml: "../common/dhxmenu.xml"
});
myMenu.attachEvent("onClick", changeParent);
itemImg = "copy";
parentId = null;
itemId = 0;
}
function changeIcon(obj, icon) {
document.getElementById("icon_src").src = obj.src;
itemImg = icon;
}
function changeParent(id) {
parentId = id;
var text = myMenu.getItemText(id);
document.getElementById("item_parent").innerHTML = id + " ("+text+")";
document.getElementById("item_id").innerHTML = id + " ("+text+")";
}
function addItem() {
if (parentId == null) { alert("Please select parentId"); return; }
var itemText = document.getElementById("item_text").value;
if (itemText.length == 0) { itemText = "New Item"; }
var img = "";
var imgDis = "";
if (document.getElementById("icon_exists").checked) {
img = itemImg+".gif";
imgDis = itemImg+"_dis.gif";
}
var opts = document.getElementById("add_type");
if (opts.options[opts.selectedIndex].value == "0") {
myMenu.addNewChild(parentId, 0, "item_"+itemId, itemText, false, img, imgDis);
} else {
myMenu.addNewSibling(parentId, "item_"+itemId, itemText, false, img, imgDis);
}
itemId++;
parentId = null;
document.getElementById("item_parent").innerHTML = "(Click menu to select)";
document.getElementById("item_id").innerHTML = "(Click menu to select)";
}
function removeItem() {
if (parentId == null) { alert("Please select itemId"); return; }
myMenu.removeItem(parentId);
parentId = null;
document.getElementById("item_parent").innerHTML = "(Click menu to select)";
document.getElementById("item_id").innerHTML = "(Click menu to select)";
}
</script>
</head>
<body onload="doOnLoad()">
<div style="height: 250px;"><div id="menuObj"></div></div>
<div>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top">
<table border="0" cellspacing="0" cellpadding="0">
<th colspan="3" style="padding-bottom: 10px;">Add New Item</th>
<tr>
<td>Item Type</td>
<td width="10"> </td>
<td><select id="add_type"><option value="0">Child</option><option value="1">Sibling</option></select></td>
</tr>
<tr>
<td>Parent</td>
<td> </td>
<td><div id="item_parent" style="font-weight: bold;">(Click menu to select)</div></td>
</tr>
<tr>
<td>Item Text</td>
<td> </td>
<td><input id="item_text" type="text" value=""></td>
</tr>
<tr>
<td>Item Has Icon</td>
<td> </td>
<td>
<span><input id="icon_exists" type="checkbox" checked></span>
<span><img id="icon_src" width="18" height="18" border="0" src="../common/imgs/copy.gif"></span>
</td>
</tr>
<tr>
<td>Icon Source</td>
<td> </td>
<td>
<span><img onclick="changeIcon(this, 'copy');" width="18" height="18" border="0" src="../common/imgs/copy.gif"></span>
<span><img onclick="changeIcon(this, 'cut');" width="18" height="18" border="0" src="../common/imgs/cut.gif"></span>
<span><img onclick="changeIcon(this, 'new');" width="18" height="18" border="0" src="../common/imgs/new.gif"></span>
<span><img onclick="changeIcon(this, 'paste');" width="18" height="18" border="0" src="../common/imgs/paste.gif"></span>
<span><img onclick="changeIcon(this, 'print');" width="18" height="18" border="0" src="../common/imgs/print.gif"></span>
<span><img onclick="changeIcon(this, 'redo');" width="18" height="18" border="0" src="../common/imgs/redo.gif"></span>
<span><img onclick="changeIcon(this, 'undo');" width="18" height="18" border="0" src="../common/imgs/undo.gif"></span>
<span><img onclick="changeIcon(this, 'save');" width="18" height="18" border="0" src="../common/imgs/save.gif"></span>
<span><img onclick="changeIcon(this, 'select_all');" width="18" height="18" border="0" src="../common/imgs/select_all.gif"></span>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="button" value="Add Item" style="margin-top: 10px;" onclick="addItem();"></td>
</tr>
</table>
</td>
<td width="30"> </td>
<td valign="top">
<table border="0" cellspacing="0" cellpadding="0">
<th colspan="3" style="padding-bottom: 10px;">Remove Item</th>
<tr>
<td>Item</td>
<td> </td>
<td><div id="item_id" style="font-weight: bold;">(Click menu to select)</div></td>
</tr>
<tr>
<td colspan="3" align="center"><input type="button" value="Remove Item" style="margin-top: 10px;" onclick="removeItem();"></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
