简略适用的JS右键菜单

简单适用的JS右键菜单

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

 

 

说明：样式和菜单的组织格式是参考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(function(){
			new jQuery.contextMenu(this, configData);
		});
		return this;
	};
	
})(jQuery);

 

 

 

用法也如下：

	jQuery(function(){
		
				
		// 右键菜单的配置数据
		var configData = {
			imagePath: 'images/',
			menuItems:[{code: 'new', text: '新增', image:'addStep.gif', click:"doAdd();", tag:''},
					 {code: 'edit', text: '编辑', image:'delItem.gif', click:"toEdit();", tag:''},
					 {code: 'delete', text: '删除', click:"doDelete();", tag:''}, 
					 {text:'-'},
					 {code: 'view', text: '查看', click:"toView();"}],
			preFunction:function(e, $menuItems){
				// 隐藏delete菜单项
				for(var i = 0; i < $menuItems.length; i++){
					var $item = jQuery($menuItems[i]);
					if($item.attr("code") == "delete"){
						$item.hide();
					}
				}
				return true;
			}
		};
		//jQuery.contextMenu("#elem", configData);
		//jQuery.contextMenu(null, configData);
		//jQuery(document.body).contextMenu(configData);
		jQuery("#elem").contextMenu(configData);
		
	});

 

================================================================

 

懒得传附件了，全部代码如下，图片为ExtJS的：

<html><head>
    <title>Form UI</title>
    <link type="text/css" rel="stylesheet" href="css/formstyle.css">
    <script type="text/javascript" src="javascripts/jquery-1.4.2.js" charset="gb2312"></script>

<style type="text/css">    

*{
	font-size:12px;
	color:#000;
	    margin: 0;
    padding: 0;
}

body {
    font-family:helvetica,tahoma,verdana,sans-serif;padding:20px;padding-top:32px;font-size:12px;background-color:#fff !important;
}

ol, ul {
    list-style: none outside none;
}

#rightMenu {
    left: 460px;
    position: absolute;
    top: 59px;
    visibility: visible;
    z-index: 15000;
}
.x-menu {
    background: url("images/menu.gif") repeat-y scroll 0 0 #F0F0F0;
    border: 1px solid #718BB7;
    padding: 2px;display:none;
    position: absolute;
    z-index: 15000;
}

.x-menu-list {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
}

.x-menu li {
    line-height: 100%;
}

.x-menu-list-item {
    -moz-user-select: none;
    display: block;
    font: 11px tahoma,arial,sans-serif;
    padding: 1px;
    white-space: nowrap;
}

.x-menu a.x-menu-item {
    color: #222222;
    cursor: pointer;
    display: block;
    line-height: 16px;
    outline: 0 none;
    padding: 3px 21px 3px 3px;
    text-decoration: none;
    white-space: nowrap;
}

.x-menu a {
    text-decoration: none !important;
}

a:link {
    color: #000000;
    font-size: 12px;
    line-height: 20px;
    text-decoration: none;
}

.x-menu-item-icon {
    background-position: center center;
    border: 0 none;
    height: 16px;
    margin: 0 8px 0 0;
    padding: 0;
    vertical-align: top;
    width: 16px;
}

.x-menu-sep {
    background-color: #E0E0E0;
    border-bottom: 1px solid #FFFFFF;
    display: block;
    font-size: 1px;
    line-height: 1px;
    margin: 2px 3px;
    overflow: hidden;
}

.x-menu li.x-menu-sep-li {
    font-size: 1px;
    line-height: 1px;
}

.x-menu-item-active {
    background: url("images/item-over.gif") repeat-x scroll left bottom #EBF3FD;
    border: 1px solid #AACCF6;
    padding: 0;
}
.x-menu-item-active a.x-menu-item {
    color: #233D6D;
}

</style>
</head><body>
<h1>RightMenu 展示</h1>

<!--
<div id="rightMenu" class="x-layer x-menu" id="ext-gen59">
<ul class="x-menu-list" id="ext-gen63">
<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>
<li class="x-menu-list-item " id="ext-gen69">
<a href="#" class="x-menu-item" id="ext-gen70">
<img class="x-menu-item-icon " src="images/s.gif">修改零件</a>
</li>
<li class="x-menu-list-item " id="ext-gen71">
<a href="#" class="x-menu-item" id="ext-gen72">
<img class="x-menu-item-icon " src="images/delItem.gif" id="ext-gen81">删除零件</a>
</li>
<li class="x-menu-list-item " id="ext-gen73">
<a href="#" class="x-menu-item" id="ext-gen74">
<img class="x-menu-item-icon " src="images/s.gif">添加附件</a>
</li>
<li class="x-menu-sep-li" id="ext-gen75">
<span class="x-menu-sep" id="ext-gen76">&nbsp;</span>
</li>
<li class="x-menu-list-item " id="ext-gen77">
<a href="#" class="x-menu-item" id="ext-gen78">
<img class="x-menu-item-icon " src="images/s.gif" id="ext-gen83">查看零件</a>
</li>
</ul>
</div>
-->
<input type="button" value="隐藏部分" />

<div id="elem" style="height:500;width:800; background-color:#0d0d0d;"></div>


<script>
	jQuery(function(){
		
		/*
		$liList = jQuery("#rightMenu ul li.x-menu-list-item");
		//alert($liList.length);
		$liList.mouseover(function(){
			jQuery(this).addClass("x-menu-item-active");
		});
		
		$liList.mouseout(function(){
			jQuery(this).removeClass("x-menu-item-active");
		});
		*/
		
		// 右键菜单的配置数据
		var configData = {
			imagePath: 'images/',
			menuItems:[{code: 'new', text: '新增', image:'addStep.gif', click:"doAdd();", tag:''},
					 {code: 'edit', text: '编辑', image:'delItem.gif', click:"toEdit();", tag:''},
					 {code: 'delete', text: '删除', click:"doDelete();", tag:''}, 
					 {text:'-'},
					 {code: 'view', text: '查看', click:"toView();"}],
			preFunction:function(e, $menuItems){
				// 隐藏delete菜单项
				for(var i = 0; i < $menuItems.length; i++){
					var $item = jQuery($menuItems[i]);
					if($item.attr("code") == "delete"){
						$item.hide();
					}
				}
				return true;
			}
		};
		//jQuery.contextMenu("#elem", configData);
		//jQuery.contextMenu(null, configData);
		//jQuery(document.body).contextMenu(configData);
		jQuery("#elem").contextMenu(configData);
		
	});
	

(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(function(){
			new jQuery.contextMenu(this, configData);
		});
		return this;
	};
	
})(jQuery);
	
	
	

</script>

</body></html>