JS实现键盘控制的菜单
2010-09-14 13:29:57 来源：WEB开发网代码没有注释,如有问题，。可在下面提出.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#top_links{ width:100%; background:#CCCCCC; padding:5px;}
a{ display:inline; padding:5px; background:#FF9900; font-size:14px; font-weight:bold; color:#333333; border:1px solid #CCCCCC; text-decoration:none;}
#left_links_item a{ display:block; width:100px; background:#0099CC;}
#left_links_item div{ margin:10px; display:none;}
</style>
<script type="text/javascript">
var tabControl=function(topTabId,leftTabId,itemSplitId){
this.topTabId=topTabId;
this.leftTabId=leftTabId;
this.topTab=document.getElementById(topTabId);
this.itemSplitId=itemSplitId;
this.topLinksArr=null;
this.LeftLinksArr=null;
this.tiindex=-1;
this.liindex=-1;
}
tabControl.prototype={
bindEventForTopLinks:function(){
var toplinks=this.topTab.getElementsByTagName('a');
this.topLinksArr=new Array();
var tc=this;
for(var i=0;i<toplinks.length;i++){
toplinks[i].onfocus=function(){
tc.bindEventForLeftLinks(tc.itemSplitId+this.id);
tc.showLeftLink(tc.itemSplitId+this.id);
this.style.cssText='background:#fff';
this.focus: #0000cc">();
}
toplinks[i].onblur=function(){
this.style.cssText='background:#FF9900';
}
tc.topLinksArr.push(toplinks[i]);
}
},
bindEventForLeftLinks:function(itemId){
this.LeftLinksArr=new Array();
var tc=this,
_item=document.getElementById(itemId),
itemsLinks=_item.getElementsByTagName('a');
for(var i=0;i<itemsLinks.length;i++){
itemsLinks[i].onfocus=function(){
this.style.cssText='background:#fff';
};
itemsLinks[i].onblur=function(){
this.style.cssText='background:#0099CC';
};
tc.LeftLinksArr.push(itemsLinks[i]);
}
},
showLeftLink:function(linksid){
var items=document.getElementById(this.leftTabId).childNodes;
var cuLinks=document.getElementById(linksid);
for(var i=0;i<items.length;i++){
if(items[i].nodeName=='DIV'){
items[i].style.cssText="display:none";
}
}
cuLinks.style.cssText="display:block";
this.bindKeyEvent(-1);
},
bindKeyEvent:function(liindex){
var _this=this,lindex=liindex||this.liindex;
document.onkeydown=function(event){
var e=event: #0000cc">||window.event;
switch(e.keyCode){
case 39:
return _this.topLinksArr[this.tiindex=this.tiindex<_this.topLinksArr.length-1?this.tiindex+=1:0].focus();
case 37:
return _this.topLinksArr[this.tiindex=this.tiindex>0?this.tiindex-=1:_this.topLinksArr.length-1].focus();
case 40:
return _this.LeftLinksArr[lindex=lindex<_this.LeftLinksArr.length-1?lindex+=1:0].focus();
case 38:
return _this.LeftLinksArr[lindex=lindex>0?lindex-=1:_this.LeftLinksArr.length-1].focus();
}
}
}
}
中查找“JS实现键盘控制的菜单”更多相关内容
中查找“JS实现键盘控制的菜单”更多相关内容更多精彩
赞助商链接
