当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 一个简单的javascript菜单(5)

HTML/XHTML教程
Web浏览器模式的选择机制
XHTML+CSS建站如何调用样式表
HTML5和CSS3新的WEB标准和浏览器支持
HTML代码:网页头部代码全清楚
网页制作:HTML代码编写的30条技巧
HTML教程:link标记的rel属性
网页设计参考:firefox的默认样式
网页设计初学者必看的30个网页制作秘笈
网页制作推荐使用的XHTML标记
网页HTML代码讲解:有序列表和无序列表
IE8开发人员工具的菜单讲解
提高用户体验与新窗口打开网页的关系
解决IE支持HTML5的问题
了解如何减少 reflow 次数
平面设计理论:创造视觉冲击力作品
网页HTML 有序列表ol 和无序列表 ul
HTML Frameset 例子代码
让输入框关闭自动完成(AutoComplete)功能
IE支持HTML5的解决方法
基础 HTML之目录问题(相对路径和绝对路径区别)

HTML/XHTML教程 中的 一个简单的javascript菜单(5)


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-04   浏览: 89 ::
收藏到网摘: n/a



  //隐藏子菜单
  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==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: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>