简单的右键菜单

Nullin

js代码，需要js库支持，也可以自己写成js的
var contextMenuPanel='<div id ="contextMenu" style="display:none;position: absolute;z-index: 1000; " class="tan_divc"></div>';  //右键菜单divvar eventOwner;//将菜单绑定到元素上 也就是某id下的tag上  例如 id=aa 的div 下面有 span 那么bindContext("aa","span"),就可以让用户点击aa下的span时显示右键菜单function bindContext(id,tag){$("body").append(contextMenuPanel);$("#"+id+" "+tag||"").each(function(){$(this).mousedown(function(e){ e=e||window.event;  e.stopPropagation(); //组织冒泡 if(e.button==2){ eventOwner=this;  showContextMenu(e);  } })})}   //显示菜单 function showContextMenu(event){ $("#contextMenu").fadeIn(400);//显示并确定菜单位置    $("#contextMenu").css("left",event.clientX + document.body.scrollLeft - document.body.clientLeft);    $("#contextMenu").css("top",event.clientY + document.body.scrollTop - document.body.clientTop );     } function doSth(){ hideContextMenu(); } function hideContextMenu(obj){ $("#contextMenu").fadeOut(400); } //初始化菜单 参数传入 json 数组  格式{doFun：'执行方法名（参数）',title:'标题'} function initContextMenu(id,tag,jsonArr){ bindContext(id,tag); //将菜单绑定到元素上  if(jsonArr==null){ jsonArr=[ {doFun:"doSth(this)",title:"新增"}, {doFun:"doSth(this)",title:"修改"}, {doFun:"doSth(this)",title:"删除"}, {doFun:"doSth(this)",title:"上移"}, {doFun:"doSth(this)",title:"下移"}, {doFun:"doSth(this)",title:"升级"}, {doFun:"doSth(this)",title:"降级"}]; } var context="<ul>";  //拼装菜单 for(var i=0;i<jsonArr.length;i++)  context+='<li><a href="javascript:void(0)" doFun"]+';doSth();return false;">'+jsonArr["title"]+'</a></li>' context+="</ul>" //将拼装好的菜单拼入$("#contextMenu").html(context); } 简单的样式调整：
@CHARSET "UTF-8";ul,li{ margin:0px; padding:0px; list-style:none}h1,h2,h3,h4,h5,h6{ margin:0px; padding:0px;}dl,dd,dt{ margin:0px; padding:0px;}img{ border:none}p{ margin:0px;}th,td{ font-size:12px;}form{ margin:0px; padding:0px;}.tan_divc{ background:url(danchu_bg.gif) repeat-y; width:61px; min-height:3px;_height:3px; border:1px solid #d5e2e8}.tan_divc ul{ margin:0px; padding:0px;}.tan_divc ul li{ width:61px;font-size:12px;vertical-align:middle; text-align:center;zoom:1;overflow:hidden; margin:0px; padding:0px; line-height:18px;}.tan_divc ul li A:link {COLOR: #313131; TEXT-DECORATION:none}.tan_divc ul li A:visited {COLOR: #313131; TEXT-DECORATION:none}.tan_divc ul li A:hover {COLOR: #313131; TEXT-DECORATION: none}.tan_divc ul li A:active {COLOR: #313131; TEXT-DECORATION:none}#hx{ background:url(fenge.gif) no-repeat; height:2px; overflow:hidden; width:61px;} 
 
用法：
initContextMenu("navigation","li",[ {doFun:"addNode()",title:"新增"}, {doFun:"modNode()",title:"修改"}, {doFun:"delNode()",title:"删除"}, {doFun:"up()",title:"上移"}, {doFun:"down()",title:"下移"}]); li可以为""
 
 
效果：