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也可以很复杂】当弹出层遇上了鼠标定位(下)
前言 接着昨天的内容写,为了保证内容连续性,这里还是把昨天的内容拷了过来. 请用现代浏览器测试 引出问题 有图有真相,我们来看一个智联招聘里面经常出现的图层: 他这个是没有什么问题的,我们来简单看看其 ...
随机推荐
- Java集合类: Set、List、Map、Queue使用场景梳理
本文主要关注Java编程中涉及到的各种集合类,以及它们的使用场景 相关学习资料 http://files.cnblogs.com/LittleHann/java%E9%9B%86%E5%90%88%E ...
- 微信支付开发-Senparc.Weixin.MP详解
年底了,反而工作更忙了,我从15年11月开始写<1024伐木累>系列小说和爆笑对白,得到了很多身边的技术好友的支持,现在爆笑对白已经有越来越多的朋友一起帮着写段子,整理,包括小说内容的编辑 ...
- Javascript 里的 in
写js的时候需要遍历一个对象的属性,把属性名和属性值都提出来,之前没遇到这种需求,查了一下可以用for in的方式. var obj = { "key1":"value1 ...
- Git.Framework 框架随手记--IIS7运行序列化问题
客户反馈系统又登录不了,这是最近几次连续出现相同的问题,从日志反应情况来看: 日志级别:[info] 日志位置:Git.Framework.Resource.ResourceManager 日志时间: ...
- 第五章:javascript:队列
队列是一种列表,不同的是队列只能在末尾插入元素,在队首删除元素.队列用于存储按顺序排列的数据.先进先出.这点和栈不一样,在栈中,最后入栈的元素反被优先处理.可以将队列想象成银行排队办理业务的人,排队在 ...
- F12调试打开时,出现很多多余内容问题解决
关闭vs2013的browserlink功能即可: <appSettings> <add key="vs:EnableBrowserLink" value=&qu ...
- All thanks
How to make a salad?——Silun Wang 这是一次成功的团队合作,我为所有组员感到骄傲和自豪!感谢你们! 上个学期期末,和@老钱他们一起去五道口吃Pizza,谈到了大三上学期的 ...
- Daily Scrum – 1/4
Meeting Minutes 大家讨论了一下作业的内容,以及用户的反馈,商量了一下长期计划(naive)的完成方式. 好像有些时候用户测试的时候会崩溃,不过我们自己用的时候一直没有出现过,分析可能是 ...
- onethink常用标签的使用示例
首页文章模型列表输出: <article:list name="article" category="2" row="3" order ...
- [Asp.net mvc] 在Asp.net mvc 中使用MiniProfiler
MiniProfiler是Stack Overflow团队设计的一款性能分析的小程序.可以对一个页面本身,及该页面通过直接引用.Ajax.Iframe形式访问的其它页面进行监控,监控内容包括数据库内容 ...