msgbartop
世界上没有老实人,所谓的老实人是用来欺骗像我这样老实的人!
msgbarbottom

01 6月 06 一个简单的仿XP的JS下拉菜单

2006年6月01日发表于Net.Ru | 共有:0 人评论

  一个简单的仿xp的js下拉菜单,本来想用在我的网站的后台管理,但后来发现不实用,还是采用了左右框架的树型菜单,但这个程序既然写出来了,贴出来,希望对其它人有用,有兴趣的朋友可以对快捷键功能进行扩展,目前留有接口,但未实现。

menu.htm(菜单主文件)

代码:
<html>

<head>

  <title>Noteless Valley(lijun.org)程序示例</title>

  <meta name=&#34;GENERATOR&#34; content=&#34;Microsoft Visual Studio.NET 7.0&#34;>

  <meta name=&#34;vs_targetSchema&#34; content=&#34;http://schemas.microsoft.c…

  <meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=gb2312&#34;>

  <link href=&#34;xp_menu.css&#34; rel=&#34;stylesheet&#34; type=&#34;text/css&#34;>

  <script language=&#34;javascript&#34; src=&#34;xp_menu.js&#34;></script>

  <script language=&#34;javascript&#34; for=&#34;document&#34; event=&#34;onsel&#101;ctstart&#34;>

<!–

return document_onsel&#101;ctstart()

//–>

  </script>

  <script language=&#34;javascript&#34; for=&#34;document&#34; event=&#34;onclick&#34;>

<!–

return document_onclick()

//–>

  </script>

</head>

<body scroll=&#34;no&#34; language=&#34;javascript&#34; onresize=&#34;return window_onresize()&#34; onload=&#34;return window_onload()&#34;>

  <script language=&#34;javascript&#34;>

<!–

//定义一个主菜单对象

var mnuMain = new menu(&#34;mnuMain&#34;);    

mnuMain.bar[0] = new menu_bar(&#34;mnuMainNL&#34;,&#34;&#34;,&#34;无名谷&#34;,&#34;&#34;,&#34;Noteless Valley&#34;,&#34;&#34;,0,&#34;mnuNL&#34;);

mnuMain.bar[1] = new menu_bar(&#34;mnuMainSiteAdmin&#34;,&#34;&#34;,&#34;网站管理&#34;,&#34;&#34;,&#34;网站管理&#34;,&#34;&#34;,0,&#34;mnuSiteAdmin&#34;);

mnuMain.bar[2] = new menu_bar(&#34;mnuMainSystem&#34;,&#34;&#34;,&#34;系统管理&#34;,&#34;&#34;,&#34;系统管理&#34;,&#34;&#34;,0,&#34;mnuSystem&#34;);

mnuMain.bar[3] = new menu_bar(&#34;mnuMainShow&#34;,&#34;&#34;,&#34;演示菜单&#34;,&#34;&#34;,&#34;Menu Show&#34;,&#34;&#34;,0,&#34;mnuShow&#34;);

popMainMenu(mnuMain,0,0,&#34;100%&#34;,27);    //激活主菜单,通过参数确定主菜单的位置

var mnuNL = new menu(&#34;mnuNL&#34;);

mnuNL.bar[0] = new menu_bar(&#34;mnuHomePage&#34;,&#34;&#34;,&#34;首页&#34;,&#34;&#34;,&#34;HomePage&#34;,&#34;&#34;,1,&#34;http://lijun.org&#34;)…

mnuNL.bar[1] = new menu_bar(&#34;mnuDesign&#34;,&#34;&#34;,&#34;网页设计&#34;,&#34;&#34;,&#34;Design&#34;,&#34;&#34;,1,&#34;http://lijun.org/article.a…

mnuNL.bar[2] = new menu_bar(&#34;mnuProgram&#34;,&#34;&#34;,&#34;网络编程&#34;,&#34;&#34;,&#34;Program&#34;,&#34;&#34;,1,&#34;http://lijun.org/article.a…

mnuNL.bar[3] = new menu_bar(&#34;mnuOthers&#34;,&#34;&#34;,&#34;其它文章&#34;,&#34;&#34;,&#34;Others&#34;,&#34;&#34;,1,&#34;http://lijun.org/article.a…

popSubMenu(mnuNL);

var mnuSiteAdmin = new menu(&#34;mnuSiteAdmin&#34;)

mnuSiteAdmin.bar[0] = new menu_bar(&#34;mnuAddressUp&#100;ate&#34;,&#34;&#34;,&#34;访问地区更新&#34;,&#34;&#34;,&#34;访问地区更新&#34;,&#34;&#34;,1,&#34;AddressUp&#100;ate.asp&#34;);

popSubMenu(mnuSiteAdmin);

var mnuSystem = new menu(&#34;mnuSystem&#34;);

mnuSystem.bar[0] = new menu_bar(&#34;mnuSysUser&#34;,&#34;&#34;,&#34;用户管理&#34;,&#34;&#34;,&#34;用户管理&#34;,&#34;&#34;,1,&#34;userAdmin.asp&#34;);

mnuSystem.bar[1] = new menu_bar(&#34;mnuSysAuthority&#34;,&#34;&#34;,&#34;权限管理&#34;,&#34;&#34;,&#34;权限管理&#34;,&#34;&#34;,1,&#34;authority.asp&#34;);

mnuSystem.bar[2] = new menu_bar(&#34;-&#34;,&#34;&#34;,&#34;&#34;,&#34;&#34;,&#34;&#34;,&#34;&#34;,&#34;&#34;,&#34;&#34;);

mnuSystem.bar[3] = new menu_bar(&#34;mnuSysPwdChange&#34;,&#34;&#34;,&#34;口令修改&#34;,&#34;&#34;,&#34;口令修改&#34;,&#34;&#34;,1,&#34;chgpwd.asp&#34;);

mnuSystem.bar[4] = new menu_bar(&#34;-&#34;,&#34;&#34;,&#34;&#34;,&#34;&#34;,&#34;&#34;,&#34;&#34;,&#34;&#34;,&#34;&#34;);

mnuSystem.bar[5] = new menu_bar(&#34;mnuSysHelp&#34;,&#34;&#34;,&#34;帮助&#34;,&#34;&#34;,&#34;帮助&#34;,&#34;&#34;,1,&#34;help.asp&#34;);

mnuSystem.bar[6] = new menu_bar(&#34;mnuSysAbout&#34;,&#34;&#34;,&#34;关于本系统&#34;,&#34;&#34;,&#34;关于本系统&#34;,&#34;&#34;,1,&#34;about.asp&#34;);

mnuSystem.bar[7] = new menu_bar(&#34;-&#34;,&#34;&#34;,&#34;&#34;,&#34;&#34;,&#34;&#34;,&#34;&#34;,&#34;&#34;,&#34;&#34;);

mnuSystem.bar[8] = new menu_bar(&#34;mnuSysExit&#34;,&#34;&#34;,&#34;退出系统&#34;,&#34;&#34;,&#34;退出本系统&#34;,&#34;&#34;,1,&#34;quit.asp&#34;);

popSubMenu(mnuSystem);

var mnuShow = new menu(&#34;mnuShow&#34;);

mnuShow.bar[0] = new menu_bar(&#34;mnuShow1&#34;,&#34;&#34;,&#34;演示菜单一&#34;,&#34;&#34;,&#34;Menu Show 1&#34;,&#34;&#34;,1,&#34;menushow1.asp&#34;);

mnuShow.bar[1] = new menu_bar(&#34;mnuShow2&#34;,&#34;&#34;,&#34;演示菜单二&#34;,&#34;&#34;,&#34;Menu Show 2&#34;,&#34;&#34;,0,&#34;mnuShow_2&#34;);

mnuShow.bar[2] = new menu_bar(&#34;mnuShow3&#34;,&#34;&#34;,&#34;演示菜单三&#34;,&#34;&#34;,&#34;Menu Show 3&#34;,&#34;&#34;,1,&#34;menushow3.asp&#34;);

mnuShow.bar[3] = new menu_bar(&#34;-&#34;,&#34;&#34;,&#34;&#34;,&#34;&#34;,&#34;&#34;,&#34;&#34;,&#34;&#34;,&#34;&#34;);

mnuShow.bar[4] = new menu_bar(&#34;mnuShow4&#34;,&#34;&#34;,&#34;演示菜单四&#34;,&#34;&#34;,&#34;Menu Show 4&#34;,&#34;&#34;,1,&#34;menushow4.asp&#34;);

mnuShow.bar[5] = new menu_bar(&#34;mnuShow5&#34;,&#34;&#34;,&#34;演示菜单五&#34;,&#34;&#34;,&#34;Menu Show 5&#34;,&#34;&#34;,0,&#34;mnuShow_2&#34;);

popSubMenu(mnuShow);

var mnuShow_2 = new menu(&#34;mnuShow_2&#34;);

mnuShow_2.bar[0] = new menu_bar(&#34;mnuShow21&#34;,&#34;&#34;,&#34;演示菜单二一&#34;,&#34;&#34;,&#34;Menu Show 2.1&#34;,&#34;&#34;,1,&#34;menushow21.asp&#34;);

mnuShow_2.bar[1] = new menu_bar(&#34;mnuShow22&#34;,&#34;&#34;,&#34;演示菜单二二&#34;,&#34;&#34;,&#34;Menu Show 2.2&#34;,&#34;&#34;,0,&#34;mnuShow_22&#34;);

mnuShow_2.bar[2] = new menu_bar(&#34;mnuShow23&#34;,&#34;&#34;,&#34;演示菜单二三&#34;,&#34;&#34;,&#34;Menu Show 2.3&#34;,&#34;&#34;,1,&#34;menushow23.asp&#34;);

mnuShow_2.bar[3] = new menu_bar(&#34;mnuShow24&#34;,&#34;&#34;,&#34;演示菜单二四&#34;,&#34;&#34;,&#34;Menu Show 2.4&#34;,&#34;&#34;,0,&#34;mnuShow_22&#34;);

mnuShow_2.bar[4] = new menu_bar(&#34;mnuShow25&#34;,&#34;&#34;,&#34;演示菜单二五&#34;,&#34;&#34;,&#34;Menu Show 2.5&#34;,&#34;&#34;,1,&#34;menushow25.asp&#34;);

popSubMenu(mnuShow_2);

var mnuShow_22 = new menu(&#34;mnuShow_22&#34;);

mnuShow_22.bar[0] = new menu_bar(&#34;mnuShow221&#34;,&#34;&#34;,&#34;演示菜单二二一&#34;,&#34;&#34;,&#34;Menu Show 2.2.1&#34;,&#34;&#34;,1,&#34;menushow221.asp&#34;);

mnuShow_22.bar[1] = new menu_bar(&#34;mnuShow222&#34;,&#34;&#34;,&#34;演示菜单二二二&#34;,&#34;&#34;,&#34;Menu Show 2.2.2&#34;,&#34;&#34;,1,&#34;menushow222.asp&#34;);

mnuShow_22.bar[2] = new menu_bar(&#34;mnuShow223&#34;,&#34;&#34;,&#34;演示菜单二二三&#34;,&#34;&#34;,&#34;Menu Show 2.2.3&#34;,&#34;&#34;,1,&#34;menushow223.asp&#34;);

popSubMenu(mnuShow_22);

//–>

  </script>

  <table border=0 cellpadding=0 cellspacing=0><tr><td height=27>此部分已经被顶部菜单条覆盖</td></tr></table>

  <p id=lblOutput>信息提示区域</p>

</body>

</html>

xp_menu.css(样式表)

代码:
body {

FONT-SIZE: 13px;

MARGIN: 0px;

SCROLLBAR-SHADOW-COLOR: silver;

SCROLLBAR-3DLIGHT-COLOR: silver;

LINE-HEIGHT: 20px;

FONT-FAMILY: Verdana, 宋体;

SCROLLBAR-DARKSHADOW-COLOR: silver;

BACKGROUND-COLOR: #ff99cc;

border: none;

}

DIV.MainMenuBG

{

border-right: teal 1px solid;

font-size: 14px;

border-left: #ffffff 1px solid;

cursor: default;

color: #000000;

border-bottom: teal 1px solid;

font-family: Verdana, 宋体;

position: absolute;

background-color: #d6d3ce;

}

DIV.MainMenu

{

border-right: #d6d3ce 1px solid;

padding-right: 8px;

border-top: #d6d3ce 1px solid;

padding-left: 8px;

padding-bottom: 1px;

border-left: #d6d3ce 1px solid;

cursor: default;

padding-top: 1px;

border-bottom: #d6d3ce 1px solid;

position: absolute;

background-color: #d6d3ce;

}

DIV.MainMenuOver

{

border-right: #08246b 1px solid;

padding-right: 8px;

border-top: #08246b 1px solid;

padding-left: 8px;

padding-bottom: 1px;

border-left: #08246b 1px solid;

cursor: default;

padding-top: 1px;

border-bottom: #08246b 1px solid;

position: absolute;

background-color: #b5bed6;

}

DIV.MainMenuClick

{

border-right: #636563 1px solid;

padding-right: 8px;

border-top: #636563 1px solid;

padding-left: 8px;

padding-bottom: 1px;

border-left: #636563 1px solid;

cursor: default;

padding-top: 1px;

border-bottom: #636563 1px solid;

position: absolute;

background-color: #dedbd6;

}

DIV.SubMenuBG

{

border-right: #636563 1px solid;

border-top: #636563 1px solid;

font-size: 14px;

visibility: hidden;

border-left: #636563 1px solid;

color: #000000;

border-bottom: #636563 1px solid;

font-family: Verdana, 宋体;

position: absolute;

background-color: #fffbf7;

}

DIV.SubMenu

{

cursor: default;

position: absolute;

}

DIV.SubMenuOver

{

cursor: default;

position: absolute;

}

TD.ico

{

border-top: #dedbd6 1px solid;

border-left: #dedbd6 1px solid;

border-bottom: #dedbd6 1px solid;

background-color: #dedbd6;

}

TD.icoOver

{

border-top: #08246b 1px solid;

border-left: #08246b 1px solid;

border-bottom: #08246b 1px solid;

background-color: #b5bed6;

border-right-width: 1px;

border-right-color: #08246b;

}

TD.text

{

padding-right: 2px;

border-top: #fffbf7 1px solid;

padding-left: 5px;

border-bottom: #fffbf7 1px solid;

background-color: #fffbf7;

}

TD.textOver

{

padding-right: 2px;

border-top: #08246b 1px solid;

padding-left: 5px;

border-bottom: #08246b 1px solid;

background-color: #b5bed6;

}

TD.skey

{

padding-right: 2px;

border-top: #fffbf7 1px solid;

padding-left: 2px;

border-bottom: #fffbf7 1px solid;

background-color: #fffbf7;

}

TD.skeyOver

{

padding-right: 2px;

border-top: #08246b 1px solid;

padding-left: 2px;

border-bottom: #08246b 1px solid;

background-color: #b5bed6;

}

TD.sub

{

border-right: #fffbf7 1px solid;

border-top: #fffbf7 1px solid;

border-bottom: #fffbf7 1px solid;

background-color: #fffbf7;

}

TD.subOver

{

border-right: #08246b 1px solid;

border-top: #08246b 1px solid;

border-bottom: #08246b 1px solid;

background-color: #b5bed6;

}

DIV.SubMenu TD

{

font-size: 14px;

padding-top: 2px;

}

xp_menu.js(.js包含文件)

代码:
<!–

// menu source code

//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

//    以下为建立菜单的部分

//_______________________________________

//菜单条的结构

function menu_bar(name,ico,text,key,tip,skey,type,cmd) {

  this.name = name;     //名称

  this.ico = ico;      //图标

  this.text = text;     //文字

  this.key = key;      //热键

  this.tip = tip;      //提示

  this.skey = skey;     //快捷键

  this.type = type;     //命令类型,0为弹出下级菜单,1为执行一个命令(跳转到另一个文件)

  this.cmd = cmd;      //下级菜单的名称或命令字符串,根据type的值而定

}

//菜单的结构

function menu(name) {

  this.name = name;      //名称

  this.bar = new Array();   //所包含的菜单条数组

}

//输出一已定义的主菜单,横排的

function popMainMenu(menu,left,top,width,height) {

  

  var strHTML, posLeft, posTop, i;

  

  strHTML = &#34;<div id=&#39;&#34; + menu.name + &#34;&#39; style=&#39;left:&#34; + left + &#34;;top:&#34; + top + &#34;;width:&#34; + width + &#34;;height:&#34; + height + &#34;&#39; class=&#39;MainMenuBG&#39;>&#34;

  document.write (strHTML);

  

  posLeft = 2;

  posTop = 1;

  for (i=0;i<menu.bar.length;i++) {

   strHTML = &#34;<div id=&#39;&#34; + menu.bar[i].name + &#34;&#39; nowrap style=&#39;left:&#34; + posLeft + &#34;;top:&#34; + posTop + &#34;;&#39; class=&#39;MainMenu&#39; &#34; +

        &#34;onmouseover=&#39;return menu_onmouseover(this,&#34;&#34; + menu.bar[i].cmd + &#34;&#34;)&#39; onmouseout=&#39;return menu_onmouseout(this)&#39; &#34; +

        &#34;onclick=&#39;return menu_onclick(this,&#34;&#34; + menu.bar[i].cmd + &#34;&#34;)&#39; title=&#39;&#34; + menu.bar[i].tip + &#34;&#39;>&#34; + menu.bar[i].text;

   if (menu.bar[i].key!=&#34;&#34;) {

    strHTML += &#34;(<u>&#34; + menu.bar[i].key + &#34;</u>)&#34;;

   }

   strHTML += &#34;</div>&#34;;

   document.write (strHTML);

   posLeft += document.all.item(menu.bar[i].name).offsetWidth + 1;

  }

  

  strHTML = &#34;</div>&#34;;

  document.write (strHTML);

}

//输出一个已定义的子菜单,竖排的

function popSubMenu(menu) {

  

  var strHTML, posLeft, posTop, i;

  

  strHTML = &#34;<div id=&#39;&#34; + menu.name + &#34;&#39; style=&#39;left:20;top:30;width:244;height:300;&#39; class=&#39;SubMenuBG&#39;>&#34;

  document.write (strHTML);

  

  posLeft = 1;

  posTop = 1;

  

  for (i=0;i<menu.bar.length;i++) {

   if (menu.bar[i].name!=&#34;-&#34;) {    //如果名称不是“-”,表示是一个普通菜单条

    strHTML = &#34;<div id=&#39;&#34; + menu.bar[i].name + &#34;&#39; style=&#39;left:&#34; + posLeft + &#34;;top:&#34; + posTop + &#34;;&#39; class=&#39;SubMenu&#39; &#34; +

         &#34;title=&#39;&#34; + menu.bar[i].tip + &#34;&#39; &#34; +

         &#34;onmouseover=&#39;return bar_onmouseover(this,&#34; + menu.bar[i].type + &#34;,&#34;&#34; + menu.bar[i].cmd + &#34;&#34;)&#39; &#34; +

         &#34;onmouseout=&#39;return bar_onmouseout(this,&#34; + menu.bar[i].type + &#34;,&#34;&#34; + menu.bar[i].cmd + &#34;&#34;)&#39; &#34; +

         &#34;onclick=&#39;return bar_onclick(this,&#34; + menu.bar[i].type + &#34;,&#34;&#34; + menu.bar[i].cmd + &#34;&#34;)&#39;>&#34; +

         &#34;  <table border=0 cellspacing=0 cellpadding=0 width=240>&#34; +

         &#34;    <tr>&#34; +

         &#34;      <td nowrap align=center width=20 id=&#39;&#34; + menu.bar[i].name + &#34;_ico&#39; class=&#39;ico&#39;>&#34;;

    if (menu.bar[i].ico!=&#34;&#34;) {

     strHTML += &#34;<img border=0 width=16 height=16 src=&#39;&#34; + menu.bar[i].ico + &#34;&#39;>&#34;;

    }else {

     strHTML += &#34;&amp;nbsp;&#34;;

    }

    strHTML += &#34;</td>&#34; +

         &#34;      <td nowrap id=&#39;&#34; + menu.bar[i].name + &#34;_text&#39; class=&#39;text&#39;>&#34; + menu.bar[i].text;

    if (menu.bar[i].key!=&#34;&#34;) { strHTML = strHTML + &#34;(<u>&#34; + menu.bar[i].key + &#34;</u>)&#34;; }

    strHTML += &#34;</td>&#34; +

         &#34;<td nowrap align=right id=&#39;&#34; + menu.bar[i].name + &#34;_skey&#39; class=&#39;skey&#39;>&#34;;

    if (menu.bar[i].skey!=&#34;&#34;) {

     strHTML += menu.bar[i].skey;

    }else {

     strHTML += &#34;&amp;nbsp;&#34;;

    }

    strHTML += &#34;     </td>&#34; +

         &#34;      <td nowrap align=center width=20 id=&#39;&#34; + menu.bar[i].name + &#34;_sub&#39; class=&#39;sub&#39;>&#34;;

    if (menu.bar[i].type==0) {

     strHTML += &#34;→&#34;;

    }else {

     strHTML += &#34;&amp;nbsp;&amp;nbsp;&#34;;

    }

    strHTML += &#34;</td>&#34; +

         &#34;    </tr>&#34; +

         &#34;  </table>&#34; +

         &#34;</div>&#34;;

    document.write (strHTML);

    posTop += document.all.item(menu.bar[i].name).offsetHeight;

   }else {       //如果名称是“-”,表示是一条分隔线

    strHTML = &#34;<div style=&#39;left:&#34; + posLeft + &#34;;top:&#34; + posTop + &#34;;&#39; class=&#39;SubMenu&#39;>&#34; +

         &#34;  <table border=0 cellpadding=0 cellspacing=0 width=240>&#34; +

         &#34;    <tr>&#34; +

         &#34;      <td nowrap style=&#39;background-color: #dedbd6;&#39; width=21></td>&#34; +

         &#34;      <td nowrap style=&#39;padding-left:5px;padding-top:1px;padding-bottom:1px;&#39;>&#34; +

         &#34;        <table border=0 cellpadding=0 cellspacing=0 width=100%>&#34; +

         &#34;          <tr><td height=1 bgcolor=&#39;#636563&#39;></td></tr>&#34; +

         &#34;        </table>&#34; +

         &#34;      </td>&#34; +

         &#34;    </tr>&#34; +

         &#34;  </table>&#34; +

         &#34;</div>&#34;;

    document.write (strHTML);

    posTop += 3;

   }

  }

  

  strHTML = &#34;</div>&#34;

  document.write (strHTML);

  document.all.item(menu.name).style.height = posTop+3;    //重设子菜单背景框

}

//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

//    以下为操纵菜单的部分

//_________________________________________________

function showMenu(menu,submenu) {  //显示一级子菜单

  document.all.item(submenu).style.left = menu.parentElement.offsetLeft + menu.offsetLeft + 1;   //设置子菜单位置

  document.all.item(submenu).style.top = menu.parentElement.offsetTop + menu.offsetTop + menu.offsetHeight -1;   //设置子菜单的位置

  document.all.item(submenu).style.visibility = &#34;visible&#34;;   //显示子菜单

  mnuPrev[mnuPrev.length] = new menuinfo(submenu,1);   //将新打开的子菜单的ID加入当前显示菜单ID数组

}

function showSubMenu(menu,submenu) {  //显示二级及以下子菜单

  document.all.item(submenu).style.left = menu.parentElement.offsetLeft + menu.offsetLeft + menu.offsetWidth + 2;   //设置子菜单位置

  document.all.item(submenu).style.top = menu.parentElement.offsetTop + menu.offsetTop + 1;   //设置子菜单的位置

  if (document.all.item(submenu).offsetLeft + document.all.item(submenu).offsetWidth > doc_width) {

   document.all.item(submenu).style.left = menu.parentElement.offsetLeft – document.all.item(submenu).offsetWidth + 1;

  }

  if (document.all.item(submenu).offsetTop + document.all.item(submenu).offsetHeight > doc_height) {

   document.all.item(submenu).style.top = document.all.item(submenu).offsetTop + menu.offsetHeight – document.all.item(submenu).offsetHeight + 2;

  }

  document.all.item(submenu).style.visibility = &#34;visible&#34;;   //显示子菜单

  mnuPrev[mnuPrev.length] = new menuinfo(submenu,1);   //将新打开的子菜单的ID加入当前显示菜单ID数组

}

function showstatus() {   //测试阶段用的函数,显示当前菜单ID数组内的内容

  lblMsg.innerText = &#34;&#34;;

  for(var i=0;i<mnuPrev.length;i++) {

   lblMsg.innerText += mnuPrev[i].id + &#34; > &#34;;

  }

}

function menuinfo(id,type) {

  this.id = id;    //0表示菜单项,1表示菜单框

  this.type = type;

}

function menu_onmouseover(obj,cmd) {

  if(!mClick) {

   obj.className = &#34;MainMenuOver&#34;;

   mnuPrev[mnuPrev.length] = new menuinfo(obj.id,0);    //将当前的菜单ID压入当前菜单ID数组

   //showstatus();   //调试阶段使用

  }else {

   if (mnuPrev[0].id == obj.id) { return false; }   //如果是在本身上移动,不作为

   document.all.item(mnuPrev[0].id).className = &#34;MainMenu&#34;;

   for (var i=1;i<mnuPrev.length;i++) {

    if (mnuPrev[i].type==0) {   //如果是菜单项,设置成默认样式

     document.all.item(mnuPrev[i].id + &#34;_ico&#34;).className = &#34;ico&#34;;

     document.all.item(mnuPrev[i].id + &#34;_text&#34;).className = &#34;text&#34;;

     document.all.item(mnuPrev[i].id + &#34;_skey&#34;).className = &#34;skey&#34;;

     document.all.item(mnuPrev[i].id + &#34;_sub&#34;).className = &#34;sub&#34;;

    }else {   //如果是菜单框,隐藏它

     document.all.item(mnuPrev[i].id).style.visibility = &#34;hidden&#34;;

    }

   }

   mnuPrev.length = 0;

   obj.className = &#34;MainMenuClick&#34;;

   mnuPrev[mnuPrev.length] = new menuinfo(obj.id,0);

   showMenu(obj,cmd);

   //showstatus();   //调试阶段使用

  }

}

function menu_onmouseout(obj) {

  if(!mClick) {

   obj.className = &#34;MainMenu&#34;;

   mnuPrev.length –;   //清除最后一个压入当前菜单ID数组的菜单ID

   //showstatus();   //调试阶段使用

  }

}

function menu_onclick(obj,cmd) {

  if(!mClick) {    //如果菜单当前状态是非点击状态,证明当前是从非点击状态到点击状态

   obj.className = &#34;MainMenuClick&#34;;    //设置当前菜单为鼠标单击之后的状态

   showMenu(obj,cmd);    //显示子菜单

   //showstatus();   //调试阶段使用

   mClick = true;   //设置菜单当前是点击状态

  }else {

   obj.className = &#34;MainMenuOver&#34;;    //设置当前菜单为鼠标移动上面的状态,非点击状态

   document.all.item(mnuPrev[mnuPrev.length-1].id).style.visibility = &#34;hidden&#34;;

   mnuPrev.length –;

   //showstatus();   //调试阶段使用

   mClick = false;    //主菜单当前是非点击状态

  }

  bMenuClick = true;   //在一个菜单上单击后设置其状态为true,用来屏蔽document_click事件

}

function bar_onmouseover(obj,type,cmd) {

  for (var i=1;i<mnuPrev.length;i++) {

   if(mnuPrev[i].id==obj.parentElement.id) {

    for (var j=i+1;j<mnuPrev.length;j++) {    //处理由前一个菜单项打开的子菜单,可能有多层

     if (mnuPrev[j].type==0) {   //如果是菜单项,设置成默认样式

      document.all.item(mnuPrev[j].id + &#34;_ico&#34;).className = &#34;ico&#34;;

      document.all.item(mnuPrev[j].id + &#34;_text&#34;).className = &#34;text&#34;;

      document.all.item(mnuPrev[j].id + &#34;_skey&#34;).className = &#34;skey&#34;;

      document.all.item(mnuPrev[j].id + &#34;_sub&#34;).className = &#34;sub&#34;;

     }else {   //如果是菜单框,隐藏它

      document.all.item(mnuPrev[j].id).style.visibility = &#34;hidden&#34;;

     }

    }

    mnuPrev.length = i + 1;

    break;

   }

  }

  mnuPrev[mnuPrev.length] = new menuinfo(obj.id,0);

  //showstatus();   //调试阶段使用

  document.all.item(obj.id + &#34;_ico&#34;).className = &#34;icoOver&#34;;

  document.all.item(obj.id + &#34;_text&#34;).className = &#34;textOver&#34;;

  document.all.item(obj.id + &#34;_skey&#34;).className = &#34;skeyOver&#34;;

  document.all.item(obj.id + &#34;_sub&#34;).className = &#34;subOver&#34;;

  if (type==0) { showSubMenu(obj,cmd); }   //如果有下一级菜单就展开

  //showstatus();   //调试阶段使用

}

  

function bar_onmouseout(obj,type,cmd) {

  if (type!=0) {

   document.all.item(obj.id + &#34;_ico&#34;).className = &#34;ico&#34;;

   document.all.item(obj.id + &#34;_text&#34;).className = &#34;text&#34;;

   document.all.item(obj.id + &#34;_skey&#34;).className = &#34;skey&#34;;

   document.all.item(obj.id + &#34;_sub&#34;).className = &#34;sub&#34;;

   if (mnuPrev.length>0) {

    mnuPrev.length –;

   }

  

   //showstatus();   //调试阶段使用

  }

}

function bar_onclick(obj,type,cmd) {

  if (type==1) {

   //window.navigate(cmd);   //跳转到相应的文件

   lblOutput.innerText = cmd; //演示期间,将文件名显示出来

  }else {

   bMenuClick = true;   //在一个菜单上单击后设置其状态为true,用来屏蔽document_click事件

  }

}

//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

//    以下为与主文件有关的控制部分,具体使用时需要关注的也仅仅这部分而已

//_____________________________________________________________

var doc_width;    //当前窗口的宽度,随窗口大小改变而改变

var doc_height;    //当前窗口的高度,随窗口大小改变而改变

var mClick = false;   //一级菜单是否被点击,初始一级菜单是未被点击状态

var bMenuClick = false;    //单击是否是在一个菜单上,初始单击不是在一个菜单上

var mnuPrev = new Array();   //当前显示的菜单ID数组,初始为空

function document_onsel&#101;ctstart() {

  return false;    //屏蔽内容选择功能

}

function document_onclick() {

  if(!bMenuClick) {

   if (mnuPrev.length>0) {

    for (var i=1;i<mnuPrev.length;i++) {

     if (mnuPrev[i].type==0) {   //如果是菜单项,设置成默认样式

      document.all.item(mnuPrev[i].id + &#34;_ico&#34;).className = &#34;ico&#34;;

      document.all.item(mnuPrev[i].id + &#34;_text&#34;).className = &#34;text&#34;;

      document.all.item(mnuPrev[i].id + &#34;_skey&#34;).className = &#34;skey&#34;;

      document.all.item(mnuPrev[i].id + &#34;_sub&#34;).className = &#34;sub&#34;;

     }else {   //如果是菜单框,隐藏它

      document.all.item(mnuPrev[i].id).style.visibility = &#34;hidden&#34;;

     }

    }

    document.all.item(mnuPrev[0].id).className = &#34;MainMenu&#34;;    //将主菜单的状态恢复普通状态

   }

   mnuPrev.length = 0;    //清空当前显示菜单

   mClick = false;    //清除菜单点击状态

  }else {

   bMenuClick = false;

  }

}

function window_onresize() {

  //当窗口尺寸变化时改变相应变量的值

  doc_height = window.document.body.offsetHeight;

  doc_width = window.document.body.offsetWidth;

}

function window_onload() {

  //初始化窗口尺寸

  doc_height = window.document.body.offsetHeight;

  doc_width = window.document.body.offsetWidth;

}

//–>

您的留言

*