<HTML>
<HEAD>
<meta http-equiv="windows-Target" contect="_top">
<TITLE>Context Menu</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function SeparateLine()
{
this.HTMLText = "<hr style='margin:0px 2px 0px 2px;'>";
this.HTMLObj = null;
this.ParentMenu = null;
this.ZIndex = 900;
this.toString = function(){return "HR[Object]";}
}
window.Menu = function(isDir,text,handle)
{
this.IsDirectory = false; //是否是目录
this.HTMLObj = null; //关联HTML对象
this.ParentMenu = null; //父菜单
this.SubMenus = []; //存储子菜单数组
this.Text = "";
this.ZIndex = 900; //层
this.Handle = null; //单击时所执行的语句,目录不支持此属性
this.toString = function(){return "Menu[Object]";}
if (typeof(isDir) != "undefined" && isDir)
{
this.IsDirectory = true;
}
if (typeof(text) != "undefined")
{
this.Text = text;
}
if (typeof(handle) != "undefined")
{
this.Handle = handle;
}
this.addSeparateLine = function(iAlign)
{
var line = new SeparateLine();
line.ParentMenu = this;
line.ZIndex = this.ZIndex+1;
if (iAlign == null || iAlign >= this.SubMenus.length)
{
this.SubMenus.push(line);
}
else
{
this.SubMenus.splice(iAlign,0,line);
}
return line;
}
//创建并追加子菜单
this.CreateSubMenu = function(isDir,text,handle)
{
if (this.IsDirectory)
{
var oMenu = new Menu();
if (typeof(isDir) != "undefined")
{
oMenu.IsDirectory = isDir;
}
if (typeof(text) != "undefined")
{
oMenu.Text = text;
}
if (typeof(handle) != "undefined")
{
oMenu.Handle = handle;
}
this.AppendSubMenu(oMenu);
return oMenu;
}
alert("出现错误,该对象不支持CreateSubMenu方法!");
return null;
}
//追加子菜单
this.AppendSubMenu = function(oMenu)
{
this.SubMenus.push(oMenu);
oMenu.ParentMenu = this;
oMenu.ZIndex = this.ZIndex+1;
}
//插入子菜单
this.InsertSubMenu = function(oMenu,iAlign)
{
if (iAlign >= this.SubMenus.length)
{
this.SubMenus.push(oMenu);
}
else
{
this.SubMenus.splice(iAlign,0,oMenu);
}
oMenu.ParentMenu = this;
oMenu.ZIndex = this.ZIndex+1;
}
//移除子菜单
this.RemoveSubMenu = function(iAlign)
{
var RemoveArr = this.SubMenus.splice(iAlign,1);
if (RemoveArr.length > 0)
{
RemoveArr[0].HTMLObj.parentNode.removeChild(RemoveArr[0].HTMLObj);
}
}
//把子菜单的数据转换成HTML格式
this.Create = function()
{
if (!this.IsDirectory)
{
alert("出现错误,该对象不支持Create方法!");
return false;
}
var ParentElement = document.createElement("div");
this.ChildMenuHTMLObj = ParentElement; //关联子菜单的HTML对象容器
ParentElement.style.cursor = "default";
if (Menu.Config.FontFamily != null && Menu.Config.FontFamily != "")
{
ParentElement.style.fontFamily = Menu.Config.FontFamily;
}
ParentElement.onmousedown = function()
{
window.event.cancelBubble = true;
}
ParentElement.onselectstart = function()
{
return false;
}
ParentElement.oncontextmenu = function()
{
window.event.cancelBubble = true;
return false;
}
ParentElement.style.position = "absolute";
ParentElement.style.width = "0px";
ParentElement.style.visibility = "hidden";
ParentElement.style.zIndex = this.ZIndex;
ParentElement.style.border = "1px solid #CCCCCC";//"1px solid #464646";
var table = document.createElement("table");
table.border = 0;
table.cellPadding = 0;
table.cellSpacing = 0;
var tbody = document.createElement("tbody");
table.appendChild(tbody);
var tr = document.createElement("tr");
var rtd = document.createElement("td");
var tempMenuHeight = Menu.Config.PerMenuHeight;
if (Menu.Config.RootMenu == this)//根菜单
{
tempMenuHeight = Menu.Config.RootMenuHeight;
var ltd = document.createElement("td");
ltd.style.width = "22px";
ltd.style.backgroundImage = "url(https://p-blog.csdn.net/images/p_blog_csdn_net/adverse/308301/o_WindowsXP.jpg)";
//ltd.style.backgroundColor = "#0000ff";
tr.appendChild(ltd);
}
tr.appendChild(rtd);
tbody.appendChild(tr);
ParentElement.appendChild(table);
var len = this.SubMenus.length;
if (len > 0)
{
var ChildTable = document.createElement("table");
var ChildTBody = document.createElement("tbody");
ChildTable.appendChild(ChildTBody);
ChildTable.border = 0;
ChildTable.cellPadding = 0;
ChildTable.cellSpacing = 0;
ChildTable.style.fontSize = Menu.Config.FontSize;
ChildTable.style.color = Menu.Config.FontColor;
rtd.appendChild(ChildTable);
}
for (var i = 0; i < len; i++)
{
var tempTr = document.createElement("tr");
//关联HTML对象和DATA对象
this.SubMenus[i].HTMLObj = tempTr; //关联子菜单的HTML对象
tempTr.DataObj = this.SubMenus[i];
var tempTd = document.createElement("td");
tempTr.style.backgroundColor = Menu.Config.BgColor;
tempTr.appendChild(tempTd);
if (this.SubMenus[i] instanceof SeparateLine)
{
tempTd.style.height = Menu.Config.SeparateLineHeight;
tempTd.colSpan = 2;
tempTd.innerHTML = this.SubMenus[i].HTMLText;
this.SubMenus[i].HTMLObj = tempTd.childNodes[0];
ChildTBody.appendChild(tempTr);
continue;
}
tempTd.style.height = tempMenuHeight;
tempTd.vAlign = "middle";
tempTd.style.wordWarp = "normal";
tempTd.style.paddingLeft = "5px";
tempTd.style.paddingRight = "5px";
tempTr.onmouseover = this.SubMenus[i].MouseOver;
tempTr.onmouseout = this.SubMenus[i].MouseOut;
tempTr.onclick = this.SubMenus[i].Click;
tempTd.innerHTML = this.SubMenus[i].Text;
//tempTd.appendChild(document.createTextNode(this.SubMenus[i].Text));
var DirectoryTd = document.createElement("td");
if (this.SubMenus[i].IsDirectory)
{
var font = document.createElement("font");
font.style.fontFamily = "webdings";
font.appendChild(document.createTextNode("4"));
DirectoryTd.appendChild(font);
}
tempTr.appendChild(DirectoryTd);
ChildTBody.appendChild(tempTr);
}
document.body.appendChild(ParentElement);
for (var i = 0; i < len; i++)
{
if(this.SubMenus[i].IsDirectory)
{
this.SubMenus[i].Create();
}
}
}
this.Show = function(e)
{
if (!this.IsDirectory)
{
alert("出现错误,该对象不支持Show方法!");
return false;
}
if (this.SubMenus.length == 0) return;
var ChildHTMLObj = this.ChildMenuHTMLObj;
var DWidth = document.body.clientWidth;
var DHeight = document.body.clientHeight;
var left = document.body.scrollLeft, top = document.body.scrollTop;
var x, y;
if (this.ParentMenu == null) //根对象
{
x = e.clientX, y = e.clientY;
if (x+ChildHTMLObj.offsetWidth > DWidth)
{
x -= ChildHTMLObj.offsetWidth;
}
if (y+ChildHTMLObj.offsetHeight > DHeight)
{
y -= ChildHTMLObj.offsetHeight;
}
x += left;
y += top;
}
else
{
var CurrentHTMLObj = this.HTMLObj;
var x = Menu.GetMenuPositionX(CurrentHTMLObj)+CurrentHTMLObj.offsetWidth,y=Menu.GetMenuPositionY(CurrentHTMLObj);
if (x+ChildHTMLObj.offsetWidth > DWidth+left)
{
x -= (CurrentHTMLObj.offsetWidth+ChildHTMLObj.offsetWidth);
}
if (y+ChildHTMLObj.offsetHeight > DHeight+top)
{
y -= ChildHTMLObj.offsetHeight;
y += CurrentHTMLObj.offsetHeight;
}
}
ChildHTMLObj.style.left = x;
ChildHTMLObj.style.top = y;
this.ChildMenuHTMLObj.style.visibility = "visible";
showHideElement("SELECT", this.ChildMenuHTMLObj, "hidden");
showHideElement("APPLET", this.ChildMenuHTMLObj, "hidden");
}
this.Hidden = function()
{
if (!this.IsDirectory)
{
alert("出现错误,该对象不支持Hidden方法!");
return false;
}
var len = this.SubMenus.length;
for (var i = 0; i < len; i++)
{
if (this.SubMenus[i].IsDirectory)
{
this.SubMenus[i].Hidden();
}
}
this.ChildMenuHTMLObj.style.visibility = "hidden";
showHideElement('SELECT', this.ChildMenuHTMLObj, "");
showHideElement('APPLET', this.ChildMenuHTMLObj, "");
}
this.MouseOver = function()
{
this.style.backgroundColor = Menu.Config.OverBgColor;
var ParentMenu = this.DataObj.ParentMenu;
var len = ParentMenu.SubMenus.length;
for (var i = 0; i < len; i++)
{
if (ParentMenu.SubMenus[i].IsDirectory)
{
ParentMenu.SubMenus[i].Hidden();
}
}
if (this.DataObj.IsDirectory)
{
this.DataObj.Show();
}
}
this.MouseOut = function()
{
this.style.backgroundColor = Menu.Config.BgColor;
}
this.Clear = function()
{
if (this.IsDirectory)
{
var len = this.SubMenus.length;
for (var i = 0; i < len; i++)
{
if (this.SubMenus[i].IsDirectory)
{
this.SubMenus[i].Clear();
}
}
}
document.body.removeChild(this.ChildMenuHTMLObj);
}
this.Click = function()
{
if (!this.DataObj.IsDirectory)
{
eval(this.DataObj.Handle);
Menu.Config.RootMenu.Hidden();
}
}
}
//菜单配置
Menu.Config=
{
RootMenu:new Menu(true), //系统定义的第一个菜单,必须为容器(IsDirectory=true)
BgColor:"menu", //设置菜单背景颜色
OverBgColor:"#B5BED6", //设置菜单鼠标经过时的背景颜色
FontSize:"12px", //设置菜单字体大小
FontColor:"#000000", //设置菜单字体颜色
FontFamily:"Arial",
RootMenuHeight:"30px", //调整菜单的行距
PerMenuHeight:"20px", //调整菜单的行距
SeparateLineHeight:"4px" //调整分割线的行距
};
Menu.GetMenuPositionX = function(obj)
{
var ParentObj = obj;
var left = ParentObj.offsetLeft;
while (ParentObj = ParentObj.offsetParent){
left += ParentObj.offsetLeft;
}
return left;
}
Menu.GetMenuPositionY = function(obj)
{
var ParentObj = obj;
var top = ParentObj.offsetTop;
while (ParentObj = ParentObj.offsetParent){
top += ParentObj.offsetTop;
}
return top;
}
Menu.Update = function()
{
var RootMenu = Menu.Config.RootMenu;
RootMenu.Clear();
RootMenu.Create();
}
/**
* hides <select> and <applet> objects (for IE only)
*/
function showHideElement(elmID, overDiv, visibility)
{
if (document.all)
{
for (var i = 0; i < document.all.tags(elmID).length; i++)
{
obj = document.all.tags(elmID)[i];
if (!obj || !obj.offsetParent)
{
continue;
}
// Find the element's offsetTop and offsetLeft relative to the BODY tag.
objLeft = obj.offsetLeft;
objTop = obj.offsetTop;
objParent = obj.offsetParent;
while (objParent.tagName.toUpperCase() != "BODY")
{
objLeft += objParent.offsetLeft;
objTop += objParent.offsetTop;
objParent = objParent.offsetParent;
}
objHeight = obj.offsetHeight;
objWidth = obj.offsetWidth;
// Find the div's offsetTop and offsetLeft relative to the BODY tag.
divLeft = overDiv.offsetLeft;
divTop = overDiv.offsetTop;
objParent = overDiv.offsetParent;
while (objParent.tagName.toUpperCase() != "BODY")
{
divLeft += objParent.offsetLeft;
divTop += objParent.offsetTop;
objParent = objParent.offsetParent;
}
if ((divLeft + overDiv.offsetWidth) <= objLeft);
else if ((divTop + overDiv.offsetHeight) <= objTop);
else if (divTop >= (objTop + objHeight));
else if (divLeft >= (objLeft + objWidth));
else
{
obj.style.visibility = visibility;
}
}
}
}
//事件
window.onload = function()
{
Menu.Config.RootMenu.Create();
document.oncontextmenu = function(e)
{
e = e||event;
Menu.Config.RootMenu.Show(e);
return false;
}
document.onmousedown = function()
{
Menu.Config.RootMenu.Hidden();
}
}
//*************************************系统实例******************************************
var rightSpace = " ";
window.CXP_Menu = Menu.Config.RootMenu;
var pg = CXP_Menu.CreateSubMenu();
pg.Text = "程序(<u>P</u>)";
pg.IsDirectory = true;
var wd = new Menu(true,"文档(<u>D</u>)");
CXP_Menu.AppendSubMenu(wd);
var set = CXP_Menu.CreateSubMenu(true,"设置(<u>S</u>)");
var search = CXP_Menu.CreateSubMenu(true,"搜索(<u>C</u>)");
var help = CXP_Menu.CreateSubMenu(false,"帮助和支持(<u>H</u>)");
help.Handle = "alert('这是帮助!')";
var run = CXP_Menu.CreateSubMenu(false,"运行(<u>R</u>) ...","alert('这是运行!')");
CXP_Menu.addSeparateLine();
CXP_Menu.AppendSubMenu(new Menu(null, "注销King(<u>L</u>) ...", null));
var exit = new Menu();
exit.Text = "关闭计算机(<u>U</u>) ...";
CXP_Menu.AppendSubMenu(exit);
//插入菜单
CXP_Menu.addSeparateLine(0);
CXP_Menu.InsertSubMenu(new Menu(false,"Windows Update","if(confirm('此处通向MS官方,您真的要去吗?'))location.href='http://windowsupdate.microsoft.com/'"));
pg.AppendSubMenu(new Menu(false,"程序1 ..." + rightSpace));
pg.AppendSubMenu(new Menu(false,"程序2" + rightSpace));
pg.AppendSubMenu(new Menu(false,"程序4" + rightSpace));
pg.AppendSubMenu(new Menu(false,"程序5" + rightSpace));
pg.AppendSubMenu(new Menu(false,"程序6" + rightSpace));
wd.AppendSubMenu(new Menu(false,"文档1 ..." + rightSpace));
wd.AppendSubMenu(new Menu(false,"文档2" + rightSpace));
set.AppendSubMenu(new Menu(false,"设置1 ..." + rightSpace));
set.AppendSubMenu(new Menu(false,"设置2" + rightSpace));
var pg3=new Menu(true,"程序3");
pg3.AppendSubMenu(new Menu(false,"程序4" + rightSpace));
pg3.AppendSubMenu(new Menu(false,"程序5" + rightSpace));
pg3.AppendSubMenu(new Menu(false,"程序6 ......." + rightSpace));
pg.AppendSubMenu(pg3);
search.AppendSubMenu(new Menu(false,"文件或文件夹(<u>F</u>) ..."+rightSpace));
search.AppendSubMenu(new Menu(false,"在Internet上(<u>I</u>) ..."+rightSpace));
search.addSeparateLine();
search.AppendSubMenu(new Menu(false,"用户(<u>P</u>) ..."+rightSpace));
function change()
{
exit.Text = "关鸡!";
Menu.Update();
}
function add()
{
CXP_Menu.AppendSubMenu(new Menu(false,"我是新加的!"));
Menu.Update();
}
function del()
{
CXP_Menu.RemoveSubMenu(0);
}
//-->
</SCRIPT>
</HEAD>
<BODY leftmargin=0 topmargin=0 style="color:#FFFFFF">
<input type="button" value="添加新菜单" οnclick="add()">
<input type="button" value="把关机修改成关鸡^_^" οnclick="change()">
<input type="button" value="删除顶菜单" οnclick="del()">
<br>
<br>
<select></select>
</BODY>
</HTML>