All components dhtmlxMenu Init on page Available xml/json attributes

Available xml/json attributes

from xml from json
The purpose of this demo is to show you list of available xml and json attributes in action
</> Source
<!DOCTYPE html>
<html>
<head>
	<title>Available xml/json attributes</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>
	<style>
		table.my_table td {
			text-align: left;
			vertical-align: top;
			padding-right: 20px;
			padding-bottom: 10px;
			width: 450px;
		}
	</style>
	<script>

		var myMenuXML;
		var myMenuJSON;

		function doOnLoad() {

			myMenuXML = new dhtmlXMenuObject({
				parent: "menuXML",
				icons_path: "../common/imgs/",
				xml: "../common/dhxmenu_all_items.xml",
				onload: function() { checkUserData("myMenuXML"); }
			});

			myMenuJSON = new dhtmlXMenuObject({
				parent: "menuJSON",
				icons_path: "../common/imgs/",
				json: "../common/dhxmenu_all_items.json",
				onload: function() { checkUserData("myMenuJSON"); }
			});

			// or both for xml or json:
			// myMenu.loadStruct(url, callback);

			// more init options
			// skin: "materal"			// force to use any skin (make sure corresponding css attached)
			// icon_path: "path/to/icons/"		// deprecated, please use icons_path
			// xml: "url/to/xml.file"		// link to xml file to load menu items from
			// onload: function(){} 		// callback, will called after xml loaded
			// onclick: function(){}		// onclick handler, the same as myMenu.attachEvent("onClick", function(){})
			// oncheckboxclick: function(){}	// the same as myMenu.attachEvent("onCheckboxClick", function(){})
			// onradioclick: function(){}		// the same as myMenu.attachEvent("onRadioClick", function(){})
			// context: true			// force to render menu as context, please see renderAsContextMenu()
			// visible_area: {x1:a,x2:b,y1:c,y2:d}	// visible area colors, please see setVisibleArea()
			// items: []				// array of items to load (please see 01/09_api_ext.html demo)
			// top_text: "text here"		// menu top text, please see setTopText()
			// align: "right"			// "left"/"right" menu align, please see setAlign()
			// open_mode: "win"/"web"		// menu open mode, please see setOpenMode()
			// overflow: "int value"		// count of item for setOverflow() or "auto"
			// dynamic: "url"			// url for dynamic menu loading, please see enableDynamicLoading()
		}

		function checkUserData(menu) {
			var userData = {
				my_data_name: window[menu].getUserData("open","my_data_name"),
				more_info: window[menu].getUserData("open","more_info")
			};
			// console.log(menu, userData);
		}

	</script>
</head>
<body onload="doOnLoad();">
	<table border="0" cellspacing="0" cellpadding="0" class="my_table">
		<tr>
			<td>from xml</td>
			<td>from json</td>
		</tr>
		<tr>
			<td><div style="height: 250px;"><div id="menuXML"></div></div></td>
			<td><div style="height: 250px;"><div id="menuJSON"></div></div></td>
		</tr>
	</table>
	<div>
		The purpose of this demo is to show you list of available xml and json attributes in action
	</div>
</body>
</html>

Documentation

Check documentation to learn how to use the components and easily implement them in your applications.