右键菜单网上大把,有些很复杂,功能也很丰富,看了半天也看不懂,哎,我们这种菜鸟也只适合几十行的代码了,所以就写了个几十行的代码,原则就是:简单适用,别人一看就懂,至少思路很简单。。
说明:样式和菜单的组织格式是参考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'> </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 +"' οnclick='" + _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"> </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'> </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 +"' οnclick='" + _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>