Open effects (experimental)

Mode

Speed (ms)

Opacity (%)

menu.enableEffect(name, maxOpacity, effectSpeed);
where:
name - str (mandatory), effect name, values - "opacity" or "slide" or "slide+" (slide with opacity)
maxOpacity - int (optional), set max opacity level - 0..100 (%)
effectSpeed - int (optional), set effect speed, ms

right-click on this area to show context menu

</> Source

<!DOCTYPE html>
<html>
<head>
	<title>Open effects (experimental)</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>
		body {
			background-image: url("../common/background0155.jpg");
			background-repeat: no-repeat;
			background-position: 0px 0px;
		}
	</style>
	<script>
		var speed = 50;
		var opacity = 90;
		var myMenu;
		var myContextMenu;
		function doOnLoad() {
			myMenu = new dhtmlXMenuObject({
				parent: "menuObj",
				icons_path: "../common/imgs/",
				xml: "../common/dhxmenu.xml"
			});
			//
			myContextMenu = new dhtmlXMenuObject({
				parent: "contextMenu",
				icons_path: "../common/imgs/",
				context: true,
				xml: "../common/dhxmenu.xml"
			});

			//
			effectOnOff('slide+');
			updateInfo();
			for (var q=0; q<6; q++) {
				var w = 50+q*50;
				byId("speedBtns").innerHTML += '<input type="button" value="'+w+'" onclick="changeSpeed('+w+');" style="margin-left: 5px;">';
			}
			for (var q=0; q<9; q++) {
				var w = 60+q*5;
				byId("opacityBtns").innerHTML += '<input type="button" value="'+w+'" onclick="changeOpacity('+w+');" style="margin-left: 5px;">';
			}
		}
		function unloadMenu() {
			myMenu.unload();
			myMenu = null;
			myContextMenu.unload();
			myContextMenu = null;
		}

		function effectOnOff(mode) {
			myMenu.enableEffect(mode||false, opacity, speed);
			myContextMenu.enableEffect(mode||false, opacity, speed);
			updateInfo();
		}

		function updateInfo() {
			byId("opacitystate").innerHTML = "Opacity: "+(myMenu._menuEffect=="slide+"||myMenu._menuEffect=="opacity"?"<span style='color:green;'>On</span>":"Off");
			byId("slidestate").innerHTML = "Slide: "+(myMenu._menuEffect=="slide+"||myMenu._menuEffect=="slide"?"<span style='color:green;'>On</span>":"Off");
			byId("speedstate").innerHTML = "Speed: "+speed;
			byId("opacityval").innerHTML = "Opacity: "+opacity;
		}

		function changeSpeed(newSpeed) {
			speed = newSpeed;
			effectOnOff(myMenu._menuEffect);
		}

		function changeOpacity(newOpacity) {
			opacity = newOpacity;
			effectOnOff(myMenu._menuEffect);
		}

		function byId(id) {
			return document.getElementById(id);
		}
	</script>
</head>
<body onload="doOnLoad()" onunload="unloadMenu();">
	<div style="height: 450px;">
		<div id="menuObj"></div>
	</div>
	<table border="0">
		<tr>
			<td valign="top" align="left">
				<div style="background-color: white; float: left; padding: 20px; border-radius: 5px;">
					<div>
						<div>Mode</div>
						<input type="button" value="Opacity" onclick="effectOnOff('opacity');">
						<input type="button" value="Slide" onclick="effectOnOff('slide');">
						<input type="button" value="Slide & Opacity" onclick="effectOnOff('slide+');">
						<input type="button" value="Disable All" onclick="effectOnOff(null);">
						<!-- speed buttons -->
						<div style="margin-top: 5px;">Speed (ms)</div>
						<div id="speedBtns"></div>
						<!-- opacity buttons -->
						<div style="margin-top: 5px;">Opacity (%)</div>
						<div id="opacityBtns"></div>
					</div>
					<div id="opacitystate" style="margin-top:20px;"></div>
					<div id="slidestate"></div>
					<div id="speedstate"></div>
					<div id="opacityval"></div>
				</div>
			</td>
			<td valign="top" align="left">
				<div style="background-color: white; float: left; padding: 20px; border-radius: 5px; position: relative;" id="contextMenu">
					<span style="font-weight:bold;position:relative;">menu.enableEffect(name, maxOpacity, effectSpeed);</span><br>
					where:<br>
					name - str (mandatory), effect name, values - "opacity" or "slide" or "slide+" (slide with opacity)<br>
					maxOpacity - int (optional), set max opacity level - 0..100 (%)<br>
					effectSpeed - int (optional), set effect speed, ms<br><br>
					<span style="color:green;font-weight:bold;position:relative;">right-click on this area to show context menu</span>
				</div>
			</td>
		</tr>
	</table>
</body>
</html>

Documentation

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