简略适用的JS右键菜单

2012-10-19

简单适用的JS右键菜单?右键菜单网上大把，有些很复杂，功能也很丰富，看了半天也看不懂，哎，我们这种菜鸟也只

简单适用的JS右键菜单

?右键菜单网上大把，有些很复杂，功能也很丰富，看了半天也看不懂，哎，我们这种菜鸟也只适合几十行的代码了，所以就写了个几十行的代码，原则就是：简单适用，别人一看就懂，至少思路很简单简略适用的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 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'>&nbsp;</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">&nbsp;</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'>&nbsp;</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>

热点排行

JavaScript

简略适用的JS右键菜单