?右键菜单网上大把，有些很复杂，功能也很丰富，看了半天也看不懂，哎，我们这种菜鸟也只适合几十行的代码了，所以就写了个几十行的代码，原则就是：简单适用，别人一看就懂，至少思路很简单。。

?

?

说明：样式和菜单的组织格式是参考ExtJS的。

一个简单的Jquery插件形式的。

(function(jQuery) {
	// ContextMenu插件
	jQuery.contextMenu = function(container, configData) {
		// 默认情况下使用document.body作为容器
		if(!container) container = document.body;
		
		var $container = jQuery(container);
		var IMAGE_PATH = configData.imagePath || "";// 图标文件的路径
		// 菜单的 html element ID
		var menuId = getRandomId();
	
		configData.menuItems = configData.menuItems || []; 
		/** menuItems 中的数据组装格式
		  	menuItems:[{code: 'new', text: '新增', image:'addStep.gif', click:"doAdd();"},
					 {code: 'edit', text: '编辑', image:'delItem.gif', click:"toEdit();"},
					 {code: 'delete', text: '删除', click:"doDelete();", tag:''}, 
					 {text:'-'},
					 {code: 'view', text: '查看', click:"toView();"}]
		 */
		var htmlContent = buildMenuHtml(configData.menuItems, menuId);
		$container.append(htmlContent);
		
		var $menuObject = jQuery('#' + menuId);	// 缓存菜单的DIV对象
		// 处理移入移出的效果事件 
		var $menuItems = jQuery("#" + menuId + " .x-menu-list-item");
		$menuItems.mouseover(function(){
			jQuery(this).addClass("x-menu-item-active");
		});
		
		$menuItems.mouseout(function(){
			jQuery(this).removeClass("x-menu-item-active");
		});
	
		$container.bind('contextmenu', function(e) {
			var posX = e.pageX;
			var posY = e.pageY;
			
			if (jQuery(window).width() < posX + $menuObject.width()) posX -= $menuObject.width();
			if (jQuery(window).height() < posY + $menuObject.height()) posY -= $menuObject.height();
			// 如果有前置函数，执行前置函数，根据返回值判断是否需要做一些动作
			if(!!configData.preFunction && jQuery.isFunction(configData.preFunction)){
				if(!configData.preFunction(e, $menuItems)){// 如果返回false 表示不继续弹出菜单
					e.preventDefault();
					return false;
				}
			}
			// 设置弹出菜单的位置，并弹出菜单
			$menuObject.css(
				{'left':posX,'top':posY}
			).show();
			e.preventDefault();
			return false;
		});
		
		jQuery(document).bind('mouseup', function(){
			$menuObject.hide();
		});
		jQuery(window).bind('blur', function(){
			$menuObject.hide();
		});
		
		// 生成随机数
		function getRandomId(){
			return (Math.random() + "").replace(".", "");
		}
		
		// 根据菜单数据的数组生成HTML
		function buildMenuHtml(_menuItems, _menuId){

			var htmlContent = "<div id='"+ _menuId +"' class='x-menu'><ul class='x-menu-list''>";
			for(var i = 0; i < _menuItems.length; i++){
				var _menu = _menuItems[i] || {};
				//{code: '', text: '', image:'', click:function(){}, tag:''}
				_menu.id = _menu.id || "MI_" + getRandomId();
				_menu.code = _menu.code || "";
				_menu.text = _menu.text || "未命名";
				_menu.image = IMAGE_PATH + (_menu.image || "s.gif");
				_menu.tag = _menu.tag || "";
				_menu.click = _menu.click || "javascipt:void(0);";
				
				if(_menu.text == "-"){// 分割条
					htmlContent += "<li class='x-menu-sep-li'><span class='x-menu-sep'>&nbsp;</span></li>";
					continue;
				}
				
				/** 菜单节点的模版，参与ExtJS
				 * <li class="x-menu-list-item" id="ext-gen67">
				 * <a href="#" class="x-menu-item" id="ext-gen68">
			     * <img class="x-menu-item-icon " src="images/addStep.gif">添加零件</a>
				 * </li>
				 */
				htmlContent += "<li class='x-menu-list-item' id='" + _menu.id + "' code='"+ _menu.code +"'>" +
								"<a href='#' class='x-menu-item' id='A"+ _menu.id +"' onclick='" + _menu.click + "'>" +
								"<img class='x-menu-item-icon' src='" + _menu.image + "'>" + _menu.text +
								"</a></li>";	
			}
			
			htmlContent += "</ul></div>";
			return htmlContent;
		}
		
	};
	
	// 形成插件
	jQuery.fn.contextMenu = function(configData){
		// 设置默认的窗口为body
		this.each(func