效果图如下

代码如下

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 

1 /* 2  * version : 1.0.1 3  * site    : ******************* 4  * author  : Jerry(http://www.cnblogs.com/webdesign-Jerry/) 5  * date    : 2013/01/18 6  * email   : jerry_webdesign@msn.cn 7  */ 8  9 ;(function($){    10     $.extend($,{11         showRightMenu:function(options){12             var options  = $.extend(true,{menuList:[]},options);    13             var $menuList=options.menuList;14             var menu={15                 init:function(){16                     this.length=$menuList.length;17                     $(document).bind('mousedown',this.mouseDownOnDocument);18                 },19                 mouseDownOnDocument:function(e){20                     e.stopPropagation();21                     var which=e.which;22                     var x=e.pageX+5;23                     var y=e.pageY+5;24                     var id=$(e.target).parents('ul').parent().attr('id');25                     if(which==3){26                         menu.showMenu(x,y);27                         document.οncοntextmenu=function(){28                             return false;    29                         };30                     }else if(which==1&&id!='rightMenu'){31                         menu.removeMenu();    32                     };33                 },34                 showMenu:function(a,b){35                     if($('#rightMenu').length<=0){36                         $('body').append('
     
      
     
');37                         var str='';38                         for(var i=0;i
     
      '+$menuList[i].menuName+'';40                         };41                         $('#rightMenu ul').append(str);    42                     }43                     var W=$(window).width();44                     var H=$(window).height();45                     var w=$('#rightMenu').outerWidth(true);46                     var h=$('#rightMenu').outerHeight(true);47                     a+w>=W?a-=w+5:a;48                     b+h>=H?b-=h+5:b;49                     $('#rightMenu').css({'left':a,'top':b});50                     $('#rightMenu ul li a').click(function(){51                         var index=$(this).parent().index();52                         menu.callBack(index);    53                     });54                 },55                 callBack:function(a){56                     $menuList[a].callBack();57                     menu.removeMenu();    58                 },59                 removeMenu:function(){60                     $('#rightMenu').remove();61                 }62             };63             menu.init();64         }    65     });66 })(jQuery);
     

1 /* rightMenu */2 #rightMenu{
    width:120px; background:#aaa;padding:0px 2px 2px 0px; position:absolute; z-index:9999;}3 #rightMenu ul{
   border:solid 1px #999; padding:0px 1px; background:#f7f7f7;margin:-2px 0px 0px -2px;}4 #rightMenu ul li{
    border-bottom:solid 1px #eee;border-top:solid 1px #fff; line-height:28px;}5 #rightMenu ul li a{
    display:block; padding:0px 10px;}6 #rightMenu ul li a:hover{
    background:#aaa; color:#fff; text-decoration:none;}

 调用如下

1 ;(function($){ 2      3     //右键菜单 4     $.showRightMenu({ 5         menuList:[ 6             {menuName:'菜单栏目1',callBack:function(){ console.log(11);}}, 7             {menuName:'菜单栏目2',callBack:function(){ console.log(22);}}, 8             {menuName:'菜单栏目3',callBack:function(){ console.log(33);}}, 9             {menuName:'菜单栏目4',callBack:function(){ console.log(44);}},10             {menuName:'菜单栏目5',callBack:function(){ console.log(55);}}11         ]    12     });13 })(jQuery)