当前位置：首页 -> 技术开发 -> Script -> 一个简单的javascript菜单

一个简单的javascript菜单

时间： 2021-07-31 作者：daque

<!doctype html public "-//w3c//dtd html 4.0 transitional//en"><html><head><title>agetimemenu demo</title><meta http-equiv="content-type" content="text/html; charset=utf8"><style> .agetime_bar{ position:absolute;top:0px;left:0px;height:22px;width:100%;border:1px outset;background-color:rgb(212,208,200);z-index:98; } .agetime_baritem{ width:60px;height:20px;border:1px solid rgb(212,208,200);text-align:left;padding-left:10px; background:rgb(212,208,200);color:#000000;font-size:9pt; } .agetime_baritemdown{ width:60px;height:20px;border:1px inset rgb(212,208,200);text-align:left;padding-left:10px; background:#f0f0f0;color:#000000;font-size:9pt; } .agetime_baritemhover{ width:60px;height:20px;border:1 outset;text-align:left;padding-left:10px; background:#f0f0f0;color:#000000;font-size:9pt; } .agetime_pad{ cursor:default;font-size:9pt;width:100%; } .agetime_paditem{ width:100%;height:18px;border:1px solid rgb(212,208,200);text-align:left;padding-left:10px; background:rgb(212,208,200);color:#000000;font-size:9pt; } .agetime_paditemfalse{ padding-left:10px;font-size:9pt; color:#808080; } .agetime_paditemfalsehover{ padding-left:10px;font-size:9pt; color:#808080;background-color:#333366; } .agetime_paditemhover{ width:100%;height:18px;text-align:left;padding-left:10px; background-color:#333366;color:#ffffff;font-size:9pt; } .agetime_paditemdown{ width:100%;height:18px;text-align:left;padding-left:10px;border:1px inset; background-color:#9999cc;color:#ffffff;font-size:9pt; } .agetime_hr{ border:1px inset; } .agetime_board{ background-color:rgb(212,208,200);border:2px outset; }</style></head><body><script language="javascript"> var menu = agetimemenu("agetime", [ [ ["文献",null,null,true,"翻开文献"], //表露笔墨,本领,吩咐,状况,状栏表露笔墨 ["翻开",null,null,false,"翻开文献"], ["--"], ["您好","js","alert('hello')",true,"一声安慰"], ["新窗口","abc","about:blank",true,"弹出abc窗口"], ["空缺",null,"about:blank",true,"在暂时窗口表露空缺页"] ], [ ["编纂",null,null,false,"翻开文献"], ["撤消",null,null,true,"翻开文献"], ["重做",null,null,true,"翻开文献"] ], [ ["文献","js","alert('无子菜单')",true,"翻开文献"] ] ] ); //本领为"js"时,吩咐则为javascript语句,为非"js"值时,吩咐则是一个url,而翻开这个url的目的场所则是本领所指定的窗口; //["您好","js","alert('hello'),true,"一声安慰"]; //表露笔墨为"--"是按钮是一个分割符;

function agetimemenu(id,array){ var menu=this; menu.pad=null; //承载各个子菜单 menu.baritems=[]; //菜单条的诸位按钮 menu.pads=[]; //每个子菜单为一个table寄存于menu.pad上; menu.selectedindex=-1; //菜单条选中按钮的索引值 menu.board=null; //子菜单面板

//创造菜单条 this.crtmenubar=function(){ var len=array.length; menu.bar = document.body.appendchild(document.createelement('div')); menu.bar.classname=id+"_bar"; for(var i=0;i<len;i++){ menu.baritems[i]=menu.addmenubaritem(array[i][0],i); menu.addmenupad(array[i],i); } }

//子菜单 this.addmenupad=function(ary,index){ var len=ary.length; var pad=menu.crtelement("table",menu.pad); pad.cellspacing=1; pad.cellpadding=0; pad.classname=id+"_pad"; pad.style.display="none"; for(var i=1;i<len;i++){ var row=pad.insertrow(i-1); menu.addmenupaditem(ary[i],row); } menu.pads[index]=pad; }

//各子菜单按钮 this.addmenupaditem=function(ary,row){ var cell=row.insertcell(0); if(ary[0]!="--"){ cell.innertext=ary[0]; if(ary[3]){ //灵验状况; cell.classname=id+"_paditem"; cell.onmouseover=function(){ cell.classname=id+"_paditemhover"; window.status=ary[4]; } cell.onmouseout=function(){ cell.classname=id+"_paditem"; window.status=""; } cell.onmousedown=function(){ cell.classname=id+"_paditemdown"; } cell.onmouseup=function(){ cell.classname=id+"_paditemhover"; menu.hidemenu(); menu.execute(ary); } } else{ //按钮失效; cell.classname=id+"_paditemfalse"; cell.onmouseover=function(){ cell.classname=id+"_paditemfalsehover"; window.status=ary[4]; } cell.onmouseout=function(){ cell.classname=id+"_paditemfalse"; window.status=""; } } } else{ var hr=menu.crtelement("hr",cell); hr.classname=id+"_hr"; } cell.onclick=function(){ event.cancelbubble=true; } }

//菜单条的按钮 this.addmenubaritem=function(ary,index){ var item=menu.crtelement("button",menu.bar); item.value=ary[0]; item.disabled=!ary[3]; item.classname=id+"_baritem"; item.onmouseover=function(){ if(menu.selectedindex==-1){ item.classname=id+"_baritemhover"; } else{ menu.baritems[selectedindex].classname=id+"_baritem"; item.classname=id+"_baritemdown"; menu.showmenu(index); } window.status=ary[4]; } item.onmouseout=function(){ if(menu.selectedindex==-1) item.classname=id+"_baritem"; window.status=""; } item.onclick=function(){ event.cancelbubble=true; if(menu.selectedindex==-1){ item.classname=id+"_baritemdown"; menu.showmenu(index); } else{ menu.hidemenu(); item.classname=id+"_baritemhover"; } menu.execute(ary); item.blur(); } return item; }

//表露子菜单 this.showmenu=function(index){ if(menu.selectedindex!=-1) menu.pads[selectedindex].style.display="none"; menu.board.style.pixelleft=menu.baritems[index].offsetleft+2; //menu.board.style.pixelheight=""; if(menu.pads[index].rows.length>0) menu.board.style.display=""; else menu.board.style.display="none"; menu.pads[index].style.display=""; menu.selectedindex=index; } //湮没子菜单 this.hidemenu=function(){ if(menu.selectedindex==-1) return; menu.baritems[menu.selectedindex].classname=id+"_baritem"; menu.pads[selectedindex].style.display="none"; menu.selectedindex=-1; menu.board.style.display="none"; }

//实行菜单吩咐; this.execute=function(ary){ if(ary[2]==null) return; if(ary[1]=="js") { eval(ary[2]); menu.hidemenu(); } else if(ary[1]==null || ary[1].tolowercase=="_self") location.href=ary[2]; else{ var x=window.open(ary[2],ary[1]); x.focus(); } }

//创造子菜单的表露面板 this.crtmenuboard=function(){ document.write( "<div id='"+id+"_board' style='position:absolute;width:160px;height:10px;left:0px;top:20px;background-color:#666666;z-index:99;display:none;'>"+ "<div style='position:absolute;width:100%;height:100%;left:0px;top:0px;'>"+ "<iframe id='"+id+"_frame' name='"+id+"_frame' width='100%' height='100%' frameborder='0' scrolling='no'></iframe>"+ "</div>"+ "<div id='"+id+"_pad' style='position:absolute;width:100%;height:100%;left:0px;top:0px;'></div>"+ "</div>" ); menu.board=document.getelementbyid(id+"_board"); menu.pad=document.getelementbyid(id+"_pad"); menu.pad.classname=id+"_board"; menu.pad.onselectstart=function(){ return false;} }

//减少对像的一个子元素 this.crtelement=function(el,p){ return p.appendchild(document.createelement(el)); }

//安置菜单; this.setup=function(){ menu.crtmenuboard(); menu.crtmenubar(); document.attachevent("onclick",menu.hidemenu); }

menu.setup(); }</script></body></html>

一个简单的javascript菜单

相关推荐

推荐下载

热门阅览

最新排行