Js实现右键菜单示例

var meter1 =null;
$(function(){
　　document.oncontextmenu=function(){return false;}//屏蔽浏览器自带右键
});

$(function(){

　　document.onmousemove=mouseMove;
　　//记录鼠标位置
　　$("#deptTree").css("height",(document.body.clientHeight - 70) + "px");
　　$("#dept").css(
　　　　{
　　　　　　"width":(document.body.clientWidth -220) + "px",
　　　　　　"height":(document.body.clientHeight - 70) + "px"
　　　　}
　　);
});

var mx=0,my=0;
function mouseMove(ev){

　　Ev=ev||window.event;

　　var mousePos=mouseCoords(Ev);

　　mx=mousePos.x;

　　my=mousePos.y;

}

function mouseCoords(ev){
　　if(ev.pageX||ev.pageY){
　　　　return{x:ev.pageX,y:ev.pageY};
　　}
　　return{x:ev.clientX,y:ev.clientY+$(document).scrollTop()};
}

function rightmenu(id,options){
　　if(meter1){
　　　　clearTimeout(meter1);
　　}
　　options = $.extend({menuList:[]},options);
　　var menuCount=options.menuList.length;
　　$(".div_RightMenu").css("display","none");
　　if (!$("#"+id)[0]){
　　　　var divMenuList="<div id=\""+id+"\" class=\"div_RightMenu\"><div><ul class='ico'>";
　　　　for(var i=0;i<menuCount;i++){
　　　　　　divMenuList+="<li class=\"RMli_"+options.menuList[i].menuclass+"\" onclick=\""+options.menuList[i].clickEvent+"\">"+options.menuList[i].menuName+"　　　　　　　　　　　　　　　</li>";
　　　　}
　　　　divMenuList += "</ul></div><div>";
　　　　$("body").append(divMenuList).find("#"+id).hide().find("li").bind("mouseover",function(){
　　　　　　　　$(this).addClass("RM_mouseover");
　　　　　　}).bind("mouseout",function(){
　　　　　　　　$(this).removeClass("RM_mouseover");
　　　　});
　　　　$(document).click(function(){
　　　　　　$("#"+id).hide();
　　　　});

　　}


　　var mw=$('body').width(),
　　mhh=$('html').height(),
　　mbh=$('body').height(),

　　w=$('#'+id).width(),
　　h=$('#'+id).height(),
　　mh=(mhh>mbh)?mhh:mbh;
　　//最大高度 比较html与body的高度
　　if(mh<h+my){my=my-h;}
　　//超 高
　　if(mw<w+mx){mx=mx-w;}
　　//超 宽
　　$("#"+id).hide().css({top:my,left:mx}).show();

　　meter1 = setTimeout(function(){$("#"+id).hide();}, 5000);
}

 

 

 

右键菜单的样式：

document.write("<style type='text/css'>");
document.write(".div_RightMenu{ position:absolute; list-style:none;width:100px; font-size:12px;}");
document.write(".div_RightMenu div{background:#bbb;position:relative;}");
document.write(".div_RightMenu ul{position:relative;background:#fff; border:1px solid #999;left:-2px;top:-2px; margin:0; padding:1px 0;}");
document.write(".div_RightMenu ul li{ list-style:none; margin:0 1px;padding:0;line-height:20px;height:20px;text-indent:10px; background-repeat:no-repeat;cursor:pointer;border-width:1px;border-style:solid;border-color:#fff;}");
document.write(".div_RightMenu ul li.RM_mouseover{ background-color:#B6BDD2; border-color:#0A246A;}");
document.write("</style>");

 

 

在页面中调用右键菜单：

$(function() {
　　$('#deptTree').tree({
　　　　url : 'departOrPerson.action?type=dept',
　　　　Style : function(index, row) {
　　　　　　return 'background-color:pink;color:blue;font-weight:bold;';
　　　　},

　　　　onClick : function(node) {
　　　　　　$("#deptname").val("");
　　　　　　loadifrDept(node.id);

　　　　},
　　　　onContextMenu:function(e,node){
　　　　　　rightmenu(
　　　　　　　　'myMenu' + node.id + '',
　　　　　　　　{menuList : [{
　　　　　　　　　　　　menuName : "修改",
　　　　　　　　　　　　clickEvent : "alterDept('" + node.id + "')"
　　　　　　　　　　},{
　　　　　　　　　　　　menuName : "删除",
　　　　　　　　　　　　clickEvent : "deleteDept('" + node.id + "','" + node.text + "')"
　　　　　　　　　　}]
　　　　　　});
　　　　}
　　　　stopDefault(e);
　　　　},
　　});

 

function stopDefault( e ) { 

　　　//阻止默认浏览器动作(W3C)
　　if ( e && e.preventDefault )
　　　　e.preventDefault();
　　　//IE中阻止函数器默认动作的方式
　　else
　　　　window.event.returnValue = false;
　　return false;
}