87,918
社区成员
发帖
与我相关
我的任务
分享求助！javascript写的web菜单有问题。
javascript写的web菜单有问题。
Javascript写的web菜单，web页面宽度设为800px,在1024*768分辨率的显示下。如果<div align=left>整个web页面</div>时，Javascript写的web菜单显示的位置没问题。但<div align=center>整个web页面</div>时，Javascript写的web菜单显示的位置就错位，问题就出在1024*768分辨率的显示下居中对其上，可能是坐标计算问题，我实在没有办法了，请大侠赐教！
下面是html的web页面:
<html>
<head>
<title>test <title>
<Style type="text/css">
all.clsMenuItemNS { FONT-SIZE: 10.5pt; COLOR: white; TEXT-DECORATION: none }
.clsMenuItemIE { FONT-SIZE: 10.5pt; CURSOR: hand; COLOR: white; TEXT-DECORATION: none; }
A:hover { COLOR: red }
</Style>
</head>
<body>
<div align=left> <<**************************
如果<div align=left>整个web页面</div>时，Javascript写的web菜单显示的位置没问题。
但<div align=center>整个web页面</div>时，Javascript写的web菜单显示的位置就错位，
<Script language="javascript" src="include/menu.js">
</Script>
<div>
</body>
</html>
下面一帖是javascript写web菜单。
Javascript写的web菜单，web页面宽度设为800px,在1024*768分辨率的显示下。如果<div align=left>整个web页面</div>时，Javascript写的web菜单显示的位置没问题。但<div align=center>整个web页面</div>时，Javascript写的web菜单显示的位置就错位，问题就出在1024*768分辨率的显示下居中对其上，可能是坐标计算问题，我实在没有办法了，请大侠赐教！
下面是html的web页面:
<html>
<head>
<title>test <title>
<Style type="text/css">
all.clsMenuItemNS { FONT-SIZE: 10.5pt; COLOR: white; TEXT-DECORATION: none }
.clsMenuItemIE { FONT-SIZE: 10.5pt; CURSOR: hand; COLOR: white; TEXT-DECORATION: none; }
A:hover { COLOR: red }
</Style>
</head>
<body>
<div align=left> <<**************************
如果<div align=left>整个web页面</div>时，Javascript写的web菜单显示的位置没问题。
但<div align=center>整个web页面</div>时，Javascript写的web菜单显示的位置就错位，
<Script language="javascript" src="include/menu.js">
</Script>
<div>
</body>
</html>
下面一帖是javascript写web菜单。
...全文
请发表友善的回复…
发表回复
LxcJie 2004-06-20
- 打赏
- 举报
太长了 ：（
spruce 2004-06-18
- 打赏
- 举报
function showMenu()
{
document.writeln(HTMLstr);
}
////////////////////////////////////////////////////////////////////////////
// Private declaration
function displaySubMenu(idMainMenu)
{
var menu;
var submenu;
if (n)
{
submenu = document.layers[idMainMenu+"submenu"];
if (lastMenu != null && lastMenu != submenu) hideAll();
submenu.left = document.layers[idMainMenu].pageX;
submenu.top = document.layers[idMainMenu].pageY + 25;
submenu.visibility = fShow;
leftX = document.layers[idMainMenu+"submenu"].left;
rightX = leftX + document.layers[idMainMenu+"submenu"].clip.width;
leftY = document.layers[idMainMenu+"submenu"].top+
document.layers[idMainMenu+"submenu"].clip.height;
rightY = leftY;
}else if (ie)
{
menu = eval(idMainMenu);
submenu = eval(idMainMenu+"submenu.style");
submenu.left = calculateSumOffset(menu, 'offsetLeft') - 10;
/* submenu.top = calculateSumOffset(menu, 'offsetTop') + 30; */
submenu.top = menu.style.top + 35;
if ( lastMenu != null && lastMenu != submenu )
{
hideAll();
}
submenu.visibility = fShow;
leftX = document.all[idMainMenu+"submenu"].style.posLeft;
rightX = leftX + document.all[idMainMenu+"submenu"].offsetWidth;
leftY = document.all[idMainMenu+"submenu"].style.top + document.all[idMainMenu+"submenu"].Height;
rightY = leftY;
}
lastMenu = submenu;
}
function hideAll()
{
if (lastMenu != null)
{
lastMenu.visibility = fHide;
lastMenu.left = 0;
}
}
function calculateSumOffset(idItem, offsetName)
{
var totalOffset = 0;
var item = eval('idItem');
do
{
totalOffset += eval('item.'+offsetName);
item = eval('item.offsetParent');
} while (item != null);
return totalOffset;
}
function updateIt(e)
{
if (ie)
{
var x = window.event.clientX;
var y = window.event.clientY;
if (x > rightX || x < leftX)
{
hideAll();
}
else if (y > rightY )
{
hideAll();
}
}
if (n)
{
var x = e.pageX;
var y = e.pageY;
if (x > rightX || x < leftX) hideAll();
else if (y > rightY) hideAll();
}
}
if (document.all)
{
document.body.onclick=hideAll;
document.body.onscroll=hideAll;
document.body.onmousemove=updateIt;
}
if (document.layers)
{
document.onmousedown=hideAll;
window.captureEvents(Event.MOUSEMOVE);
window.onmousemove=updateIt;
}
/***************************************************************************** 菜单实现
\*****************************************************************************/
function ShowToolbar()
{
// AddItem(id, text, hint, location, alternativeLocation);
// AddSubItem(idParent, text, hint, location);
menu = new Menu();
menu.addItem("Income", "收入", "收入", null, null);
menu.addSubItem("Income", "收入信息", "收入信息", "null");
menu.addSubItem("Income", "登记收入", "登记收入", "null");
menu.addSubItem("Income", "统计结算", "统计结算", "null");
menu.addItem("Payout", "支出", "支出", null, null);
menu.addSubItem("Payout", "支出信息", "支出信息", "1null");
menu.addSubItem("Payout", "登记支出", "登记支出", "1null");
menu.addSubItem("Payout", "统计结算", "统计结算", "1null");
menu.addItem("Bank", "银行", "银行", null, null);
menu.addSubItem("Bank", "银行信息", "银行信息", "1null");
menu.addSubItem("Bank", "添加帐号", "添加帐号", "1null");
menu.addItem("User", "用户", "用户", null, null);
menu.addSubItem("User", "用户信息", "用户信息", "1null");
menu.addSubItem("User", "添加用户", "添加用户", "1null");
menu.addItem("Reference", "参考", "参考", null, null);
menu.addSubItem("Reference", "收入类型", "收入类型", "1null");
menu.addSubItem("Reference", "支出类型", "支出类型", "1null");
menu.addSubItem("Reference", "使用说明", "使用说明", "1null");
menu.addSubItem("Reference", "系统信息", "系统信息", "1null");
//结束菜单定义
menu.showMenu();
}
ShowToolbar();
spruce 2004-06-18
- 打赏
- 举报
以下是javascript写web菜单(include/menu.js):
var lastMenu;
var rightY;
var leftX;
var n;
var ie;
var fShow;
var fHide;
if (document.all) {n=0;ie=1;fShow="visible";fHide="hidden";}
if (document.layers) {n=1;ie=0;fShow="show"; fHide="hide";}
//window.onerror = new Function("return true")
////////////////////////////////////////////////////////////////////////////
// Function Menu() //
////////////////////////////////////////////////////////////////////////////
function initArray()
{
this.length = initArray.arguments.length;
for(var i=0; i < this.length; i++)
this[i+1] = initArray.arguments[i];
}
rightX = 0;
function Menu()
{
this.bgColor = "#006699";
if (ie) this.menuFont = "宋体";
if (n) this.menuFont = "宋体";
this.fontColor = "white";
this.addItem = addItem;
this.addSubItem = addSubItem;
this.showMenu = showMenu;
this.mainPaneBorder = 0;
this.subMenuPaneBorder = 0;
this.subMenuPaneWidth = 100;
lastMenu = null;
Dtoday = new Date();
var TWeek = new initArray(
"星期日",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六");
rightY = 0;
leftY = 0;
leftX = 0;
HTMLstr = "";
HTMLstr += "<!-- MENU PANE DECLARATION BEGINS -->\n";
HTMLstr += "\n";
if (ie) HTMLstr += "<div id='MainTable' style='position:relative'>\n";
if (n) HTMLstr += "<layer name='MainTable'>\n";
HTMLstr += "<table background=image/b1.gif width='800' bgcolor='"+this.bgColor+"' border='"+this.mainPaneBorder+"'>\n";
HTMLstr += "<tr><td class=clsMenuItemIE > |";
HTMLstr += "<!-- MAIN MENU STARTS -->\n";
HTMLstr += "<!-- MAIN_MENU -->\n";
HTMLstr += "<!-- MAIN MENU ENDS -->\n";
HTMLstr += "<font color=white style='font-size:9pt;font-family: 宋体'> ";
HTMLstr += ( Dtoday.getYear() + "年" );
HTMLstr += ( (Dtoday.getMonth() + 1) + "月" );
HTMLstr += ( Dtoday.getDate() + "日 " );
HTMLstr += ( TWeek[Dtoday.getDay()+1] + "</font>" );
HTMLstr += "</td></tr>\n";
HTMLstr += "</table>\n";
HTMLstr += "\n";
HTMLstr += "<!-- SUB MENU STARTS -->\n";
HTMLstr += "<!-- SUB_MENU -->\n";
HTMLstr += "<!-- SUB MENU ENDS -->\n";
HTMLstr += "\n";
if (ie) HTMLstr+= "</div>\n";
if (n) HTMLstr+= "</layer>\n";
HTMLstr += "<!-- MENU PANE DECALARATION ENDS -->\n";
}
function addItem(idItem, text, hint, location, altLocation)
{
var Lookup = "<!-- ITEM "+idItem+" -->";
if (HTMLstr.indexOf(Lookup) != -1)
{
alert(idParent + " already exist");
return;
}
var MENUitem = "";
MENUitem += "\n<!-- ITEM "+idItem+" -->\n";
if (n)
{
MENUitem += "<ilayer name="+idItem+">";
MENUitem += " | ";
MENUitem += "<a href='.' class=clsMenuItemNS onmouseover=\"displaySubMenu('"+idItem+"')\" onclick=\"return false;\">";
MENUitem += text;
MENUitem += "</a>";
MENUitem += "</ilayer>";
}
if (ie)
{
MENUitem += "<a id='"+idItem+"' ";
MENUitem += " class=clsMenuItemIE ";
if (hint != null)
{
MENUitem += "title='"+hint+"' ";
}
if (location != null)
{
MENUitem += "href='"+location+"' ";
MENUitem += "onmouseover=\"hideAll()\" ";
}
else
{
if (altLocation != null)
MENUitem += "href='"+altLocation+"' ";
else
MENUitem += "href='.' ";
MENUitem += "onmouseover=\"displaySubMenu('"+idItem+"')\" ";
MENUitem += "onclick=\"return false;\" "
}
MENUitem += "> ";
MENUitem += text;
MENUitem += " </a>|\n";
}
MENUitem += "<!-- END OF ITEM "+idItem+" -->\n\n";
MENUitem += "<!-- MAIN_MENU -->\n";
HTMLstr = HTMLstr.replace("<!-- MAIN_MENU -->\n", MENUitem);
}
function addSubItem(idParent, text, hint, location)
{
var MENUitem = "";
Lookup = "<!-- ITEM "+idParent+" -->";
if (HTMLstr.indexOf(Lookup) == -1)
{
alert(idParent + " not found");
return;
}
Lookup = "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->";
if (HTMLstr.indexOf(Lookup) == -1)
{
if (n)
{
MENUitem += "\n";
MENUitem += "<layer id='"+idParent+"submenu' visibility=hide bgcolor='"+this.bgColor+"'>\n";
MENUitem += "<table background=image/b1.gif border='"+this.subMenuPaneBorder+"' bgcolor='"+this.bgColor+"' width="+this.subMenuPaneWidth+">\n";
MENUitem += "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->\n";
MENUitem += "</table>\n";
MENUitem += "</layer>\n";
MENUitem += "\n";
}
if (ie)
{
MENUitem += "\n";
MENUitem += "<div id='"+idParent+"submenu' style='position:absolute; visibility: hidden; width: "+this.subMenuPaneWidth+"; font: "+this.menuFont+"; top: -300;'>\n";
MENUitem += "<table background=image/b1.gif border='"+this.subMenuPaneBorder+"' bgcolor='"+this.bgColor+"' width="+this.subMenuPaneWidth+">\n";
MENUitem += "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->\n";
MENUitem += "</table>\n";
MENUitem += "</div>\n";
MENUitem += "\n";
}
MENUitem += "<!-- SUB_MENU -->\n";
HTMLstr = HTMLstr.replace("<!-- SUB_MENU -->\n", MENUitem);
}
Lookup = "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->\n";
if (n) MENUitem = "<tr><td height=22 > <a class=clsMenuItemNS title='"+hint+"' href='"+location+"'>"+text+"</a><br></td></tr>\n";
if (ie) MENUitem = "<tr><td height=22 > <a class=clsMenuItemIE title='"+hint+"' href='"+location+"'>"+text+"</a><br></td></tr>\n";
MENUitem += Lookup;
HTMLstr = HTMLstr.replace(Lookup, MENUitem);
}
var lastMenu;
var rightY;
var leftX;
var n;
var ie;
var fShow;
var fHide;
if (document.all) {n=0;ie=1;fShow="visible";fHide="hidden";}
if (document.layers) {n=1;ie=0;fShow="show"; fHide="hide";}
//window.onerror = new Function("return true")
////////////////////////////////////////////////////////////////////////////
// Function Menu() //
////////////////////////////////////////////////////////////////////////////
function initArray()
{
this.length = initArray.arguments.length;
for(var i=0; i < this.length; i++)
this[i+1] = initArray.arguments[i];
}
rightX = 0;
function Menu()
{
this.bgColor = "#006699";
if (ie) this.menuFont = "宋体";
if (n) this.menuFont = "宋体";
this.fontColor = "white";
this.addItem = addItem;
this.addSubItem = addSubItem;
this.showMenu = showMenu;
this.mainPaneBorder = 0;
this.subMenuPaneBorder = 0;
this.subMenuPaneWidth = 100;
lastMenu = null;
Dtoday = new Date();
var TWeek = new initArray(
"星期日",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六");
rightY = 0;
leftY = 0;
leftX = 0;
HTMLstr = "";
HTMLstr += "<!-- MENU PANE DECLARATION BEGINS -->\n";
HTMLstr += "\n";
if (ie) HTMLstr += "<div id='MainTable' style='position:relative'>\n";
if (n) HTMLstr += "<layer name='MainTable'>\n";
HTMLstr += "<table background=image/b1.gif width='800' bgcolor='"+this.bgColor+"' border='"+this.mainPaneBorder+"'>\n";
HTMLstr += "<tr><td class=clsMenuItemIE > |";
HTMLstr += "<!-- MAIN MENU STARTS -->\n";
HTMLstr += "<!-- MAIN_MENU -->\n";
HTMLstr += "<!-- MAIN MENU ENDS -->\n";
HTMLstr += "<font color=white style='font-size:9pt;font-family: 宋体'> ";
HTMLstr += ( Dtoday.getYear() + "年" );
HTMLstr += ( (Dtoday.getMonth() + 1) + "月" );
HTMLstr += ( Dtoday.getDate() + "日 " );
HTMLstr += ( TWeek[Dtoday.getDay()+1] + "</font>" );
HTMLstr += "</td></tr>\n";
HTMLstr += "</table>\n";
HTMLstr += "\n";
HTMLstr += "<!-- SUB MENU STARTS -->\n";
HTMLstr += "<!-- SUB_MENU -->\n";
HTMLstr += "<!-- SUB MENU ENDS -->\n";
HTMLstr += "\n";
if (ie) HTMLstr+= "</div>\n";
if (n) HTMLstr+= "</layer>\n";
HTMLstr += "<!-- MENU PANE DECALARATION ENDS -->\n";
}
function addItem(idItem, text, hint, location, altLocation)
{
var Lookup = "<!-- ITEM "+idItem+" -->";
if (HTMLstr.indexOf(Lookup) != -1)
{
alert(idParent + " already exist");
return;
}
var MENUitem = "";
MENUitem += "\n<!-- ITEM "+idItem+" -->\n";
if (n)
{
MENUitem += "<ilayer name="+idItem+">";
MENUitem += " | ";
MENUitem += "<a href='.' class=clsMenuItemNS onmouseover=\"displaySubMenu('"+idItem+"')\" onclick=\"return false;\">";
MENUitem += text;
MENUitem += "</a>";
MENUitem += "</ilayer>";
}
if (ie)
{
MENUitem += "<a id='"+idItem+"' ";
MENUitem += " class=clsMenuItemIE ";
if (hint != null)
{
MENUitem += "title='"+hint+"' ";
}
if (location != null)
{
MENUitem += "href='"+location+"' ";
MENUitem += "onmouseover=\"hideAll()\" ";
}
else
{
if (altLocation != null)
MENUitem += "href='"+altLocation+"' ";
else
MENUitem += "href='.' ";
MENUitem += "onmouseover=\"displaySubMenu('"+idItem+"')\" ";
MENUitem += "onclick=\"return false;\" "
}
MENUitem += "> ";
MENUitem += text;
MENUitem += " </a>|\n";
}
MENUitem += "<!-- END OF ITEM "+idItem+" -->\n\n";
MENUitem += "<!-- MAIN_MENU -->\n";
HTMLstr = HTMLstr.replace("<!-- MAIN_MENU -->\n", MENUitem);
}
function addSubItem(idParent, text, hint, location)
{
var MENUitem = "";
Lookup = "<!-- ITEM "+idParent+" -->";
if (HTMLstr.indexOf(Lookup) == -1)
{
alert(idParent + " not found");
return;
}
Lookup = "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->";
if (HTMLstr.indexOf(Lookup) == -1)
{
if (n)
{
MENUitem += "\n";
MENUitem += "<layer id='"+idParent+"submenu' visibility=hide bgcolor='"+this.bgColor+"'>\n";
MENUitem += "<table background=image/b1.gif border='"+this.subMenuPaneBorder+"' bgcolor='"+this.bgColor+"' width="+this.subMenuPaneWidth+">\n";
MENUitem += "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->\n";
MENUitem += "</table>\n";
MENUitem += "</layer>\n";
MENUitem += "\n";
}
if (ie)
{
MENUitem += "\n";
MENUitem += "<div id='"+idParent+"submenu' style='position:absolute; visibility: hidden; width: "+this.subMenuPaneWidth+"; font: "+this.menuFont+"; top: -300;'>\n";
MENUitem += "<table background=image/b1.gif border='"+this.subMenuPaneBorder+"' bgcolor='"+this.bgColor+"' width="+this.subMenuPaneWidth+">\n";
MENUitem += "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->\n";
MENUitem += "</table>\n";
MENUitem += "</div>\n";
MENUitem += "\n";
}
MENUitem += "<!-- SUB_MENU -->\n";
HTMLstr = HTMLstr.replace("<!-- SUB_MENU -->\n", MENUitem);
}
Lookup = "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->\n";
if (n) MENUitem = "<tr><td height=22 > <a class=clsMenuItemNS title='"+hint+"' href='"+location+"'>"+text+"</a><br></td></tr>\n";
if (ie) MENUitem = "<tr><td height=22 > <a class=clsMenuItemIE title='"+hint+"' href='"+location+"'>"+text+"</a><br></td></tr>\n";
MENUitem += Lookup;
HTMLstr = HTMLstr.replace(Lookup, MENUitem);
}
