`
javaEEdevelop
  • 浏览: 866075 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

js 右键菜单

 
阅读更多

今天有朋友叫我帮他写一个右键菜单,我看中午有空,就把它写了一个,有些代码是别人的,我只是改良了一下,贴在这里,以后自己看也不错啊

这是js代码

// JavaScript Document
 //window.onload = ShowRightMenu
    document.onclick  = HideMenu;
    window.onload=function(){
       
        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)
                {    //$("#bindSrc")
                    CreateMenu();
                   
                    $("bindSrc").oncontextmenu = ShowMenu
                    document.onclick  = HideMenu   
                }
                else
                {
                    alert(2);
                    $("bindSrc").oncontextmenu = ShowMenu
                    document.onclick  = HideMenu   
                }  
               
            }
           
            // 判断客户端浏览器
            function IsIE()
            {
               
                if (navigator.appName=="Microsoft Internet Explorer")
                {
                   
                    return true;
                }
                else
                {
                   
                    return false;
                }
            }
           
            function ShowMenu()
            {
                if (IsIE())
                {
                   
                    document.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=20;  //document.body.scrollLeft + event.clientX-menu.offsetWidth
                    }
                    else
                    {
                        menu.style.left=50  //document.body.scrollLeft + event.clientX
                        //这里有改动
                     //  menu.style.visibility = "visible";//页面底端突出
                        menu.style.display = "block";
                    }
                    if (bedge<menu.offsetHeight)
                    {
                        menu.style.top=100;   //document.body.scrollTop + event.clientY - menu.offsetHeight
                    }
                    else
                    {
                        menu.style.top =150; //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);
            }
            //绑定右键菜单
            function bindMenu(){
               
                    ShowRightMenu();
            }

这是html代码

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>右键菜单</title>
<style type="text/css">
    .div_RightMenu
{
    z-index:30000;
    text-align:left;   
    cursor: default;
    position: absolute;
    background-color:#FAFFF8;
    width:120px;
    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;
   

   
}

</style>

<script type="text/javascript" src="js/jsRightMenu.js"></script>
</head>
<body >
<a href="#" id="bindSrc"  >
    <b>点击右键</b>
</a>
</body>
</html>

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics