js实现鼠标右键自定义菜单(弹出层),并与树形菜单(TreeView)、iframe合用(兼容IE、Firefox、Chrome)
<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="修改该岗位">修 改</li> <li onclick="floatMenuClass.add()" title="增加岗位">增 加</li> <li onclick="floatMenuClass.permissions()" title="该岗位权限设置">设 置</li> <li onclick="floatMenuClass.del()" title="删除该岗位">删 除</li> <li onclick="floatMenuClass.reload()" title="刷新菜单">刷 新</li> <li onclick="floatMenuClass.close()" title="关闭右键菜单">关 闭</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); } } }