我写了一个支持键盘的菜单。可是有一个问题请大家帮忙看看

zhangfm 2003-06-27 02:07:46
<HTML>
<HEAD>
<style>
.inputbox{
border-top:#000000 solid 0px;
border-left:#000000 solid 0px;
border-right:#000000 solid 0px;
border-bottom:#000000 solid 0px;
background:#D4D0C8;
}
.under{
text-decoration:underline;
}
.selectedRow{
background:#0A246A;color:white;
}
.unselectedRow{
background:#D4D0C8;color:black;
}
</style>
<TITLE></TITLE>
<script>
var seleMenu=0;//当前选中菜单的index
var seleMenuItem=0;//当前选中菜单项的index

document.onmouseup=myMouseDown;
function myMouseDown()
{
for(var i=0;i<xmlData.documentElement.childNodes.length;i++)
{
showDiv(eval("document.all.myFont"+i+".id"),eval("document.all.myDiv"+i+".id"),false);
}
}

document.onkeydown=myKeyDown;
function myKeyDown()
{
var length=xmlData.documentElement.childNodes.length;
for(var i=0;i<length;i++)
{
if(event.altKey)
{
showDiv(eval("document.all.myFont"+i+".id"),eval("document.all.myDiv"+i+".id"),false);
}
if(event.altKey && event.keyCode==(xmlData.documentElement.childNodes.item(i).getAttribute("menuChar").charCodeAt(0)))
{
showDiv(eval("document.all.myFont"+i+".id"),eval("document.all.myDiv"+i+".id"),true);
}else if(event.keyCode=='27')//处理ESC
{
showDiv(eval("document.all.myFont"+i+".id"),eval("document.all.myDiv"+i+".id"),false);
}
}
//处理上箭头
if(event.keyCode=='38')
{
for(var i=0;i<length;i++)
{
if(eval("document.all.myDiv"+i+".style.visibility")=="visible")
{
rowLen=eval("document.all.myTable"+i+".rows.length");
for(var j=0;j<rowLen;j++)
{
eval("document.all.myTable"+i+".rows["+j+"].className='unselectedRow'");
}
if(rowLen>0)//如果有子菜单
{
if(seleMenuItem==1)
{
seleMenuItem=rowLen;
eval("document.all.myTable"+i+".rows["+(seleMenuItem-1)+"].className='selectedRow'");
}else if(seleMenuItem==0)
{

}else
{
seleMenuItem--;
eval("document.all.myTable"+i+".rows["+(seleMenuItem-1)+"].className='selectedRow'");
}
}
}
}
}
...全文
45 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
wufanglu 2003-07-05
  • 打赏
  • 举报
回复
我以前写的公司网页
http://www.tontex.com.cn/default.asp?Step=13
中有这么一段代码:
onClick=javascript:parent.document.location.href=("?Step=22");
就是通过框架里的内容控制外面。
可以适当的更改,拿来用。
zhangfm 2003-06-30
  • 打赏
  • 举报
回复
不行的
llrock 2003-06-27
  • 打赏
  • 举报
回复
在框架页里加入对击剑消息的处理试试看,我没有试验
zhangfm 2003-06-27
  • 打赏
  • 举报
回复
现在有一个问题,由于我的菜单需要处理键盘及鼠标消息,所以必须也在程序最下面的iframe
里面处理键盘及鼠标消息,如果这样,在每个iframe里面包含的文件都要处理这个消息了,这样太麻烦了,能不能有一个比较简单的方法,最好只处理一次就可以了,请大家帮个忙
zhangfm 2003-06-27
  • 打赏
  • 举报
回复
</HEAD>
<XML ID="xmlData">
<ALLMENU>
<MENU menuText="我的菜单" menuChar="W">
<OPTION value="1">打开</OPTION>
<OPTION value="2">保存</OPTION>
<OPTION value="3">关闭</OPTION>
</MENU>
<MENU menuText="个人信息" menuChar="G">
<OPTION value="1">信息一</OPTION>
<OPTION value="2">信息二</OPTION>
<OPTION value="3">信息三</OPTION>
</MENU>
<MENU menuText="他人信息" menuChar="M">
<OPTION value="1">信息四</OPTION>
<OPTION value="2">信息五</OPTION>
<OPTION value="3">信息六</OPTION>
</MENU>
</ALLMENU>
</XML>
<BODY topmargin="0" leftmargin="0">
<form name="fmzhang" >
<script>
getHTMLStr();
</script>
</form>
<IFRAME name="listall" BORDER=1 FRAMEBORDER=0 WIDTH=100% HEIGHT=90% SRC="myhtml.htm">
</IFRAME>
</BODY>
</HTML>
zhangfm 2003-06-27
  • 打赏
  • 举报
回复
//处理下箭头
if(event.keyCode=='40')
{
for(var i=0;i<length;i++)
{
if(eval("document.all.myDiv"+i+".style.visibility")=="visible")
{
rowLen=eval("document.all.myTable"+i+".rows.length");
for(var j=0;j<rowLen;j++)
{
eval("document.all.myTable"+i+".rows["+j+"].className='unselectedRow'");
}
if(rowLen>0)//如果有子菜单
{
if(seleMenuItem==rowLen)
{
seleMenuItem=1;
eval("document.all.myTable"+i+".rows["+(seleMenuItem-1)+"].className='selectedRow'");
}else
{
seleMenuItem++;
eval("document.all.myTable"+i+".rows["+(seleMenuItem-1)+"].className='selectedRow'");
}
}
}
}
}

//处理左箭头
if(event.keyCode=='37')
{
seleMenuItem=0;
seleMenu=getShowMenuIndex();
if(seleMenu=='0')
{

}else if(seleMenu=='1')//如果是最左边的菜单
{
seleMenu=length;
showDiv(eval("document.all.myFont0.id"),eval("document.all.myDiv0.id"),false);
showDiv(eval("document.all.myFont"+(seleMenu-1)+".id"),eval("document.all.myDiv"+(seleMenu-1)+".id"),true);
}else
{
seleMenu-=1;
showDiv(eval("document.all.myFont"+seleMenu+".id"),eval("document.all.myDiv"+seleMenu+".id"),false);
showDiv(eval("document.all.myFont"+(seleMenu-1)+".id"),eval("document.all.myDiv"+(seleMenu-1)+".id"),true);
}
}

//处理右箭头
if(event.keyCode=='39')
{
seleMenuItem=0;
seleMenu=getShowMenuIndex();
if(seleMenu=='0')
{

}else if(seleMenu==length)//如果是最右边的菜单
{
showDiv(eval("document.all.myFont0.id"),eval("document.all.myDiv0.id"),true);
showDiv(eval("document.all.myFont"+(length-1)+".id"),eval("document.all.myDiv"+(length-1)+".id"),false);
seleMenu=1;
}else
{
showDiv(eval("document.all.myFont"+(seleMenu-1)+".id"),eval("document.all.myDiv"+(seleMenu-1)+".id"),false);
showDiv(eval("document.all.myFont"+seleMenu+".id"),eval("document.all.myDiv"+seleMenu+".id"),true);
seleMenu+=1;
}
}

//处理回车键
if(event.keyCode=='13')
{
if(seleMenuItem!=0)
{
var index=getShowMenuIndex();
var children=xmlData.documentElement.childNodes;
var nextChild=children.item(index-1).childNodes.item(seleMenuItem-1);
showDiv(eval("document.all.myFont"+(index-1)+".id"),eval("document.all.myDiv"+(index-1)+".id"),false);
deal(nextChild.getAttribute("value"),nextChild.text);
}
}
}
//得到显示菜单的index
function getShowMenuIndex()
{
for(var i=0;i<xmlData.documentElement.childNodes.length;i++)
{
if(eval("document.all.myDiv"+i+".style.visibility")=="visible")
{
return i+1;
}
}
return 0;
}
function deal(theValue,theText)
{
alert(theValue+" "+theText);
}

//显示或隐藏div
function showDiv(fontID,divID,b)
{
var divs=document.all.tags("DIV");
for(var i=0;i<divs.length;i++)
{
if(divs[i].id==divID)
{
if(b)
{
divs[i].style.visibility="visible";
divs[i].style.top=eval("document.all."+fontID+".offsetTop")+eval("document.all."+fontID+".offsetHeight");
divs[i].style.left=eval("document.all."+fontID+".offsetLeft");
seleMenuItem=0;
seleMenu=i+1;
var rowLen=eval("document.all.myTable"+i+".rows.length");
for(var j=0;j<rowLen;j++)
{
eval("document.all.myTable"+i+".rows["+j+"].className='unselectedRow'");
}
}else
{
divs[i].style.visibility="hidden";
seleMenuItem=0;
}
}
}
return false;
}

//窗口大小改变时隐藏所有的div
window.onresize=myOnResize;
function myOnResize()
{
var length=xmlData.documentElement.childNodes.length;
for(var i=0;i<length;i++)
{
showDiv(eval("document.all.myFont"+i+".id"),eval("document.all.myDiv"+i+".id"),false);
}
}

//生成HTML字符串
function getHTMLStr()
{
var HTMLStr="";
var children=xmlData.documentElement.childNodes;
HTMLStr+='<table width="100%" bgcolor="#D4D0C8" border="1" bordercolor="#000000">\n';
HTMLStr+="<tr>\n";
for(var i=0;i<children.length;i++)
{
HTMLStr+='<td border="1" bordercolor="D4D0C8">\n';
HTMLStr+='<font id="myFont'+i+'" title="'+children.item(i).getAttribute("menuText")+'" style="position:relative;z-index:1;" onclick="showDiv(\'myFont'+i+'\',\'myDiv'+i+'\',true)" >'+children.item(i).getAttribute("menuText")+'(<font class="under">'+children.item(i).getAttribute("menuChar")+'</font>)</font>\n';
HTMLStr+='<div id="myDiv'+i+'" style="position:absolute;visibility:hidden;z-index:3;">\n';
HTMLStr+='<table id="myTable'+i+'" bgcolor="#D4D0C8" border="1" bordercolor="#000000">\n';
for(var j=0;j<children.item(i).childNodes.length;j++)
{
HTMLStr+='<tr class="unselectedRow" onmouseover="this.className=\'selectedRow\';seleMenuItem='+(j+1)+'" onmouseout="this.className=\'unselectedRow\';seleMenuItem='+0+' ">\n';
HTMLStr+='<td border="1" bordercolor="D4D0C8">\n';
HTMLStr+='<font onclick="deal(\''+children.item(i).childNodes.item(j).getAttribute("value")+'\',\''+children.item(i).childNodes.item(j).text+'\')" title="'+children.item(i).childNodes.item(j).text+'">'+children.item(i).childNodes.item(j).text+'</font>\n';
HTMLStr+='</td>\n';
HTMLStr+='</tr>\n';
}
HTMLStr+='</table>\n';
HTMLStr+='</div>\n';
HTMLStr+='</td>\n';
}
HTMLStr+="</tr>\n";
HTMLStr+='</table>\n';
//alert(HTMLStr);
document.writeln(HTMLStr);
}
</script>

87,910

社区成员

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

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