tu9.11.htm

来自「一部非常好的javaScript教程」· HTM 代码 · 共 130 行

HTM

130 行

<HTML>
<HEAD>
<TITLE>动态折叠工具栏</TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function RollBar(intIndex)
     {
      OutlookBarVisible("none");  //首先使所有工具栏均不可见
      MailBarVisible("none");
      OtherBarVisible("none");
        switch(intIndex)
       {
            case 1:  //显示 Outlook 工具栏
                cmdOutlook.style.top="0";
                cmdMail.style.top="350";
                cmdOther.style.top="375";
                OutlookBarVisible("");
                break;
            case 2:  
                if(cmdMail.style.top == "25px")
                 {
                    cmdOutlook.style.top = "0";
                    cmdMail.style.top = "350";
                    cmdOther.style.top = "375";
                    OutlookBarVisible("");  //显示 Outlook 工具栏
                 }
                else
                 {
                    cmdOutlook.style.top = "0";
                    cmdMail.style.top = "25";
                    cmdOther.style.top = "375";
                    MailBarVisible("");  //显示"邮件"工具栏
                 }
                 break;
            case 3: 
                if(cmdOther.style.top == "50px")
               {
                    cmdOutlook.style.top = "0";
                    cmdMail.style.top = "25";
                    cmdOther.style.top = "375";
                    MailBarVisible("");  //显示"邮件"工具栏
               }
                else
               {
                    cmdOutlook.style.top = "0";
                    cmdMail.style.top = "25";
                    cmdOther.style.top = "50";
                    OtherBarVisible("");  //显示"其他"工具栏
                }
                break;
        }
     }

    function OutlookBarVisible(strDisplay)
       {
       imgOutlook1.style.display = strDisplay;  //为每个 Outlook 图标设置 display 属性
        imgOutlook2.style.display = strDisplay
        imgOutlook3.style.display = strDisplay
        imgOutlook4.style.display = strDisplay
        imgOutlook5.style.display = strDisplay
       }

    function MailBarVisible(strDisplay)
       {
        imgMail1.style.display = strDisplay  //为每个"邮件"图标设置 display 属性
        imgMail2.style.display = strDisplay
        imgMail3.style.display = strDisplay
        imgMail4.style.display = strDisplay
       }

    function OtherBarVisible(strDisplay)
       {
        imgOther1.style.display = strDisplay  //为每个"其他"图标设置 display 属性
        imgOther2.style.display = strDisplay
        imgOther3.style.display = strDisplay
       }
-->
</SCRIPT>
</HEAD>
<BODY>
<DIV STYLE="position:absolute; width:100; height:400;"> <!-- 指定工具栏区域 -->
<!-- 按钮 -->
<INPUT STYLE="position:absolute; top:0; width:100;" 
    TYPE="BUTTON" NAME="cmdOutlook" VALUE="Outlook" 
    OnClick="RollBar(1)">

<INPUT STYLE="position:absolute; top:350; width:100;" 
    TYPE="BUTTON" NAME="cmdMail" VALUE="邮件" 
    OnClick="RollBar(2)">

<INPUT STYLE="position:absolute; top:375; width:100;" 
    TYPE="BUTTON" NAME="cmdOther" VALUE="其他" 
    OnClick="RollBar(3)">

<!-- Outlook 工具栏图片 -->
<IMG SRC=".../images/inbox.gif " ID="imgOutlook1" 
    STYLE="position:absolute; left:32; top:80">
<IMG SRC=".../images/calendar.gif" ID="imgOutlook2" 
    STYLE="position:absolute; left:32; top:125">
<IMG SRC=".../images/contacts.gif" ID="imgOutlook3" 
    STYLE="position:absolute; left:32; top:170">
<IMG SRC=".../images/tasks.gif"    ID="imgOutlook4" 
    STYLE="position:absolute; left:32; top:215">
<IMG SRC=".../images/journal.gif"  ID="imgOutlook5" 
    STYLE="position:absolute; left:32; top:260">

<!-- "邮件"工具栏图片-->
<IMG SRC=".../images/inbox.gif"  ID="imgMail1" 
    STYLE="position:absolute; left:32; top:80; display:none">
<IMG SRC=".../images/sentitems.gif "ID="imgMail2" 
    STYLE="position:absolute; left:32; top:125; display:none">
<IMG SRC=".../images/outbox.gif"  ID="imgMail3" 
    STYLE="position:absolute; left:32; top:170; display:none">
<IMG SRC=".../images/deleted.gif "  ID="imgMail4" 
    STYLE="position:absolute; left:32; top:215; display:none">

<!-- "其他"工具栏图片 -->
<IMG SRC=".../images/mycomputer.gif" ID="imgOther1" 
    STYLE="position:absolute; left:32; top:80; display:none">
<IMG SRC=".../images/folder.gif" ID="imgOther2" 
    STYLE="position:absolute; left:32; top:125; display:none">
<IMG SRC=".../images/notes.gif "     ID="imgOther3" 
    STYLE="position:absolute; left:32; top:170; display:none">
</DIV>
<DIV STYLE="position:absolute; left:120; text-indent:1cm">
  <H2>请单击左边的 Outlook、"邮件"或"其他"按钮来动态折叠工具栏</H2>
</DIV>
</BODY>
</HTML>

tu9.11.htm - 源码说明

本页面展示了「一部非常好的javaScript教程」中的 tu9.11.htm 源码文件，采用 HTM 编程语言编写，共 130 行代码。您可以在线阅读完整代码内容，也可以返回资源详情页下载完整源码包进行本地学习和开发。

虫虫下载站收录了大量与javaScript相关的技术资源，包括源代码、技术文档、电路图等，是电子工程师和嵌入式开发者的专业学习平台。

⌨️ 快捷键说明

复制代码Ctrl + C

搜索代码Ctrl + F

全屏模式F11

增大字号Ctrl + =

减小字号Ctrl + -

显示快捷键?