• <ruby id="5koa6"></ruby>
    <ruby id="5koa6"><option id="5koa6"><thead id="5koa6"></thead></option></ruby>

    <progress id="5koa6"></progress>

  • <strong id="5koa6"></strong>
  • JavaScript + CSS 實現動態菜單顯示

    發表于:2007-06-21來源:作者:點擊數: 標簽:
    !--解讀 M$ 源代碼: Java Script + CSS 實現動態菜單顯示-- !--Default.htm-- !--小弟的 JavaScript 水平實在有夠差勁,故以下注解均為個人理解,有疏漏及不當之處還請各位大蝦指正-- !--以下源代碼來源于 M$ Windows 2000 Professional 安裝光盤的 DISCOVE

       


    <!--解讀 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" alt=JavaScript + CSS 實現動態菜單顯示 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/aclearcase/" target="_blank" >ccess.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" alt=JavaScript + CSS 實現動態菜單顯示 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 alt=JavaScript + CSS 實現動態菜單顯示 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-->

    原文轉自:http://www.kjueaiud.com

    老湿亚洲永久精品ww47香蕉图片_日韩欧美中文字幕北美法律_国产AV永久无码天堂影院_久久婷婷综合色丁香五月

  • <ruby id="5koa6"></ruby>
    <ruby id="5koa6"><option id="5koa6"><thead id="5koa6"></thead></option></ruby>

    <progress id="5koa6"></progress>

  • <strong id="5koa6"></strong>