首页 > 安全资讯 >

jquery简短右键菜单例子(多浏览器兼容)

12-04-07

不解释, 能看明白 就看, 看不明白 就闪。[javascript] $(function(){document.oncontextmenu=function(){return false;}//屏蔽右键document.onmousemove=mouseMove;//记录鼠标位置});var mx=0,my=0;fun...

不解释, 能看明白 就看, 看不明白 就闪。

 

[javascript] $(function(){ 
document.oncontextmenu=function(){return false;}//屏蔽右键  
document.onmousemove=mouseMove;//记录鼠标位置  
}); 
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()}; 

 
$.fn.extend({RightMenu: function(id,options){options = $.extend({menuList:[]},options);var menuCount=options.menuList.length; 
    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();}); 
    } 
    return this.each(function(){ 
        this.oncontextmenu=function(){ 
            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=mh-h;}//超 高  
            if(mw<w+mx){mx=mw-w;}//超 宽  
            $("#"+id).hide().css({top:my,left:mx}).show(); 
        } 
    }); 
    } 
}); 
$(function(){
document.oncontextmenu=function(){return false;}//屏蔽右键
document.onmousemove=mouseMove;//记录鼠标位置
});
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()};
}

$.fn.extend({RightMenu: function(id,options){options = $.extend({menuList:[]},options);var menuCount=options.menuList.length;
 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();});
 }
 return this.each(function(){
  this.oncontextmenu=function(){
   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=mh-h;}//超 高
   if(mw<w+mx){mx=mw-w;}//超 宽
   $("#"+id).hide().css({top:my,left:mx}).show();
  }
 });
    }
});
不解释, 能看明白 就看, 看不明白 就闪。

 


[css] *{ font-size:12px; margin:0; padding:0;} 
 
.div_RightMenu{ position:absolute; list-style:none;width:100px;} 
.div_RightMenu div{background:#bbb;position:relative;} 
.div_RightMenu ul{position:relative;background:#fff; border:1px solid #999;left:-2px;top:-2px; margin:0; padding:1px 0;} 
.div_RightMenu ul li{ list-style:none; margin:0 1px;padding:0;line-height:20px;height:20px;text-indent:25px;background-image:url(images/t.gif); background-repeat:no-repeat;cursor:pointer;border-width:1px;border-style:solid;border-color:#fff;} 
 
.div_RightMenu ul li.RMli_1{background-position:0 0;} 
.div_RightMenu ul li.RMli_2{background-position:0 -20px;} 
.div_RightMenu ul li.RMli_3{background-position:0 -40px;} 
.div_RightMenu ul li.RMli_4{background-position:0 -60px;} 
.div_RightMenu ul li.RMli_5{background-position:0 -80px;} 
.div_RightMenu ul li.RMli_6{background-position:0 -100px;} 
.div_RightMenu ul li.RMli_7{background-position:0 -120px;} 
.div_RightMenu ul li.RMli_8{background-position:0 -140px;} 
.div_RightMenu ul li.RMli_9{background-position:0 -160px;} 
.div_RightMenu ul li.RMli_10{background-position:0 -180px;} 
.div_RightMenu ul li.RMli_11{background-position:0 -200px;} 
.div_RightMenu ul li.RMli_12{background-position:0 -220px;} 
.div_RightMenu ul li.RMli_13{background-position:0 -240px;} 
.div_RightMenu ul li.RMli_14{background-position:0 -260px;} 
.div_RightMenu ul li.RMli_15{background-position:0 -280px;} 
.div_RightMenu ul li.RMli_16{background-position:0 -300px;} 
 
.div_RightMenu ul li.RM_mouseover{ background-color:#B6BDD2; border-color:#0A246A;} 
 
tr.selected{ background:#B6BDD2;} 
*{ font-size:12px; margin:0; padding:0;}

.div_RightMenu{ position:absolute; list-style:none;width:100px;}
.div_RightMenu div{background:#bbb;position:relative;}
.div_RightMenu ul{position:relative;background:#fff; border:1px solid #999;left:-2px;top:-2px; margin:0; padding:1px 0;}
.div_RightMenu ul li{ list-style:none; margin:0 1px;padding:0;line-height:20px;height:20px;text-indent:25px;background-image:url(images/t.gif); background-repeat:no-repeat;cursor:pointer;border-width:1px;border-style:solid;border-color:#fff;}

.div_RightMenu ul li.RMli_1{background-position:0 0;}
.div_RightMenu ul li.RMli_2{background-position:0 -20px;}
.div_RightMenu ul li.RMli_3{background-position:0 -40px;}
.div_RightMenu ul li.RMli_4{background-position:0 -60px;}
.div_RightMenu ul li.RMli_5{background-position:0 -80px;}
.div_RightMenu ul li.RMli_6{background-position:0 -100px;}
.div_RightMenu ul li.RMli_7{background-position:0 -120px;}
.div_RightMenu ul li.RMli_8{background-position:0 -140px;}
.div_RightMenu ul li.RMli_9{background-position:0 -160px;}
.div_RightMenu ul li.RMli_10{background-position:0 -180px;}
.div_RightMenu ul li.RMli_11{background-position:0 -200px;}
.div_RightMenu ul li.RMli_12{background-position:0 -220px;}
.div_RightMenu ul li.RMli_13{background-position:0 -240px;}
.div_RightMenu ul li.RMli_14{background-position:0 -260px;}
.div_RightMenu ul li.RMli_15{background-position:0 -280px;}
.div_RightMenu ul li.RMli_16{background-position:0 -300px;}

.div_RightMenu ul li.RM_mouseover{ background-color:#B6BDD2; border-color:#0A246A;}

tr.selected{ background:#B6BDD2;}

不解释, 能看明白 就看, 看不明白 就闪。

 


用到了 Jquery, 具体版本 自己 Download 去 。 

 


从中用到了一张 图片如下:

  


 

前台引用:


[html] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>jquery 简短右键菜单</title> 
    <script type="text/javascript" src="script/jquery.js"></script> 
    <script type="text/javascript" src="script/xxxxx.js"></script> 
</head> 
 
<body> 
 
    <div id="divTest">右键菜单显示区域</div> 
 
    <hr color="red" width="100%" size="30"> 
 
    <table class="slist" width="100%" border="1" cellpadding="0" cellspacing="0"> 
        <tr id="T_1"><td>1</td></tr> 
        <tr id="T_2"><td>2</td></tr> 
        <tr id="T_3"><td>3</td></tr> 
        <tr id="T_4"><td>4</td></tr> 
    </table> 
 
 <script type="text/javascript"> 
    $("#divTest,.slist tr").RightMenu('myMenu2',{ 
       menuList:[{menuName:"菜单1",menuclass:"1",clickEvent:"divClick(1)"}, 
        {menuName:"菜单2",menuclass:"2",clickEvent:"divClick(2)"}, 
                {menuName:"菜单3",menuclass:"3",clickEvent: "divClick(3)"}, 
                {menuName:"菜单4",menuclass:"4",clickEvent: "divClick(4)"}, 
                {menuName:"菜单5",menuclass:"5",clickEvent: "divClick(5)"}, 
                {menuName:"菜单6",menuclass:"6",clickEvent: "divClick(6)"}, 
                {menuName:"菜单7",menuclass:"7",clickEvent: "divClick(7)"}, 
                {menuName:"菜单8",menuclass:"8",clickEvent: "divClick(8)"}, 
                {menuName:"菜单9",menuclass:"9",clickEvent: "divClick(9)"}, 
                {menuName:"菜单10",menuclass:"10",clickEvent: "divClick(10)"}, 
                {menuName:"菜单11",menuclass:"11",clickEvent: "divClick(11)"}, 
                {menuName:"菜单12",menuclass:"12",clickEvent: "divClick(12)"}, 
                {menuName:"菜单13",menuclass:"13",clickEvent: "divClick(13)"}, 
                {menuName:"菜单14",menuclass:"14",clickEvent: "divClick(14)"}, 
                {menuName:"菜单15",menuclass:"15",clickEvent: "divClick(15)"}, 
                {menuName:"菜单16",menuclass:"16",clickEvent: "divClick(16)"}, 
                {menuName:"菜单17",menuclass:"17",clickEvent: "divClick(17)"}] 
     }); 
      function divClick(s){ 
    switch(s){ 
      case 1:alert(1);break; 
      case 2:confirm("确定?");break; 
      default:alert(s);break; 
    } 
     } 
</script> 
 
 
 
 
</body> 
</html> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jquery 简短右键菜单</title>
    <script type="text/javascript" src="script/jquery.js"></script>
    <script type="text/javascript" src="script/xxxxx.js"></script>
</head>

<body>

 <div id="divTest">右键菜单显示区域</div>

 <hr color="red" width="100%" size="30">

 <table class="slist" width="100%" border="1" cellpadding="0" cellspacing="0">
  <tr id="T_1"><td>1</td></tr>
  <tr id="T_2"><td>2</td></tr>
  <tr id="T_3"><td>3</td></tr>
  <tr id="T_4"><td>4</td></tr>
 </table>

 <script type="text/javascript">
    $("#divTest,.slist tr").RightMenu('myMenu2',{
       menuList:[{menuName:"菜单1",menuclass:"1",clickEvent:"divClick(1)"},
   {menuName:"菜单2",menuclass:"2",clickEvent:"divClick(2)"},
                {menuName:"菜单3",menuclass:"3",clickEvent: "divClick(3)"},
                {menuName:"菜单4",menuclass:"4",clickEvent: "divClick(4)"},
                {menuName:"菜单5",menuclass:"5",clickEvent: "divClick(5)"},
                {menuName:"菜单6",menuclass:"6",clickEvent: "divClick(6)"},
                {menuName:"菜单7",menuclass:"7",clickEvent: "divClick(7)"},
                {menuName:"菜单8",menuclass:"8",clickEvent: "divClick(8)"},
                {menuName:"菜单9",menuclass:"9",clickEvent: "divClick(9)"},
                {menuName:"菜单10",menuclass:"10",clickEvent: "divClick(10)"},
                {menuName:"菜单11",menuclass:"11",clickEvent: "divClick(11)"},
                {menuName:"菜单12",menuclass:"12",clickEvent: "divClick(12)"},
                {menuName:"菜单13",menuclass:"13",clickEvent: "divClick(13)"},
                {menuName:"菜单14",menuclass:"14",clickEvent: "divClick(14)"},
                {menuName:"菜单15",menuclass:"15",clickEvent: "divClick(15)"},
                {menuName:"菜单16",menuclass:"16",clickEvent: "divClick(16)"},
                {menuName:"菜单17",menuclass:"17",clickEvent: "divClick(17)"}]
     });
      function divClick(s){
  switch(s){
    case 1:alert(1);break;
    case 2:confirm("确定?");break;
    default:alert(s);break;
  }
     }
</script>

 


</body>
</html>

 

 


Over!!!!


 

摘自  SongYanJun2011
 
相关文章
最新文章
热点推荐