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也可以很复杂】当弹出层遇上了鼠标定位(下)
前言 接着昨天的内容写,为了保证内容连续性,这里还是把昨天的内容拷了过来. 请用现代浏览器测试 引出问题 有图有真相,我们来看一个智联招聘里面经常出现的图层: 他这个是没有什么问题的,我们来简单看看其 ...
随机推荐
- 【NDK开发】使用NDK开发android
今天学习了一下android NDK,所以记录下来.据说NDK从r7开始自带编译器,在windows上无需配置cygwin的环境.现在我使用NDK r10来开发. 上午搭建的NDK并写了一个实例,不过 ...
- 百度地图 IOS版开发经验分享
最近刚完成app中地图的应用,感觉非常的曲折,折腾了很久,刚才开始一直不能成功使用百度地图api,报一大堆的错误,后来换到高德地图,又发现服务端使用的百度的经纬度,又从高德换回百度,泪奔. 这里简单比 ...
- js回掉页面后台代码-简单demo
后台代码: public partial class WebForm1 : System.Web.UI.Page, ICallbackEventHandler { protected void Pag ...
- 自动化测试UI Test, Performance Test, Load Test 总结整理
MSDN: 测试应用程序,Test apps early and often ,Improve Code Quality 推荐书: <Visual Studio 2015高级编程> < ...
- Rdesktop
linux远程windows rdesktop是一个开放源码的Window NT中断服务器的客户端,它实现了远程桌面协议(RDP) rdesktop-1.7.0.tar 下载地址:http://d ...
- C#获取本机的MAC地址
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.M ...
- PHP中PDO的配置与说明
住[PDO是啥] PDO是PHP5新加入的一个重大功能,因为在PHP5以前的php4/php3都是一堆的数据库扩展来跟各个数据库的连接和处理,什么php_mysql.dll.php_pgsql.dll ...
- 添加一个txt文件(例如在桌面),利用后台对文件写入内容
string str = "今天天气好晴朗,处处好风光."; //需要将字符串转化成字节数组 byte[] buffer = Encoding.Default.GetBytes(s ...
- Hacker's guide to Neural Networks
Hacker's guide to Neural Networks Hi there, I'm a CS PhD student at Stanford. I've worked on Deep Le ...
- hdu 2047 阿牛的EOF牛肉串
如果末尾加的是E或F,显然是2*a[i-1] 如果末尾加的是O,则末2位一定是EO或FO,则为2*a[i-2]. 然后两者相加 2*a[i-1]+2*a[i-2] = 2*(a[i-1]+a[i-2] ...