知识大全 一个简单的javascript菜单
Posted 菜单
篇首语：更羡慕街边咖啡座里的目光，只一闪，便觉得日月悠长、山河无恙。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 一个简单的javascript菜单相关的知识，希望对你有一定的参考价值。
<!DOCTYPE HTML PUBLIC //W C//DTD HTML Transitional//EN ><><head><title>AgetimeMenu Demo</title><meta equiv= Content Type content= text/; charset=gb ><style> agetime_bar position:absolute;top: px;left: px;height: px;width: %;border: px outset;background color:RGB( );z index: ; agetime_barItem width: px;height: px;border: px solid RGB( );text align:left;padding left: px; background:RGB( );color:# ;font size: pt; agetime_barItemDown width: px;height: px;border: px inset RGB( );text align:left;padding left: px; background:#F F F ;color:# ;font size: pt; agetime_barItemHover width: px;height: px;border: outset;text align:left;padding left: px; background:#F F F ;color:# ;font size: pt; agetime_pad cursor:default;font size: pt;width: %; agetime_padItem width: %;height: px;border: px solid RGB( );text align:left;padding left: px; background:RGB( );color:# ;font size: pt; agetime_padItemFalse padding left: px;font size: pt; color:# ; agetime_padItemFalseHover padding left: px;font size: pt; color:# ;background color:# ; agetime_padItemHover width: %;height: px;text align:left;padding left: px; background color:# ;color:#FFFFFF;font size: pt; agetime_padItemDown width: %;height: px;text align:left;padding left: px;border: px inset; background color:# CC;color:#FFFFFF;font size: pt; agetime_hr border: px inset; agetime_board background color:RGB( );border: px 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= ; //菜单条选中按钮的索引值 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= ;i<len;i++) menu barItems[i]=menu addMenuBarItem(array[i][ ] i); menu addMenuPad(array[i] i);
//子菜单 this addMenuPad=function(ary index) var len=ary length; var pad=menu crtElement( table menu pad); pad cellSpacing= ; pad cellPadding= ; pad className=id+ _pad ; pad style display= none ; for(var i= ;i<len;i++) var Row=pad insertRow(i ); menu addMenuPadItem(ary[i] Row); menu pads[index]=pad;
//各子菜单按钮 this addMenuPadItem=function(ary Row) var Cell=Row insertCell( ); if(ary[ ]!= ) Cell innerText=ary[ ]; if(ary[ ]) //有效状态; Cell className=id+ _padItem ; Cell onmouseover=function() Cell className=id+ _padItemHover ; window status=ary[ ]; 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[ ]; 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[ ]; item disabled ]; item className=id+ _barItem ; item onmouseover=function() if(menu selectedIndex== ) item className=id+ _barItemHover ; else menu barItems[selectedIndex] className=id+ _barItem ; item className=id+ _barItemDown ; menu showMenu(index); window status=ary[ ]; item onmouseout=function() if(menu selectedIndex== ) item className=id+ _barItem ; window status= ; item onclick=function() event cancelBubble=true; if(menu selectedIndex== ) 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!= ) menu pads[selectedIndex] style display= none ; menu board style pixelLeft=menu barItems[index] offsetLeft+ ; //menu board style pixelHeight= ; if(menu pads[index] rows length> ) menu board style display= ; else menu board style display= none ; menu pads[index] style display= ; menu selectedIndex=index; //隐藏子菜单 this hideMenu=function() if(menu selectedIndex== ) return; menu barItems[menu selectedIndex] className=id+ _barItem ; menu pads[selectedIndex] style display= none ; menu selectedIndex= ; menu board style display= none ;
//执行菜单命令; this execute=function(ary) if(ary[ ]==null) return; if(ary[ ]== js ) eval(ary[ ]); menu hideMenu(); else if(ary[ ]==null || ary[ ] toLowerCase== _self ) location href=ary[ ]; else var x=window open(ary[ ] ary[ ]); x focus();
//建立子菜单的显示面板 this crtMenuBoard=function() document write( <div id= +id+ _board style= position:absolute;width: px;height: px;left: px;top: px;background color:# ;z index: ;display:none; > + <div style= position:absolute;width: %;height: %;left: px;top: px; > + <iframe id= +id+ _frame name= +id+ _frame width= % height= % frameborder= scrolling= no ></iframe> + </div> + <div id= +id+ _pad style= position:absolute;width: %;height: %;left: px;top: px; ></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);
cha138/Article/program/Java/Javascript/201311/25407相关参考