漂亮的Javascript右键菜单小功能【原创】

操作环境:Visual Studio.Net2003
操作系统:window Xp SP2

如果您有任何意见,请留下您宝贵的意见以便告知

右键菜单网上一搜一大把，用起来不是很方便，自己偷懒写了个简单的，看了163上的右键菜单蛮漂亮的，自己也做了一个用在DataGrid上，看上去跟它很象，功能主要根据需求自己加，代码在最下面部分

实现起来很简单，主要就是创建DIV和隐藏DIV，加上css就很容易的实现了，为了方便，全部写在了JS文件中，引用这个js，不需要写代码就可以 

主要实现如下:

当页面加载的时候调用右键菜单方法：

window.onload  =  ShowRightMenu

ShowRightMenu函数:

    function ShowRightMenu()
            {
                 if ($( " div_RightMenu " )  ==   null )
                {    
                    CreateMenu();   //如果右键菜单不存在，则创建
                    document.oncontextmenu  =  ShowMenu
                    document.body.onclick   =  HideMenu    
                }
                 else
                {
                    document.oncontextmenu  =  ShowMenu
                    document.body.onclick   =  HideMenu    
                }    
            }

 CreateMenu()函数:

        function CreateMenu()
        {    
                var div_Menu           =  document.createElement( " Div " );
                div_Menu.id            =   " div_RightMenu " ;
                div_Menu.className     =   " div_RightMenu " ;
                
                var div_Menu1           =  document.createElement( " Div " );
                div_Menu1.className    =   " divMenuItem " ;
                div_Menu1.onclick      =  evtMenu1;
                div_Menu1.onmousemove  =  evtMenuOnmouseMove;
                div_Menu1.onmouseout   =  evtOnMouseOut;
                div_Menu1.innerHTML    =   " 我的首页 " ;
                
                var div_Menu2           =  document.createElement( " Div " );
                div_Menu2.className    =   " divMenuItem " ;
                div_Menu2.onclick      =  evtMenu2;
                div_Menu2.onmousemove  =  evtMenuOnmouseMove
                div_Menu2.onmouseout   =  evtOnMouseOut
                div_Menu2.innerHTML    =   " 删除记录 " ;
                
                var div_Menu3           =  document.createElement( " Div " );
                div_Menu3.className    =   " divMenuItem " ;
                div_Menu3.onmousemove  =  evtMenuOnmouseMove;
                div_Menu3.onmouseout   =  evtOnMouseOut;
                div_Menu3.innerHTML    =   " 详细信息 " ;
                
                var div_Menu4           =  document.createElement( " Div " );
                div_Menu4.className    =   " divMenuItem " ;
                div_Menu4.onmousemove  =  evtMenuOnmouseMove;
                div_Menu4.onmouseout   =  evtOnMouseOut;
                div_Menu4.innerHTML    =   " 刷新 " ;
                
                var Hr1         =  document.createElement( " Hr " );
                
                var div_Menu5           =  document.createElement( " Div " );
                div_Menu5.className    =   " divMenuItem " ;
                div_Menu5.onmousemove  =  evtMenuOnmouseMove;
                div_Menu5.onmouseout   =  evtOnMouseOut;
                div_Menu5.innerHTML    =   " 加入收藏夹 " ;
                
                var div_Menu6           =  document.createElement( " Div " );
                div_Menu6.className    =   " divMenuItem " ;
                div_Menu6.onmousemove  =  evtMenuOnmouseMove;
                div_Menu6.onmouseout   =  evtOnMouseOut;
                div_Menu6.innerHTML    =   " 复制 " ;
                
                var div_Menu7           =  document.createElement( " Div " );
                div_Menu7.className    =   " divMenuItem " ;
                div_Menu7.onmousemove  =  evtMenuOnmouseMove;
                div_Menu7.onmouseout   =  evtOnMouseOut;
                div_Menu7.innerHTML    =   " 全选 " ;
                
                var Hr2         =  document.createElement( " Hr " );
                
                var div_Menu8           =  document.createElement( " Div " );
                div_Menu8.className    =   " divMenuItem " ;
                div_Menu8.onmousemove  =  evtMenuOnmouseMove;
                div_Menu8.onmouseout   =  evtOnMouseOut;
                div_Menu8.innerHTML    =   " 联系作者 " ;
                
                var div_Menu9           =  document.createElement( " Div " );
                div_Menu9.className    =   " divMenuItem " ;
                div_Menu9.onmousemove  =  evtMenuOnmouseMove;
                div_Menu9.onmouseout   =  evtOnMouseOut;
                div_Menu9.innerHTML    =   " 关于此功能 " ;
                
                var div_Menu10            =  document.createElement( " Div " );
                div_Menu10.className    =   " divMenuItem " ;
                div_Menu10.style.marginBottom  =    0 ;
                div_Menu10.onmousemove  =  evtMenuOnmouseMove;
                div_Menu10.onmouseout   =  evtOnMouseOut;
                div_Menu10.innerHTML    =   " 属性 " ;
                
                
                div_Menu.appendChild(div_Menu1);
                div_Menu.appendChild(div_Menu2);
                div_Menu.appendChild(div_Menu3);
                div_Menu.appendChild(div_Menu4);
                div_Menu.appendChild(Hr1);
                
                div_Menu.appendChild(div_Menu5);
                div_Menu.appendChild(div_Menu6);
                div_Menu.appendChild(div_Menu7);
                div_Menu.appendChild(Hr2);
                
                div_Menu.appendChild(div_Menu8);
                div_Menu.appendChild(div_Menu9);
                div_Menu.appendChild(div_Menu10);

                document.body.appendChild(div_Menu);
        }

右键菜单中的菜单的一些事件极其样式:

         function  evtMenu1()
        {    
            HideMenu();
            alert( ' Menu1 ' );
        }
        
         function  evtMenu2()
        {    
            HideMenu();
        }
        
        
        
         function  evtMenuOnmouseMove()
        {
             this .style.backgroundColor = ' #8AAD77 ' ;
             this .style.paddingLeft = ' 30px ' ;    
        }
        
         function  evtOnMouseOut()
        {
             this .style.backgroundColor = ' #FAFFF8 ' ;
        }

判断是否是IE：

             //  判断客户端浏览器
             function  IsIE() 
            {
                 if  (navigator.appName == " Microsoft Internet Explorer " ) 
                {
                     return   true ;
                } 
                 else  
                {
                     return   false ;
                }
            }

隐藏菜单和便利函数：

             function  HideMenu()
            {
                 if  (IsIE()) $( " div_RightMenu " ).style.display = " none " ;    
            }
            
             function  $(gID)
            {
                 return  document.getElementById(gID);
            }

        

很简单，

为了更方便，

本打算上传代码，提供下载的，似乎上传出了问题，总是报黄页错误，真的很恶心，

只能直接贴出来了，copy下就可以了

=================================================================

以下是完整代码程序:

jsRightMenu.js

        window.onload  =  ShowRightMenu
    
         function  evtMenu1()
        {    
            HideMenu();
            alert( ' Menu1 ' );
        }
        
         function  evtMenu2()
        {    
            HideMenu();
        }
        
        
        
         function  evtMenuOnmouseMove()
        {
             this .style.backgroundColor = ' #8AAD77 ' ;
             this .style.paddingLeft = ' 30px ' ;    
        }
        
         function  evtOnMouseOut()
        {
             this .style.backgroundColor = ' #FAFFF8 ' ;
        }
        
    
         function  CreateMenu()
        {    
                 var  div_Menu           =  document.createElement( " Div " );
                div_Menu.id            =   " div_RightMenu " ;
                div_Menu.className     =   " div_RightMenu " ;
                
                 var  div_Menu1           =  document.createElement( " Div " );
                div_Menu1.className    =   " divMenuItem " ;
                div_Menu1.onclick      =  evtMenu1;
                div_Menu1.onmousemove  =  evtMenuOnmouseMove;
                div_Menu1.onmouseout   =  evtOnMouseOut;
                div_Menu1.innerHTML    =   " 我的首页 " ;
                
                 var  div_Menu2           =  document.createElement( " Div " );
                div_Menu2.className    =   " divMenuItem " ;
                div_Menu2.onclick      =  evtMenu2;
                div_Menu2.onmousemove  =  evtMenuOnmouseMove
                div_Menu2.onmouseout   =  evtOnMouseOut
                div_Menu2.innerHTML    =   " 删除记录 " ;
                
                 var  div_Menu3           =  document.createElement( " Div " );
                div_Menu3.className    =   " divMenuItem " ;
                div_Menu3.onmousemove  =  evtMenuOnmouseMove;
                div_Menu3.onmouseout   =  evtOnMouseOut;
                div_Menu3.innerHTML    =   " 详细信息 " ;
                
                 var  div_Menu4           =  document.createElement( " Div " );
                div_Menu4.className    =   " divMenuItem " ;
                div_Menu4.onmousemove  =  evtMenuOnmouseMove;
                div_Menu4.onmouseout   =  evtOnMouseOut;
                div_Menu4.innerHTML    =   " 刷新 " ;
                
                 var  Hr1         =  document.createElement( " Hr " );
                
                 var  div_Menu5           =  document.createElement( " Div " );
                div_Menu5.className    =   " divMenuItem " ;
                div_Menu5.onmousemove  =  evtMenuOnmouseMove;
                div_Menu5.onmouseout   =  evtOnMouseOut;
                div_Menu5.innerHTML    =   " 加入收藏夹 " ;
                
                 var  div_Menu6           =  document.createElement( " Div " );
                div_Menu6.className    =   " divMenuItem " ;
                div_Menu6.onmousemove  =  evtMenuOnmouseMove;
                div_Menu6.onmouseout   =  evtOnMouseOut;
                div_Menu6.innerHTML    =   " 复制 " ;
                
                 var  div_Menu7           =  document.createElement( " Div " );
                div_Menu7.className    =   " divMenuItem " ;
                div_Menu7.onmousemove  =  evtMenuOnmouseMove;
                div_Menu7.onmouseout   =  evtOnMouseOut;
                div_Menu7.innerHTML    =   " 全选 " ;
                
                 var  Hr2         =  document.createElement( " Hr " );
                
                 var  div_Menu8           =  document.createElement( " Div " );
                div_Menu8.className    =   " divMenuItem " ;
                div_Menu8.onmousemove  =  evtMenuOnmouseMove;
                div_Menu8.onmouseout   =  evtOnMouseOut;
                div_Menu8.innerHTML    =   " 联系作者 " ;
                
                 var  div_Menu9           =  document.createElement( " Div " );
                div_Menu9.className    =   " divMenuItem " ;
                div_Menu9.onmousemove  =  evtMenuOnmouseMove;
                div_Menu9.onmouseout   =  evtOnMouseOut;
                div_Menu9.innerHTML    =   " 关于此功能 " ;
                
                 var  div_Menu10            =  document.createElement( " Div " );
                div_Menu10.className    =   " divMenuItem " ;
                div_Menu10.style.marginBottom  =    0 ;
                div_Menu10.onmousemove  =  evtMenuOnmouseMove;
                div_Menu10.onmouseout   =  evtOnMouseOut;
                div_Menu10.innerHTML    =   " 属性 " ;
                
                
                div_Menu.appendChild(div_Menu1);
                div_Menu.appendChild(div_Menu2);
                div_Menu.appendChild(div_Menu3);
                div_Menu.appendChild(div_Menu4);
                div_Menu.appendChild(Hr1);
                
                div_Menu.appendChild(div_Menu5);
                div_Menu.appendChild(div_Menu6);
                div_Menu.appendChild(div_Menu7);
                div_Menu.appendChild(Hr2);
                
                div_Menu.appendChild(div_Menu8);
                div_Menu.appendChild(div_Menu9);
                div_Menu.appendChild(div_Menu10);

                document.body.appendChild(div_Menu);
        }
        
        
            
            
             function  ShowRightMenu()
            {
                 if ($( " div_RightMenu " )  ==   null )
                {    
                    CreateMenu();
                    document.oncontextmenu  =  ShowMenu
                    document.body.onclick   =  HideMenu    
                }
                 else
                {
                    document.oncontextmenu  =  ShowMenu
                    document.body.onclick   =  HideMenu    
                }    
            }
            
             //  判断客户端浏览器
             function  IsIE() 
            {
                 if  (navigator.appName == " Microsoft Internet Explorer " ) 
                {
                     return   true ;
                } 
                 else  
                {
                     return   false ;
                }
            }
            
             function  ShowMenu()
            {
                 if  (IsIE())
                {
                    document.body.onclick   =  HideMenu;
//               $("hideMenu_DeleteRow").value = parm;
                    
                    
                     var  redge = document.body.clientWidth - event.clientX;
                     var  bedge = document.body.clientHeight - event.clientY;
                     var  menu  =  $( " div_RightMenu " );
                     if  (redge < menu.offsetWidth)
                    {
                        menu.style.left = document.body.scrollLeft  +  event.clientX - menu.offsetWidth
                    }
                     else
                    {
                        menu.style.left = document.body.scrollLeft  +  event.clientX
                         // 这里有改动
                 //         menu.style.visibility = "visible";//页面底端突出
                        menu.style.display  =   " block " ;
                    }
                     if  (bedge < menu.offsetHeight)
                    {
                        menu.style.top = document.body.scrollTop  +  event.clientY  -  menu.offsetHeight
                    }
                     else
                    {
                        menu.style.top  =  document.body.scrollTop  +  event.clientY
                 //         menu.style.visibility = "visible";
                        menu.style.display  =   " block " ;
                    }
                }
                 return   false ;
            }
            
            
             function  HideMenu()
            {
                 if  (IsIE()) $( " div_RightMenu " ).style.display = " none " ;    
            }
            
             function  $(gID)
            {
                 return  document.getElementById(gID);
            }

        

css.css

.div_RightMenu
{
    z-index : 30000 ;
    text-align : left ;     
    cursor :  default ;
    position :  absolute ;
    background-color : #FAFFF8 ;
    width : 160px ;
    height : auto ;
    border :  1px solid #333333 ;
    display : none ;

    filter : progid:DXImageTransform.Microsoft.Shadow(Color=#333333,Direction=120,strength=5) ;     
}

.divMenuItem
{
    height : 17px ;
    color : Black ;
    font-family : 宋体 ;
    vertical-align : middle ;
    font-size : 10pt ;
    margin-bottom : 3px ;
    cursor : hand ;
    padding-left : 30px ;
    padding-top : 2px ;
    

    
}

页面引用

< link  href ="css.css"  type ="text/css"  rel ="stylesheet" >
  < script  language ="javascript"  src ="jsRightMenu.js" ></ script >