首页 > 技术文章 > js实现鼠标右键自定义菜单(弹出层),并与树形菜单(TreeView)、iframe合用(兼容IE、Firefox、Chrome)

elves 2014-03-06 10:40 原文

<table class="oa-el-panel-tree">
                    <tr>
                        <td style="vertical-align: top; width: 189px; position: relative" class="oa-el-panel-tree-line oa-el-panel-tree-view"
                            onmousedown="floatMenuClass.righthit(event,this)" oncontextmenu="return false">
                            <div id="divTreeView" style="overflow: auto; width: 189px; min-height: 350px;" class="oa-el-panel-tree-view">
                                <asp:TreeView ID="TreeViewFlowBase" runat="server" OnSelectedNodeChanged="TreeViewFlowBase_SelectedNodeChanged"
                                    ShowLines="True">
                                </asp:TreeView>
                                <input type="hidden" id="hidSelVal" runat="server" />
                                <div id="floatMenu">
                                    <ul>
                                        <li onclick="floatMenuClass.alter()" title="修改该岗位">&nbsp;</li>
                                        <li onclick="floatMenuClass.add()" title="增加岗位">&nbsp;</li>
                                        <li onclick="floatMenuClass.permissions()" title="该岗位权限设置">&nbsp;</li>
                                        <li onclick="floatMenuClass.del()" title="删除该岗位">&nbsp;</li>
                                        <li onclick="floatMenuClass.reload()" title="刷新菜单">&nbsp;</li>
                                        <li onclick="floatMenuClass.close()" title="关闭右键菜单">&nbsp;</li>
                                    </ul>
                                </div>
                            </div>
                        </td>
                        <td style="vertical-align: top;" class="oa-el-panel-tree-line">
                            <div>
                                <iframe id="iframeOne" name="iframeOne" scrolling="auto" src="CurUser.aspx" width="900px"
                                    height="500px"></iframe>
                            </div>
                        </td>
                    </tr>
                </table>

 

<script type="text/javascript">
        /**2014-3-5 HY**/
        $(function () {
            setTimeout(function () {
                var w = $(window).width();
                var h = $(window).height();
                $('#iframeOne').animate({ height: h - 60 }, 500)
                $('#iframeOne').animate({ width: w - 212, height: h - 60 }, 500);
            }, 1);
        })
        $(window).resize(function () {
            setTimeout(function () {
                var w = $(window).width();
                var h = $(window).height();
                $('#iframeOne').animate({ height: h - 60 }, 500)
                $('#iframeOne').animate({ width: w - 212, height: h - 60 }, 500);
            }, 1);
        })

        var floatMenuClass =
        {
            objVal: null, //实时监控值
            objValRecord: null, //记录值
            menuObj: $("a[id]", $("#TreeViewFlowBase")), //菜单父节点全部对象
            righthit: function (ev, obj) {//控制右键菜单
                if (ev.button == 2) {
                    //this.end();
                    var mousePos = new this.mouseCoords(ev, obj);
                    var x = mousePos.x;
                    var y = mousePos.y;
                    x += 20;
                    y -= 7;
                    $("#floatMenu").css({ left: x + "px", top: y + "px" });

                    var menu = $("#floatMenu ul li");
                    if (!this.objVal) {//控制 修改、设置、删除 操作
                        $(menu[0]).hide();
                        $(menu[2]).hide();
                        $(menu[3]).hide();
                    }
                    else {
                        if ($("#floatMenu ul li:first").is(":hidden")) {
                            $(menu[0]).show();
                            $(menu[2]).show();
                            $(menu[3]).show();
                        }
                    }
                    this.open();
                }
            },
            mouseCoords: function (ev, obj) {//获取鼠标位置
                if (navigator.userAgent.indexOf("MSIE") > 0) {//$.browser.msie
                    this.x = ev.clientX - obj.offsetLeft;
                    this.y = ev.clientY - obj.offsetTop;
                }
                else {
                    this.x = ev.pageX;
                    this.y = ev.pageY;
                }
            },
            reload: function () {
                location.href = "The_title_manage.aspx";
                //location.reload();
            },
            close: function () {
                $("#floatMenu").hide(600);
                this.objVal = null;
                //this.start();
            },
            open: function () {
                $("#floatMenu").show(600);
            },
            alter: function () {//修改操作
                var txtLink = "the_title_Edit.aspx";
                txtLink += "?sub=" + $("#hidSelVal").val();
                txtLink += "&depart=" + encodeURIComponent($(this.objValRecord).text());
                this.gotoWin(txtLink);
                this.close();
            },
            add: function () {//增加操作
                this.gotoWin("the_title_Edit.aspx");
                this.close();
            },
            del: function () {//删除操作
                var txtDepart = $(this.objValRecord).text();
                if (confirm("您确定删除[" + txtDepart + "]该岗位?")) {
                    var txtLink = "the_title_Edit.aspx";
                    txtLink += "?sub=" + $("#hidSelVal").val();
                    txtLink += "&depart=" + encodeURIComponent(txtDepart);
                    txtLink += "&opt=del";
                    this.gotoWin(txtLink);
                    //$(this.objVal).click();
                }
                this.close();
            },
            gotoWin: function (strUrl) {//在框架中打开页面
                var a = document.createElement("a");
                a.setAttribute("href", strUrl);
                a.style.display = "none";
                a.setAttribute("target", "iframeOne");
                document.body.appendChild(a);
                if (document.all) {
                    a.click();
                }
                else {
                    var evt = document.createEvent("MouseEvents");
                    evt.initEvent("click", true, true);
                    a.dispatchEvent(evt);
                }
            },
            permissions: function () {//打开权限页面
                var txtLink = "UserPermissionSet.aspx";
                txtLink += "?sub=" + $("#hidSelVal").val();
                txtLink += "&depart=" + encodeURIComponent($(this.objValRecord).text());
                this.gotoWin(txtLink);
                this.close();
            },
            start: function () {//鼠标移入菜单记录值
                this.menuObj.hover(
                                                function () {
                                                    if ($("#floatMenu").is(":hidden")) {//该层隐藏时记录
                                                        floatMenuClass.objVal = this;
                                                        floatMenuClass.objValRecord = this;
                                                    }
                                                },
                                                 function () {
                                                     floatMenuClass.objVal = null;
                                                 });

            },
            main: function () {
                this.menuObj.mousedown(function (event) {//右键点击菜单记录值
                    if (event.button == 2) {
                        floatMenuClass.objVal = this;
                        floatMenuClass.objValRecord = this;
                    }
                })
            },
            end: function () {
                this.menuObj.unbind("mouseenter").unbind("mouseleave");
            },
            setValue: function (event) {
                if (event.button == 2) {
                    floatMenuClass.objVal = this;
                    floatMenuClass.objValRecord = this;
                }
            },
            init: $(function () {
                floatMenuClass.main();
                floatMenuClass.start();
            })
        }
    </script>

 

 

 /// <summary>
    /// 加载树信息
    /// </summary>
    public void LoadTree(string ids)
    {
        TreeViewFlowBase.Nodes.Clear();
        BLL.the_title tt = new BLL.the_title();
        BLL.Sys_cur_user user = new BLL.Sys_cur_user();

        DataTable dtbt = tt.GetList("substoreid='" + ids + "'");
        DataSet ds = user.GetAllList("substoreid='" + ids + "'");
        if (dtbt != null)
        {
            foreach (DataRow row in dtbt.Select("", "the_sort desc"))
            {
                TreeNode tn = new TreeNode();
                tn.Text = row["the_name"].ToString();
                tn.Value = row["substoreid"].ToString();
                tn.ToolTip = "职称";

                tn.ImageUrl = "~/images/list_dbsy.gif";
                tn.Target = "iframeOne";
                tn.NavigateUrl = "the_title_Edit.aspx?sub=" + row["substoreid"].ToString() + "&depart=" + Server.UrlEncode(row["the_name"].ToString());

                foreach (DataRow dr in ds.Tables[0].Select("depart='" + row["the_name"].ToString() + "'"))
                {
                    TreeNode tnChild = new TreeNode();
                    tnChild.Text = dr["user_name"].ToString();
                    tnChild.Value = dr["user_code"].ToString();
                    tnChild.ToolTip = "员工";

                    tnChild.ImageUrl = "~/images/list_zxxx.gif";
                    //设置子节点不能点击
                    tnChild.SelectAction = TreeNodeSelectAction.None;
                    tn.ChildNodes.Add(tnChild);
                }

                TreeViewFlowBase.Nodes.Add(tn);
            }
        }
    }

 

推荐阅读