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[].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);
}
}
}
js实现鼠标右键自定义菜单(弹出层),并与树形菜单(TreeView)、iframe合用(兼容IE、Firefox、Chrome)的更多相关文章
- layer.js,,,分享一个好用的弹出层
基本属性: <!DOCTYPE html> <html> <head> <head> <meta content="text/html; ...
- 微信小程序之 动画 —— 自定义底部弹出层
wxml: <view class='buy' bindtap='showBuyModal'>立即购买</view> <!-- 点击立即购买 弹出购买遮罩层 --> ...
- easyui弹出层在最顶层显示跳出iframe框架通用javascript代码
有时候我们用easyui在后台框架中弹框的时候,总是显示在框架页面里面而不是整个系统框架的上面,看着有些不太乐意. dialog = function (opts) { var query = par ...
- js、jQuery、layer实现弹出层的打开、关闭
打开layer layer.open({ type: 2, title: '新增收货地址', shadeClose: true,//点击阴影关闭 shade: 0.8, area: ['900px', ...
- LayUI之弹出层
1.导入插件 layui使用需要导入layui的js和css: <link rel="stylesheet" href="layui/css/layui.css&q ...
- jquery智能弹出层,自己主动推断位置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery WIN 7透明弹出层效果
jQuery WIN 7透明弹出层效果,点击可以弹出一个透明层的jquery特效,插件可以调弹出框的宽度和高度,很不错的一个弹出层插件. 适用浏览器:IE8.360.FireFox.Chrome.Sa ...
- 使用jsonp跨域调用百度js实现搜索框智能提示,并实现鼠标和键盘对弹出框里候选词的操作【附源码】
项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择.使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript ...
- 【position也可以很复杂】当弹出层遇上了鼠标定位(下)
前言 接着昨天的内容写,为了保证内容连续性,这里还是把昨天的内容拷了过来. 请用现代浏览器测试 引出问题 有图有真相,我们来看一个智联招聘里面经常出现的图层: 他这个是没有什么问题的,我们来简单看看其 ...
随机推荐
- SQL Serve允许远程连接的解决方法
(一)用户需要做的第一件事是检查SQL数据库服务器中是否允许远程链接.在SQL 2008服务器中可以通过打开SQL Server 2008管理项目(SQL Server 2008 Management ...
- 开源分布式实时计算引擎 Iveely Computing 之 安装部署(2)
在Github中下载代码和二进制程序中,您都会看到一个bin\iveely computing目录,里面即是Iveely Computing的运行库. 以前总是有 ...
- Object C学习笔记20-结构体
在学习Object C中的过程中,关于struct的资料貌似非常少,查阅了C方面的资料总结了一些学习心得! 一. 定义结构 结构体是一种数据类型的组合和数据抽象.结构体的定义语法如下: struct ...
- php并发请求
一般在php进行请求url的时候,直接用 fopen 函数就可以搞定了,比如像这样: $file=fopen("http://www.cnblogs.com","r&qu ...
- JSP/SERVLET入门教程--Servlet 使用入门
现在的JSP书籍有的是直接讲述JSP的使用,然后再讲解SERVERLET的使用;也有书籍是先讲述SERVERLET的使用,然后讲解JSP使用.个人认为第二种相对好一些,至于原因大家可以在学习体会到!所 ...
- hdu3746 KMP
这题琢磨了挺长的时间.需要理解next[]表示了什么; next[i]代表了前缀和后缀的最大匹配的值,也就是个数. len-next[len]表示循环节的长度; 比如abcab int fl=le ...
- sql-where
查询表时不一定每一次都要将表格内的资料都完全抓出.在许多时候,我们会需要选择性地抓资料.就我们的例子来说,我们可能只要抓出营业额超过 $1,000 的资料. 要做到这一点,需要用到 WHERE 这个指 ...
- Java基础-内部类
在Java中,可以将一个类定义在另一个类里面或者一个方法里面,这样的类称为内部类.广泛意义上的内部类一般来说包括这四种:成员内部类.局部内部类.匿名内部类和静态内部类. 下面就先来了解一下这四种内部类 ...
- 【POJ 3176】Cow Bowling
题 Description The cows don't use actual bowling balls when they go bowling. They each take a number ...
- Android中获取图片的宽和高
在Android中,我们想获取图片的宽和高应该怎么办?一.正常加载图片的方法下获取宽和高 举一个简单的例子:创建一个图片的副本 //加载原图 Bitmap bmSrc = BitmapFactory. ...