在jsp中怎么实现类似qq的菜单?

hdczf 2003-08-18 05:12:26
如题,最好能提供实例,谢谢!
...全文
21 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
seabell 2003-08-19
  • 打赏
  • 举报
回复
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>

<body onload=constructmenu(); bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="778" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="124">
<UL id=mytree style="DISPLAY: none">
<LI value=Mail>
<UL HREF="contents.htm" VALUE="InBox" IMGSRC="inbox.gif"></UL>
<UL HREF="contents.htm" VALUE="OutBox" IMGSRC="outbox.gif"></UL>
<UL HREF="contents.htm" VALUE="Sent" IMGSRC="sentitems.gif"></UL>
<UL HREF="contents.htm" VALUE="Deleted" IMGSRC="deleted.gif"></UL>
<LI value=Contacts>
<UL HREF="contents.htm" VALUE="Contacts" IMGSRC="contacts.gif"></UL>
<LI value=Other>
<UL HREF="contents.htm" VALUE="Journal" IMGSRC="journal.gif"></UL>
<UL HREF="contents.htm" VALUE="Tasks" IMGSRC="tasks.gif"></UL>
<UL HREF="contents.htm" VALUE="Notes" IMGSRC="notes.gif"></UL>
<UL HREF="contents.htm" VALUE="Calendar" IMGSRC="calendar.gif"></UL>
</LI>
<LI value=Othdddder>
<UL HREF="contents.htm" VALUE="Journal" IMGSRC="journal.gif"></UL>
<UL HREF="contents.htm" VALUE="Tasks" IMGSRC="tasks.gif"></UL>
<UL HREF="contents.htm" VALUE="Notes" IMGSRC="notes.gif"></UL>
<UL HREF="dfef" VALUE="Calendar" IMGSRC="calendar.gif"></UL>
</LI>
</UL>
<SCRIPT language=javascript>
<!--
//Size of buttons.
var BTN_HEIGHT = 25;
var BTN_WIDTH = 100;
//Space between buttons.
var BTN_SPACE = 1;

var ITM_HEIGHT = 80;
var ITM_SPACE = 2;

var ButtonCount = 0;
var ItemCounts;
var FocusButton;
//reset postion of buttons and items, show clicked button's items, hide other items.
function onBtnClick(btnIndex)
{
var i;
var minHeight;
var btmBtnTop;
if ((btn < 0) || (btn >= ButtonCount)) return;
document.body.scrollTop = 0;
for(i=0; i<=btnIndex; i++)
{
var btn = document.all.item("BTN" + i);
if (btn == null)
alert("NULL BTN");
else
btn.style.posTop = i * (BTN_HEIGHT + BTN_SPACE);
};
//minimun height used by buttons and items.
minHeight = ButtonCount * (BTN_HEIGHT + BTN_SPACE) - BTN_SPACE + ItemCounts[btnIndex] * (ITM_HEIGHT + ITM_SPACE);
//calculate bottom button's start top position.
if (minHeight > document.body.clientHeight)
{
document.body.setAttribute("SCROLL", "YES", false);
btmBtnTop = (btnIndex+1) * (BTN_HEIGHT + BTN_SPACE) - BTN_SPACE + ItemCounts[btnIndex] * (ITM_HEIGHT + ITM_SPACE);
}
else
{
document.body.setAttribute("SCROLL", "NO", false);
btmBtnTop = document.body.clientHeight - (ButtonCount - btnIndex -1) * (BTN_HEIGHT + BTN_SPACE);
}
for(i=btnIndex + 1; i<ButtonCount; i++)
{
var btn = document.all.item("BTN" + i);
if (btn == null)
alert("NULL BTN");
else
btn.style.posTop = btmBtnTop;
btmBtnTop += (BTN_HEIGHT + BTN_SPACE);
};
var itmtop = (BTN_HEIGHT + BTN_SPACE) * (btnIndex + 1);
for(i=0; i<ButtonCount; i++)
for(j=0; j<ItemCounts[i]; j++)
{
var tbl = document.all.item("ITM" + i + "_" + j);
if (null == tbl) continue;
if (i == btnIndex)
{
tbl.style.posTop = itmtop + j * (ITM_HEIGHT + ITM_SPACE);
tbl.style.visibility = "visible";
}
else
tbl.style.visibility = "hidden";
//tbl.style.display = "none";
}
FocusButton = btnIndex;
};

function onResize()
{
onBtnClick(FocusButton);
}

function constructmenu()
{
var i,j;
var str;
str = "";
ItemCounts = new Array();
for(i=0; i<mytree.children.length; i++)
{
var item = mytree.children.item(i);
str += '<INPUT TYPE="BUTTON" '+
'ID="BTN' + i + '" '+
'VALUE="' + item.getAttribute("VALUE") +'" ' +
'STYLE="position:absolute; HEIGHT: ' + BTN_HEIGHT + 'px; WIDTH: ' + BTN_WIDTH + 'px;" ' +
'ONCLICK="onBtnClick(' + i +');' +
'">';
str += '\n<BR>';
ItemCounts[i] = 0;
for(j=0; j < item.children.length; j++)
{
str += '<TABLE WIDTH=' + BTN_WIDTH + ' ID="ITM' + i + '_' + j + '" STYLE="position:absolute;">';
str += '<TR><TD ALIGN=CENTER>';
str += '<A HREF=' + item.children.item(j).getAttribute("HREF") + ' TARGET="CONTENTS">';
str += '<IMG SRC="' + item.children.item(j).getAttribute("IMGSRC") + '" ALIGN=CENTER STYLE="border:none;">';
str += '</A>';
str += '</TD></TR>';
str += '<TR><TD ALIGN=CENTER>';
str += item.children.item(j).getAttribute("VALUE");
str += '</TD></TR>';
str += '</TABLE>';
ItemCounts[i] ++;

}
ButtonCount ++;
}
menu.outerHTML = str; onBtnClick(0);
//menu.innerText = str;
FocusButton = 0;
window.onresize = onResize;
}

//-->
</SCRIPT>

<DIV id=menu></DIV>

</td>
<td width="654"> </td>
</tr>
</table>
</body>
</html>
hdczf 2003-08-19
  • 打赏
  • 举报
回复
十分感谢seabell(百合心)!!!!
hdczf 2003-08-18
  • 打赏
  • 举报
回复
re

81,090

社区成员

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧