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

一个非常简洁高效的JS右键菜单!

2008-05-30 11:52 351 查看
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);
}


=======================需要显示的菜单,一般用DIV======================
<div id="Menu1" style="background-color:White; border:1px solid #cccccc; padding:10px;">
<li>打开</li>
<li>打印</li>
<li>回复发件人</li>
<li>全部回复</li>
<li>转发</li>
<li>分配</li>
<li>垃圾邮件</li>
<li>删除</li>
<li>归档此邮件</li>
<li>分拣此邮件</li>
</div>

============================调用方法===============================

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

其中, document.getElementById("Table1") 就是需要显示菜单的区域控件.
document.getElementById("Menu1") 就是菜单DIV控件.
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: