学步园

声明：这里直接从项目代码块中抠出。不便地方，多包涵！有思路和方法指导是本文意图。

前端代码：

<asp:Image ID="imageSetting" runat="server" SkinID="ImageHand" EnableViewState="false" />
                    <div id="set1" runat="server" style="border-left: 1px solid #6593CF; border-top: 1px solid #6593CF;
                        background: #BAD8FF; border-bottom: 3px solid #6593CF; border-right: 3px solid #6593CF;
                        padding: 0px; display: none; z-index: 10; width: 75px; cursor: hand; position: absolute">
                        <table cellpadding="0" cellspacing="0" width="100%" border="0" style="font-size: 9pt;
                            line-height: 20px; background-color: #BAD8FF; padding: 2px;">
                            <tbody>
                                <tr>
                                    <td style="border-right: 1px solid #1B87D7">
                                        <asp:Image ID="imageMenu1" runat="server" />
                                    </td>
                                    <td id="tdSetting" runat="server" class="menu_normal" onmouseover="this.className='menu_over'"
                                        onmouseout="this.className='menu_normal'">
                                        <nobr><asp:Label ID="lblSetting" runat="server" Text="[设置]" ForeColor="Black"></asp:Label></nobr>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="border-right: 1px solid #1B87D7;">
                                        <asp:Image ID="imageMenu2" runat="server" />
                                    </td>
                                    <td id="tdMoveUp" runat="server" class="menu_normal" onmouseover="this.className='menu_over'"
                                        onmouseout="this.className='menu_normal'">
                                        <nobr><asp:Label ID="lblMoveUp" runat="server" Text="[上移]" ForeColor="Black"></asp:Label></nobr>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="border-right: 1px solid #1B87D7">
                                        <asp:Image ID="imageMenu3" runat="server" />
                                    </td>
                                    <td id="tdMoveDown" runat="server" class="menu_normal" onmouseover="this.className='menu_over'"
                                        onmouseout="this.className='menu_normal'">
                                        <nobr><asp:Label ID="lblMoveDown" runat="server" Text="[下移]" ForeColor="Black"></asp:Label></nobr>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

前端Javascript代码：

//菜单
function OnContextMenu(set1ClientID, obj) {
    //window.event.returnValue = false;
    var set1 = document.getElementById(set1ClientID);

    var PY = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    var PX = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;

    set1.style.display = '';
    if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
        set1.style.pixelTop = obj.offsetTop + PY;
        set1.style.pixelLeft = obj.offsetLeft + PX;        
    }
    else {
        set1.style.pixelTop = event.clientY + PY;
        set1.style.pixelLeft = event.clientX + PX;
    }
    if ((set1.offsetTop + set1.offsetHeight) > document.body.scrollTop + document.body.clientHeight) {
        set1.style.pixelTop = set1.offsetTop - (set1.offsetTop + set1.offsetHeight - (document.body.clientHeight + document.body.scrollTop));
    }
    return true;
}

//菜单链接指向
function OptClick(btnClientID) {
    if (document.all) {
        document.getElementById(btnClientID).click();
    }
    else {
        var evt = document.createEvent("MouseEvents");
        evt.initEvent("click", true, true);
        document.getElementById(btnClientID).dispatchEvent(evt);
    }
}

//hiden menu
document.onmousedown = function() {
    var objDiv = document.getElementsByTagName("div");
    for (var i = 0; i < objDiv.length; i++) {
        if (objDiv[i].id != null) {
            if (objDiv[i].id != "") {
                var str = objDiv[i].id.indexOf("_set1");
                if (str != -1) {
                    objDiv[i].style.display = 'none';
                }
            }
        }
    }
}

后端代码：只是个图片路径和js事件注册，你可以直接放在前段页面里。这里直接从项目扣除，没做简要整理O(∩_∩)O~。

imageSetting.ImageUrl = VariableHelper.ApplicationPath + "images/ico/set.gif";
            imageMenu1.ImageUrl = VariableHelper.ApplicationPath + "images/ico/setting.png";
            imageMenu2.ImageUrl = VariableHelper.ApplicationPath + "images/ico/arrow_up.png";
            imageMenu3.ImageUrl = VariableHelper.ApplicationPath + "images/ico/arrow_down.png";

            imageSetting.Attributes.Add("onclick", "OnContextMenu('" + set1.ClientID + "',this);");
            tdSetting.Attributes.Add("onmousedown", "OptClick('" + lnkOperator.ClientID + "')");
            tdMoveUp.Attributes.Add("onmousedown", "OptClick('" + btnMoveUp.ClientID + "')");
            tdMoveDown.Attributes.Add("onmousedown", "OptClick('" + btnMoveDown.ClientID + "')");

----------------------------------------------------------------------------------------------------------------------------------

希望对您有所帮助！

2013年10月07日

Kevin.Chen（二爷）  苏州.太仓

O(∩_∩)O~