js代码,需要js库支持,也可以自己写成js的
var contextMenuPanel='<div id ="contextMenu" style="display:none;position: absolute;z-index: 1000; " class="tan_divc"></div>'; //右键菜单div var 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)" οnclick="'+jsonArr[i]["doFun"]+';doSth();return false;">'+jsonArr[i]["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可以为""
效果: