Javascript context menu

in Javascript

There are many of context menu examples on the internet. This javascript context menu is very lightweight, OOP based and item-specific. You can setup it in a few seconds.

Include the script and the style sheet at the top of your code (you can find the code in the source code section of this page). Do it in tag. After loading the script you can write your code to attach context menu.

Javascript context menu code tested in IE5.5+, FF1.0+.

DEMO

Source code for index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>My project</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link type="text/css" rel="stylesheet" href="webtoolkit.contextmenu.css" />
	<script type="text/javascript" src="webtoolkit.contextmenu.js"></script>
	<script type="text/javascript">
		SimpleContextMenu.setup({'preventDefault':true, 'preventForms':false});
		SimpleContextMenu.attach('container', 'CM1');
	</script>
</head>
<body>
	<ul id="CM1" class="SimpleContextMenu">
		<li><a href="#">Item 1</a></li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#">Item 3</a></li>
		<li><a href="#">Item 4</a></li>
	</ul>
 
	<input type="text" name="field" value="" />
	<div class="container">Cointainer1</div>
	<div class="container">Cointainer2</div>
	<div class="container">Cointainer3</div>
</body>
</html>

Source code for webtoolkit.contextmenu.css

ul.SimpleContextMenu {
	display: none;
	position: absolute;
	margin: 0px;
	padding: 0px;
	font-family: verdana;
	font-size: 12px;
	list-style-type: none;
	border-top: 1px solid #000000;
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
}
 
	ul.SimpleContextMenu li {
		border-bottom: 1px solid #000000;
	}
 
		ul.SimpleContextMenu li a {
			display: block;
			width: 100px;
			padding: 2px 10px 3px 10px;
			text-decoration: none;
			color: #ff0000;
			background: #eeeeee;
		}
 
		ul.SimpleContextMenu li a:hover {
			text-decoration: none;
			color: #ffffff;
			background: #ff0000;
		}

Source code for webtoolkit.contextmenu.js

/**
*
*  Simple Context Menu
*  http://www.webtoolkit.info/
*
**/
 
var SimpleContextMenu = {
 
	// private attributes
	_menus : new Array,
	_attachedElement : null,
	_menuElement : null,
	_preventDefault : true,
	_preventForms : true,
 
 
	// public method. Sets up whole context menu stuff..
	setup : function (conf) {
 
		if ( document.all && document.getElementById && !window.opera ) {
			SimpleContextMenu.IE = true;
		}
 
		if ( !document.all && document.getElementById && !window.opera ) {
			SimpleContextMenu.FF = true;
		}
 
		if ( document.all && document.getElementById && window.opera ) {
			SimpleContextMenu.OP = true;
		}
 
		if ( SimpleContextMenu.IE || SimpleContextMenu.FF ) {
 
			document.oncontextmenu = SimpleContextMenu._show;
			document.onclick = SimpleContextMenu._hide;
 
			if (conf && typeof(conf.preventDefault) != "undefined") {
				SimpleContextMenu._preventDefault = conf.preventDefault;
			}
 
			if (conf && typeof(conf.preventForms) != "undefined") {
				SimpleContextMenu._preventForms = conf.preventForms;
			}
 
		}
 
	},
 
 
	// public method. Attaches context menus to specific class names
	attach : function (classNames, menuId) {
 
		if (typeof(classNames) == "string") {
			SimpleContextMenu._menus[classNames] = menuId;
		}
 
		if (typeof(classNames) == "object") {
			for (x = 0; x < classNames.length; x++) {
				SimpleContextMenu._menus[classNames[x]] = menuId;
			}
		}
 
	},
 
 
	// private method. Get which context menu to show
	_getMenuElementId : function (e) {
 
		if (SimpleContextMenu.IE) {
			SimpleContextMenu._attachedElement = event.srcElement;
		} else {
			SimpleContextMenu._attachedElement = e.target;
		}
 
		while(SimpleContextMenu._attachedElement != null) {
			var className = SimpleContextMenu._attachedElement.className;
 
			if (typeof(className) != "undefined") {
				className = className.replace(/^\s+/g, "").replace(/\s+$/g, "")
				var classArray = className.split(/[ ]+/g);
 
				for (i = 0; i < classArray.length; i++) {
					if (SimpleContextMenu._menus[classArray[i]]) {
						return SimpleContextMenu._menus[classArray[i]];
					}
				}
			}
 
			if (SimpleContextMenu.IE) {
				SimpleContextMenu._attachedElement = SimpleContextMenu._attachedElement.parentElement;
			} else {
				SimpleContextMenu._attachedElement = SimpleContextMenu._attachedElement.parentNode;
			}
		}
 
		return null;
 
	},
 
 
	// private method. Shows context menu
	_getReturnValue : function (e) {
 
		var returnValue = true;
		var evt = SimpleContextMenu.IE ? window.event : e;
 
		if (evt.button != 1) {
			if (evt.target) {
				var el = evt.target;
			} else if (evt.srcElement) {
				var el = evt.srcElement;
			}
 
			var tname = el.tagName.toLowerCase();
 
			if ((tname == "input" || tname == "textarea")) {
				if (!SimpleContextMenu._preventForms) {
					returnValue = true;
				} else {
					returnValue = false;
				}
			} else {
				if (!SimpleContextMenu._preventDefault) {
					returnValue = true;
				} else {
					returnValue = false;
				}
			}
		}
 
		return returnValue;
 
	},
 
 
	// private method. Shows context menu
	_show : function (e) {
 
		SimpleContextMenu._hide();
		var menuElementId = SimpleContextMenu._getMenuElementId(e);
 
		if (menuElementId) {
			var m = SimpleContextMenu._getMousePosition(e);
			var s = SimpleContextMenu._getScrollPosition(e);
 
			SimpleContextMenu._menuElement = document.getElementById(menuElementId);
			SimpleContextMenu._menuElement.style.left = m.x + s.x + 'px';
			SimpleContextMenu._menuElement.style.top = m.y + s.y + 'px';
			SimpleContextMenu._menuElement.style.display = 'block';
			return false;
		}
 
		return SimpleContextMenu._getReturnValue(e);
 
	},
 
 
	// private method. Hides context menu
	_hide : function () {
 
		if (SimpleContextMenu._menuElement) {
			SimpleContextMenu._menuElement.style.display = 'none';
		}
 
	},
 
 
	// private method. Returns mouse position
	_getMousePosition : function (e) {
 
		e = e ? e : window.event;
		var position = {
			'x' : e.clientX,
			'y' : e.clientY
		}
 
		return position;
 
	},
 
 
	// private method. Get document scroll position
	_getScrollPosition : function () {
 
		var x = 0;
		var y = 0;
 
		if( typeof( window.pageYOffset ) == 'number' ) {
			x = window.pageXOffset;
			y = window.pageYOffset;
		} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
			x = document.documentElement.scrollLeft;
			y = document.documentElement.scrollTop;
		} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
			x = document.body.scrollLeft;
			y = document.body.scrollTop;
		}
 
		var position = {
			'x' : x,
			'y' : y
		}
 
		return position;
 
	}
 
}


Recent Posts

Vector Graphics - Graphics Art
referencement internet
Creer son site pro