简单适用的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 IDvar 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(".", "");}// 根据菜单数据的数组生成HTMLfunction 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'> </span></li>";continue;}/** 菜单节点的模版，参与ExtJS * <li id="ext-gen67"> * <a href="#" id="ext-gen68"> * <img 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){// 设置默认的窗口为bodythis.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" id="ext-gen59"><ul id="ext-gen63"><li id="ext-gen67"><a href="#" id="ext-gen68"><img src="images/addStep.gif">添加零件</a></li><li id="ext-gen69"><a href="#" id="ext-gen70"><img src="images/s.gif">修改零件</a></li><li id="ext-gen71"><a href="#" id="ext-gen72"><img src="images/delItem.gif" id="ext-gen81">删除零件</a></li><li id="ext-gen73"><a href="#" id="ext-gen74"><img src="images/s.gif">添加附件</a></li><li id="ext-gen75"><span id="ext-gen76"> </span></li><li id="ext-gen77"><a href="#" id="ext-gen78"><img 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 IDvar 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(".", "");}// 根据菜单数据的数组生成HTMLfunction 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'> </span></li>";continue;}/** 菜单节点的模版，参与ExtJS * <li id="ext-gen67"> * <a href="#" id="ext-gen68"> * <img 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){// 设置默认的窗口为bodythis.each(function(){new jQuery.contextMenu(this, configData);});return this;};})(jQuery);</script></body></html>?
?
?
?