一个封装的contextmenu兼容FF（右键菜单）
<html>
<head>
<style type="text/css">
body
{
background-color: buttonface;
}
.contextmenu
{
width: 100px;
background-color: buttonface;
margin: 0;
padding: 1px;
border: 2px outset;
position: absolute;
z-index: 999;
}
.menuitem
{
cursor: default;
font: menu;
color: MenuText;
padding: 2px 16px 2px 16px;
word-wrap : normal;
}
.menuitem-disabled
{
cursor: default;
font: menu;
color: graytext;
padding: 2px 16px 2px 16px;
word-wrap : normal;
}
.menuitem-over
{
cursor: default;
background-color: highlight;
font: menu;
padding: 2px 16px 2px 16px;
color: highlighttext;
}
.menuitem-separator
{
margin: 0;
}
</style>
<script type="text/javascript">
//contextmenu object
//2007-7-3 by Simon.Q
//qq:173513656
function ContextMenu(sId)
{
this.MenuId = sId;
this.MenuItems = [];
}
//menu item object
function MenuItem(bType, sText, sAction, bEnable, sIcon)
{
this.type = bType;
this.text = sText;
this.action = sAction;
this.enable = (bEnable == undefined) ? true : false;
this.icon = sIcon;
}
//add menu item
ContextMenu.prototype.addMenuItem = function(sText, sAction, bEnable, sIcon)
{
this.MenuItems[this.MenuItems.length] = new MenuItem(true, sText, sAction, bEnable, sIcon);
}
//add separator
ContextMenu.prototype.addSeparator = function()
{
this.MenuItems[this.MenuItems.length] = new MenuItem(false, null, null, null, null);
}
//build menu item html
ContextMenu.prototype.addItem = function()
{
var sHtml = "";
for (var i = 0; i < this.MenuItems.length; i++)
{
if (this.MenuItems.type)
{
if (this.MenuItems.enable)
{
sHtml += "<div class=\"menuitem\" onmouseover=\"this.className = 'menuitem-over';\" onmouseout=\"this.className = 'menuitem';\""
if (this.MenuItems.action)
sHtml += " onclick=\""+ this.MenuItems.action +"\"";
sHtml += ">"+ this.MenuItems.text +"</div>\n";
}
else
{
sHtml += "<div class=\"menuitem-disabled\">"+ this.MenuItems.text +"</div>\n";
}
}
else
{
//sHtml += "<div class=\"menuitem-separator\"></div>\n";
sHtml += "<hr class=\"menuitem-separator\" />\n";
}
}
return sHtml;
}
//create contextmenu to string
ContextMenu.prototype.toString = function()
{
var sHtml = "<div id=\""+ this.MenuId +"\" class=\"contextmenu\" onselectstart=\"return false;\">\n";
sHtml += this.addItem();
sHtml += "</div>\n";
//alert(sHtml);
return sHtml;
}
//build contextmenu
ContextMenu.prototype.createMenu = function()
{
document.write(this);
this.hideMenu();
}
//show contextmenu
ContextMenu.prototype.showMenu = function(e)
{
var obj;
var e, x, y;
var docheight,docwidth,dh,dw;
e = e || window.event;
x = e.clientX;
y = e.clientY;
obj = document.getElementById(this.MenuId);
docwidth = document.body.clientWidth;
docheight = document.body.clientHeight;
//alert(obj.offsetWidth);
dw = (obj.offsetWidth + x) - docwidth;
dh = (obj.offsetHeight + y) - docheight;
//alert(dw);
if(dw > 0)
{
obj.style.left = (x - dw) + document.body.scrollLeft + "px";
}
else
{
obj.style.left = x + document.body.scrollLeft + "px";
}
if(dh > 0)
{
obj.style.top = (y - dh) + document.body.scrollTop + "px"
}
else
{
obj.style.top = y + document.body.scrollTop + "px";
}
obj.style.visibility = "inherit";
}
//hide contextmenu
ContextMenu.prototype.hideMenu = function()
{
document.getElementById(this.MenuId).style.visibility = "hidden";
}
function GoTo()
{
alert("OK");
}
</script>
<script>
var cm = new ContextMenu("divContextMenu");
cm.addMenuItem("item1", "GoTo();");
cm.addSeparator();
cm.addMenuItem("item2", null, false);
cm.addMenuItem("item1");
cm.addMenuItem("item1");
cm.addMenuItem("item1");
cm.createMenu();
</script>
</head>
<body oncontextmenu="return false;" onclick="cm.hideMenu();" oncontextmenu="cm.showMenu(event);return false;">
<div oncontextmenu="cm.showMenu(event);">contextMenu</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
<head>
<style type="text/css">
body
{
background-color: buttonface;
}
.contextmenu
{
width: 100px;
background-color: buttonface;
margin: 0;
padding: 1px;
border: 2px outset;
position: absolute;
z-index: 999;
}
.menuitem
{
cursor: default;
font: menu;
color: MenuText;
padding: 2px 16px 2px 16px;
word-wrap : normal;
}
.menuitem-disabled
{
cursor: default;
font: menu;
color: graytext;
padding: 2px 16px 2px 16px;
word-wrap : normal;
}
.menuitem-over
{
cursor: default;
background-color: highlight;
font: menu;
padding: 2px 16px 2px 16px;
color: highlighttext;
}
.menuitem-separator
{
margin: 0;
}
</style>
<script type="text/javascript">
//contextmenu object
//2007-7-3 by Simon.Q
//qq:173513656
function ContextMenu(sId)
{
this.MenuId = sId;
this.MenuItems = [];
}
//menu item object
function MenuItem(bType, sText, sAction, bEnable, sIcon)
{
this.type = bType;
this.text = sText;
this.action = sAction;
this.enable = (bEnable == undefined) ? true : false;
this.icon = sIcon;
}
//add menu item
ContextMenu.prototype.addMenuItem = function(sText, sAction, bEnable, sIcon)
{
this.MenuItems[this.MenuItems.length] = new MenuItem(true, sText, sAction, bEnable, sIcon);
}
//add separator
ContextMenu.prototype.addSeparator = function()
{
this.MenuItems[this.MenuItems.length] = new MenuItem(false, null, null, null, null);
}
//build menu item html
ContextMenu.prototype.addItem = function()
{
var sHtml = "";
for (var i = 0; i < this.MenuItems.length; i++)
{
if (this.MenuItems.type)
{
if (this.MenuItems.enable)
{
sHtml += "<div class=\"menuitem\" onmouseover=\"this.className = 'menuitem-over';\" onmouseout=\"this.className = 'menuitem';\""
if (this.MenuItems.action)
sHtml += " onclick=\""+ this.MenuItems.action +"\"";
sHtml += ">"+ this.MenuItems.text +"</div>\n";
}
else
{
sHtml += "<div class=\"menuitem-disabled\">"+ this.MenuItems.text +"</div>\n";
}
}
else
{
//sHtml += "<div class=\"menuitem-separator\"></div>\n";
sHtml += "<hr class=\"menuitem-separator\" />\n";
}
}
return sHtml;
}
//create contextmenu to string
ContextMenu.prototype.toString = function()
{
var sHtml = "<div id=\""+ this.MenuId +"\" class=\"contextmenu\" onselectstart=\"return false;\">\n";
sHtml += this.addItem();
sHtml += "</div>\n";
//alert(sHtml);
return sHtml;
}
//build contextmenu
ContextMenu.prototype.createMenu = function()
{
document.write(this);
this.hideMenu();
}
//show contextmenu
ContextMenu.prototype.showMenu = function(e)
{
var obj;
var e, x, y;
var docheight,docwidth,dh,dw;
e = e || window.event;
x = e.clientX;
y = e.clientY;
obj = document.getElementById(this.MenuId);
docwidth = document.body.clientWidth;
docheight = document.body.clientHeight;
//alert(obj.offsetWidth);
dw = (obj.offsetWidth + x) - docwidth;
dh = (obj.offsetHeight + y) - docheight;
//alert(dw);
if(dw > 0)
{
obj.style.left = (x - dw) + document.body.scrollLeft + "px";
}
else
{
obj.style.left = x + document.body.scrollLeft + "px";
}
if(dh > 0)
{
obj.style.top = (y - dh) + document.body.scrollTop + "px"
}
else
{
obj.style.top = y + document.body.scrollTop + "px";
}
obj.style.visibility = "inherit";
}
//hide contextmenu
ContextMenu.prototype.hideMenu = function()
{
document.getElementById(this.MenuId).style.visibility = "hidden";
}
function GoTo()
{
alert("OK");
}
</script>
<script>
var cm = new ContextMenu("divContextMenu");
cm.addMenuItem("item1", "GoTo();");
cm.addSeparator();
cm.addMenuItem("item2", null, false);
cm.addMenuItem("item1");
cm.addMenuItem("item1");
cm.addMenuItem("item1");
cm.createMenu();
</script>
</head>
<body oncontextmenu="return false;" onclick="cm.hideMenu();" oncontextmenu="cm.showMenu(event);return false;">
<div oncontextmenu="cm.showMenu(event);">contextMenu</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
