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也可以很复杂】当弹出层遇上了鼠标定位(下)
前言 接着昨天的内容写,为了保证内容连续性,这里还是把昨天的内容拷了过来. 请用现代浏览器测试 引出问题 有图有真相,我们来看一个智联招聘里面经常出现的图层: 他这个是没有什么问题的,我们来简单看看其 ...
随机推荐
- 我是如何自学Android,资料分享(2015 版)
自己学了两三个月的Android,最近花了一周左右的时间写了个App——Diigoer(已开源),又花了一两周时间找工作,收到了两个Offer,也算是对自己学习的一种认可吧:我刚开始学习总结的——&l ...
- 浅析C#中的“==”和Equals
1.“==”和Equals两个真的有关联吗? 对于“==”和Equals大多数网友都是这样总结的: “==” 是比较两个变量的值相等. Equals是比较两个变量是否指向同一个对象. 如:这篇文章,并 ...
- ios上uiwebview的一些实用技巧
前几个星期接到公司一个项目,要用webview在客户端上播视频,作为一个前端实习生,这种需求真是蛋疼……一不知webview是何方神圣,二不知咋调试…… 下面就是蛋疼的开始: 寻找调试工具:好,非w ...
- Java并发编程-ReentrantLock
代码示例: Lock lock = new ReentrantLock(); lock.lock(); try { // update object state } finally { lock.un ...
- 汇顶科技&&硬件类笔试题目
汇顶科技硬件类笔试题目,每年都有变化,但是题目类型都差不多.汇顶科技17年在南京地区大概招了20个左右吧,给的待遇还是不错的,工作地点上海深圳
- 第十六课:一些奇葩的元素节点object,video
object元素 object这个元素,现在前端很少用到,但是像flash,svg等奇葩元素,必须嵌套在object对象元素中.现代浏览器用video,canvas代替这些元素. 之前做过图表和地图的 ...
- psd做成HTML相关参考页面
前端制作(美工)是怎么把PSD制作成页面的? 美工怎么做的我不清楚,因为我是做前端的,我就从前端这个角度说吧. 首先拿到PSD,先分析哪些是要导出为图片的,哪些是可以自己用代码完成的.将图片全部导出, ...
- hdu4081 次小生成树
题意:有n个点,n-1条边.现在徐福可以让一条边无消耗建立,即魔法边.B表示除魔法边之外的的其他边的消耗值和,A表示这条魔法边相连的2个集合中都选一点,这两点的最大值,现在要求A/B最大. 方法:因为 ...
- ubuntu设置屏幕亮度
楼主的本本是acer4750g ,系统是ubuntu kylin 14.04 原 笔记本ubuntu14.04无法调节屏幕亮度 http://my.oschina.net/lhplj/blog/397 ...
- 【poj2234】 Matches Game
http://poj.org/problem?id=2234 (题目链接) 题意 经典取火柴游戏 Solution 裸的Nim游戏,也就是取石子. 整个游戏的sg值为每一堆火柴(子游戏)的异或和. 代 ...