您的位置：首页 > Web前端 > JavaScript

JS 右键创建菜单

2012-04-11 20:43 302 查看

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>无标题页</title>

<script type="text/javascript">

function csMenu(_object, _menu)

{

this.IEventHander = null;

this.IFrameHander = null;

this.IContextMenuHander = null;

this.Show = function(_menu)

{

var e = window.event || event;

if (e.button == 2)

{

if (window.document.all)

{

this.IContextMenuHander = function(){return false;};

document.attachEvent("oncontextmenu", this.IContextMenuHander);

}

else

{

this.IContextMenuHander = document.oncontextmenu;

document.oncontextmenu = function(){return false;};

}

window.csMenu$Object = this;

this.IEventHander = function(){window.csMenu$Object.Hide(_menu);};

if (window.document.all)

document.attachEvent("onmousedown", this.IEventHander);

else

document.addEventListener("mousedown", this.IEventHander, false);

_menu.style.left = e.clientX;

_menu.style.top = e.clientY;

_menu.style.display = "";

if (this.IFrameHander)

{

var _iframe = document.getElementById(this.IFrameHander);

_iframe.style.left = e.clientX;

_iframe.style.top = e.clientY;

_iframe.style.height = _menu.offsetHeight;

_iframe.style.width = _menu.offsetWidth;

_iframe.style.display = "";

}

}

};

this.Hide = function(_menu)

{

var e = window.event || event;

var _element = e.srcElement;

do

{

if (_element == _menu)

{

return false;

}

}

while ((_element = _element.offsetParent));

if (window.document.all)

document.detachEvent("on"+e.type, this.IEventHander);

else

document.removeEventListener(e.type, this.IEventHander, false);

if (this.IFrameHander)

{

var _iframe = document.getElementById(this.IFrameHander);

_iframe.style.display = "none";

}

_menu.style.display = "none";

if (window.document.all)

document.detachEvent("oncontextmenu", this.IContextMenuHander);

else

document.oncontextmenu = this.IContextMenuHander;

};

this.initialize = function(_object, _menu)

{

window._csMenu$Object = this;

var _eventHander = function(){window._csMenu$Object.Show(_menu);};

_menu.style.position = "absolute";

_menu.style.display = "none";

_menu.style.zIndex = "1000000";

if (window.document.all)

{

var _iframe = document.createElement('iframe');

document.body.insertBefore(_iframe, document.body.firstChild);

_iframe.id = _menu.id + "_iframe";

this.IFrameHander = _iframe.id;

_iframe.style.position = "absolute";

_iframe.style.display = "none";

_iframe.style.zIndex = "999999";

_iframe.style.border = "0px";

_iframe.style.height = "0px";

_iframe.style.width = "0px";

_object.attachEvent("onmouseup", _eventHander);

}

else

{

_object.addEventListener("mouseup", _eventHander, false);

}

};

this.initialize(_object, _menu);

}

</script>

</head>

<body>

<form id="form1" runat="server">

<div>

<table id="Table1" style="width: 1000px; height: 1000px; border: 1px solid black">

</table>

</div>

<div id="Menu1" style="background-color: White; border: 1px solid #cccccc; padding: 10px;">

<li onclick="alert();">打开</li>

<li>打印</li>

<li>回复发件人</li>

<li>全部回复</li>

<li>转发</li>

<li>分配</li>

<li>垃圾邮件</li>

<li>删除</li>

<li>归档此邮件</li>

<li>分拣此邮件</li>

</div>

</form>

<script type="text/javascript">

var MM = new csMenu(document.getElementById("Table1"), document.getElementById("Menu1"));

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航