解读 M$ 源代码：JavaScript + CSS 实现动态菜单显示-IDC资讯中心

<!–解读 m$ 源代码：javascript + css 实现动态菜单显示–>
<!–default.htm–>
<!–小弟的 javascript 水平实在有够差劲，故以下注解均为个人理解，有疏漏及不当之处还请各位大虾指正–>
<!–以下源代码来源于 m$ windows 2000 professional 安装光盘的 discover/easy2use 目录，更改之处见文档的最后注解–>
<!–有关“单位”与“集合”的定义，请参见文档后面的注解–>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=gb2312">
        <title>更易使用</title><!–注1–>
        <script language="javascript">

var whichim;
var varcolor = "ddeeff";

document.onmouseover = mouseover;
document.onmouseout = mouseout;
document.onmousedown = mousedown;
document.onmouseup = mouseup;

function mouseover() {
  var vsrc = window.event.srcelement;
  if (vsrc.classname == "child2" || vsrc.classname == "child3" || vsrc.classname == "parent")/*判断对象是否为“单位”*/ {
    fcolor = vsrc.style.backgroundcolor;
    vsrc.style.backgroundcolor = varcolor;
    /*注2*/
  }
}

function mouseout() {
  var vsrc = window.event.srcelement;
  if (vsrc.classname == "child2" || vsrc.classname == "child3" || vsrc.classname == "parent") {
    vsrc.style.backgroundcolor = fcolor;
    /*注2*/
  }
}

function mouseup() {
  var vsrc = window.event.srcelement;
  if (vsrc.classname == "child2" || vsrc.classname == "child3" || vsrc.classname == "parent") {
    /*注2*/
  }
}
//<!– navigation functions –>

*************************************************************************************
*                                                                                   *
*处理文件————————————————————-class="parent"*
*       跟踪文档——————————-class="child2"–|                    *
*               网上邻居–class="child3"–|                    |                    *
*               我的文档–class="child3"  |                    |                    *
*               文件….–class="child3"  |-class="child4"     |                    *
*               历史….–class="child3"__|                    |-class="child1"     *
*       关联文件类型—————————class="child2"  |                    *
*       处理图像——————————-class="child2"  |                    *
*       管理打印——————————-class="child2"__|                    *
*查找信息————————————————————-class="parent"*
*       索引内容——————————-class="child2"–|                    *
*       集成搜索——————————-class="child2"  |-class="child1"     *
*       active directory———————–class="child2"__|                    *
*个人化—————————————————————class="parent"*
*       开始菜单——————————-class="child2"–|                    *
*       工具栏———————————class="child2"  |                    *
*       活动桌面——————————-class="child2"  |-class="child1"     *
*       辅助向导——————————-class="child2"  |                    *
*       多语言技术—————————–class="child2"__|                    *
*在 web 上工作——————————————————–class="parent"*
*       internet 连接向导———————-class="child2"–|                    *
*       个人收藏夹窗格————————-class="child2"__|-class="child1"     *
*远程工作————————————————————-class="parent"*
*       脱机工作——————————-class="child2"–|                    *
*               脱机文件–class="child3"–|                    |                    *
*               脱机浏览–class="child3"  |-class="child4"     |                    *
*               web ….–class="child3"__|                    |                    *
*       网络和拨号连接文件夹——————-class="child2"  |-class="child1"     *
*       加密文件系统—————————class="child2"  |                    *
*       电源管理——————————-class="child2"  |                    *
*       自动红外支持—————————class="child2"__|                    *
*                                                                                   *
*************************************************************************************

上图中，每个 class 定义了一个层，在 javascript 及 css 中，对层进行操作。每个层的 class 名称标志了他们在菜单中的相对位置。
定义：child2、child3 和 parent 各自标志了一个层，我们称它为“单位”（其实我也不知道准确的名称应该是什么，姑且先这么叫吧:-)），而 child1 和 child4 则标志了处于同一相对位置的几个子层所组成的父层，我们称它为“集合”。
注1：原(m$)文件中引用了../javax.htm 及 ../navstyle.css 两个文件，为叙述方便，上述两个文件中与本文有关的代码被直接添加到本文中。
注2：原(m$)代码中此处有一语句"window.event.cancelbubble == true;"，我没看懂，删了~~
注3：原(m$)代码中条件还包含"(divcoll(i).classname == "child4")||"，我实在没看明白有什么作用，删了，有知道的大虾还请指教；
注4：原(m$)代码中不包含此部分代码，我加上的，让 parent 也能主动关闭。
最后还有一点说明，在每一个有子菜单的层上加一个语句onmouseover="…","…"就是onclick里边的东东，试试看，你看到了什么？
–>
<!–copyright by cheery_ke,04-07-2002,all reserved–>

解读 M$ 源代码：JavaScript + CSS 实现动态菜单显示

相关推荐

热门标签

热门文章

分类目录