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

<script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 728x15, 创建于 08-4-23MSDN */ google_ad_slot = "3624277373"; google_ad_width = 728; google_ad_height = 15; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
<script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 160x600, 创建于 08-4-23MSDN */ google_ad_slot = "4367022601"; google_ad_width = 160; google_ad_height = 600; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
<!--解读 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 mousedown() {
  var vsrc = window.event.srcelement;
  divcoll=document.all.tags("div");
  for (i=0; i < divcoll.length; i++) {
      if (((divcoll(i).classname == "parent")||(divcoll(i).classname == "child2")||(divcoll(i).classname == "child3"))&&(divcoll(i).id != vsrc.id))/*注3*/ {
        divcoll(i).style.backgroundcolor = "";
    }
    if (((divcoll(i).classname == "parent")||(divcoll(i).classname == "child2")||(divcoll(i).classname == "child3"))&&(divcoll(i).id == vsrc.id))/*注3*/ {
         divcoll(i).style.backgroundcolor = "#ffffff";
         fcolor = "#ffffff";
    }
}
}

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

function closeall(el) {
    divcoll=document.all.tags("div");
    for (i=0; i<divcoll.length; i++) {
        felel=eval(el + "child1");
        if ((divcoll(i).classname == "child1") && (felel != divcoll(i))) {
            divcoll(i).style.display="none";
        }
    }
}

function navonload() {
    divcoll=document.all.tags("div");
    for (i=0; i< divcoll.length; i++) {
        if (divcoll(i).classname == "child1" || divcoll(i).classname == "child4") {
            if (divcoll(i).classname == "child4" && divcoll(i).style.display == "block") {
                whicharrow = eval(divcoll(i).arr);
                whicharrow.src = "../images/tocuparw.gif";
            }
        }
    }
}

function expandie(el) {
    whichel=eval(el + "child1");
    closeall(el);
    if (whichel.style.display != "block") {
        whichel.style.display = "block";
        whichel.isexpanded=true;
    }/*注4*/else {
        whichel.style.display = "none";
        whichel.isexpanded=false;
    }/*注4*/
}


function expandie2(el) {
    whichel=eval(el + "child3");    
    whichim=event.srcelement;    
    if (whichel.style.display != "block") {//当被点击对象没有展开下级菜单时,展开下级菜单
        whichel.style.display = "block";
        whichel.isexpanded=true;
        whicharrow = eval(whichim.arr);
        whicharrow.src = "../images/tocuparw.gif";
    } else {//当被点击对象已经展开下级菜单时,隐藏下级菜单
        whichel.style.display="none";
        whichel.isexpanded=false;
        whicharrow = eval(whichim.arr);
        whicharrow.src = "../images/tocdnarw.gif";
    }
}
            </script>
        <!--注1-->
        <style>
            a:link
            {
             color:000000;
             text-decoration: none;
            }
            a:visited
            {
             color:666666;
             text-decoration: none;
             }
            body
            {
             background-repeat:repeat-y ;
             font-family:宋体,arial;
            }
            .parent
            {
             position:relative;
             display:block;
             font-weight:bold;
             font-size:9pt;
             padding:1pt;
             padding-left:8pt;
             width:168px;
             top:0;
             cursor:hand;
             margin-bottom:2;
            }
            .child1
            {
             display:none;
             font-size:9pt;
             width:168px;
             padding-bottom:4pt;
             cursor:hand;
             margin-bottom:2;
            }
            .child2
            {
             display:block;
             font-size:9pt;
             padding:1pt;
             width:168px;
             padding-left:14pt;
             cursor:hand;
             margin-bottom:2;
            }
            .child3
            {
             display:block;
             font-size:9pt;
             padding:1pt;
             padding-left:20pt;
             width:168px;
             cursor:hand;
             margin-bottom:2;
            }
            .child4
            {
             display:block;
             font-size:9pt;
             width:168px;
             cursor:hand;
             margin-bottom:2;
            }
            .master
            {
             position:relative;
             display:block;
             padding:1pt;
             width:168px;
             padding-top:12px;
            }
            #navigation
            {
             position:absolute;
             top:101;
             left:0;
             z-index:1;
             width:170px;
             height:340px;
             overflow:auto;
            }
        </style>
        <base target="submain">
    </head>
    <body onload="navonload();this.focus();" leftmargin="0" topmargin="0" bgcolor="white" background="bluetoc.gif" text="black" link="black" vlink="#005baa">
        <div id="navigation">
            <div id="masterone" class="master">
                <a href="wrkwfile/mainwork.htm">
                    <div id="files" onkeypress="expandie('etuone');mousedown()" onclick="expandie('etuone')" class="parent">
                        处理文件
                    </div>
                </a>
                <div id="etuonechild1" class="child1">
                    <a href="wrkwfile/trakdocs.htm">
                        <div onkeypress="expandie2('etutwo');mousedown()" onclick="expandie2('etutwo')" id="track" class="child2" arr="arrow1">
                            <img id="arrow1" src="../images/tocdnarw.gif" width="9" height="9" border="0" alt="" align="middle" hspace="0">
                            跟踪文档
                        </div>
                    </a>
                    <div id="etutwochild3" class="child4" style="display:none" arr="arrow1">
                        <a href="wrkwfile/mynetwrk.htm">
                            <div id="mynet" class="child3" onkeypress="mousedown();">
                                网上邻居
                            </div>
                        </a><a href="wrkwfile/mydocs.htm">
                            <div id="mydocs" class="child3" onkeypress="mousedown();">
                                我的文档
                            </div>
                        </a><a href="wrkwfile/opensave.htm">
                            <div id="open" class="child3" onkeypress="mousedown();">
                                文件打开/另存为
                            </div>
                        </a><a href="wrkwfile/history.htm">
                            <div id="histroy" class="child3" onkeypress="mousedown();">
                                历史文件夹
                            </div>
                        </a>
                    </div>
                    <a href="wrkwfile/associat.htm">
                        <div id="assoc" class="child2" onkeypress="mousedown();">
                            关联文件类型
                        </div>
                    </a><a href="wrkwfile/imageman.htm">
                        <div id="imageman" class="child2" onkeypress="mousedown();">
                            处理图像
                        </div>
                    </a><a href="wrkwfile/rdyavprt.htm">
                        <div id="readily" class="child2" onkeypress="mousedown();">
                            管理打印
                        </div>
                    </a>
                </div>
                <a href="findinfo/mainfind.htm">
                    <div id="find" onkeypress="expandie('etuthree');mousedown()" onclick="expandie('etuthree')" class="parent">
                        查找信息
                    </div>
                </a>
                <div id="etuthreechild1" class="child1">
                    <a href="findinfo/indexing.htm">
                        <div id="index" class="child2" onkeypress="mousedown();">
                            索引内容
                        </div>
                    </a><a href="findinfo/search.htm">
                        <div id="search" class="child2" onkeypress="mousedown();">
                            集成搜索
                        </div>
                    </a><a href="findinfo/actsrch.htm">
                        <div id="actsear" class="child2" onkeypress="mousedown();">
                            active directory
                        </div>
                    </a>
                </div>
                <a href="personal/mainprsn.htm">
                    <div id="person" onkeypress="expandie('etufour');mousedown()" onclick="expandie('etufour')" class="parent">
                        个人化
                    </div>
                </a>
                <div id="etufourchild1" class="child1">
                    <a href="personal/strtmenu.htm">
                        <div id="startm" class="child2" onkeypress="mousedown();">
                            开始菜单
                        </div>
                    </a><a href="personal/custtlbr.htm">
                        <div id="custo" class="child2" onkeypress="mousedown();">
                            工具栏
                        </div>
                    </a><a href="personal/actdsktp.htm">
                        <div id="acti" class="child2" onkeypress="mousedown();">
                            活动桌面
                        </div>
                    </a><a href="personal/access.htm">
                        <div id="acc" class="child2" onkeypress="mousedown();">
                            辅助向导
                        </div>
                    </a><a href="personal/multlang.htm">
                        <div id="multi" class="child2" onkeypress="mousedown();">
                            多语言技术
                        </div>
                    </a>
                </div>
                <a href="wrkonweb/mainwork.htm">
                    <div id="web" onkeypress="expandie('etufive');mousedown()" onclick="expandie('etufive')" class="parent">
                        在 web 上工作
                    </div>
                </a>
                <div id="etufivechild1" class="child1">
                    <a href="wrkonweb/inetcwiz.htm">
                        <div id="inetcon" class="child2" onkeypress="mousedown();">
                            internet 连接向导
                        </div>
                    </a><a href="wrkonweb/favui.htm">
                        <div id="favui" class="child2" onkeypress="mousedown();">
                            个人收藏夹窗格
                        </div>
                    </a>
                </div>
                <a href="workremo/mainremo.htm">
                    <div id="remote" onkeypress="expandie('etusix');mousedown()" onclick="expandie('etusix'); mousedown();" class="parent">
                        远程工作
                    </div>
                </a>
                <div id="etusixchild1" class="child1">
                    <a href="workremo/remotely.htm">
                        <div id="remotely" onkeypress="expandie2('etuseven');mousedown()" onclick="expandie2('etuseven')" arr="arrow2" id="" class="child2">
                            <img id="arrow2" src="../images/tocdnarw.gif" width="9" height="9" border="0" alt="" align="middle" hspace="0">
                            脱机工作
                        </div>
                    </a>
                    <div id="etusevenchild3" class="child4" style="display:none" arr="arrow2">
                        <a href="workremo/offlnfld.htm">
                            <div id="offfile" class="child3" onkeypress="mousedown();">
                                脱机文件
                            </div>
                        </a><a href="workremo/offlnwb.htm">
                            <div id="offweb" class="child3" onkeypress="mousedown();">
                                脱机浏览 web
                            </div>
                        </a><a href="workremo/syncman.htm">
                            <div id="sync" class="child3" onkeypress="mousedown();">
                                同步管理器
                            </div>
                        </a>
                    </div>
                    <a href="workremo/netconmn.htm">
                        <div id="netcon" class="child2" onkeypress="mousedown();">
                            网络和拨号连接文件夹
                        </div>
                    </a><a href="workremo/efs.htm">
                        <div id="efs" class="child2" onkeypress="mousedown();">
                            加密文件系统
                        </div>
                    </a><a href="workremo/conspowr.htm">
                        <div id="cons" class="child2" onkeypress="mousedown();">
                            电源管理
                        </div>
                    </a><a href="workremo/infrared.htm">
                        <div id="infra" class="child2" onkeypress="mousedown();">
                            自动红外支持
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <iframe src="etu_main.htm" name="submain" scrolling="auto" width="470" height="100%" marginwidth="4" marginheight="4" frameborder="no" style="position:relative; top:2; left:180;"></iframe>
    </body>
</html>
<!--
本代码中菜单结构如下图:

*************************************************************************************
*                                                                                   *
*处理文件-------------------------------------------------------------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--> < <script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 728x15, 创建于 08-4-23MSDN */ google_ad_slot = "3624277373"; google_ad_width = 728; google_ad_height = 15; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
<script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 160x600, 创建于 08-4-23MSDN */ google_ad_slot = "4367022601"; google_ad_width = 160; google_ad_height = 600; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
阅读更多
个人分类: javascript
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭