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

来源：互联网发布：网络模拟大乐透摇奖机编辑：程序博客网时间：2024/04/19 10:58

操作环境: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);
        }

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

判断是否是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

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;



}

页面引用