📄 ietree.html

📁 javascript source code part2
💻 HTML
字号:
<HTML>
   <HEAD>
      <STYLE>
         SPAN {cursor: hand ; font-size: 8pt; font-family:Verdana,Arial,Helvetica;}
         .bright {color: red ; font-size: 8pt; font-family:Verdana,Arial,Helvetica;}
         .dark {color: black ; font-size: 8pt; font-family:Verdana,Arial,Helvetica;}
      </STYLE>
 <SCRIPT LANGUAGE="JScript">
    var curLevel = 0;
    var prevElement = null;
    var prevLevel;
    var prevID;
    var builtHTML = "";
 function MakeTree() {
    var coll = document.all;
    var level;
    var id;
    var tagBegin;
    for (i=document.body.sourceIndex+1; i<coll.length; i++) {
       switch (coll[i].tagName.substring(0,3)) {
          case "LVL":        
             level = parseInt(coll[i].tagName.charAt(3));
             break;
          default:
             level = -1;
       }
       if (level!=-1) {
          id = i;
          addElem(coll[i], level, id);
       }
    }
    addElem(prevElement,0, prevID);
    divWrap();
    //   document.all.Debug.outerText = MyTree.innerHTML;
 }
 function addElem(el, level, id) {
    if (prevElement == null)
    {
       prevElement = el;
       prevLevel = level;
       prevID = id;
       return;
    }
    var s = "&nbsp;";
    for (var j=0; j<prevLevel; j++)
       s = s + s;
 
    if (level > curLevel)
    {
       builtHTML += "<SPAN STYLE='cursor:hand' CLASS='dark'  IURL='" 
                 + prevElement.getAttribute('IURL') 
                 + "' FLASHER>" 
                 + s 
                 + "<IMG SRC='expand.gif' ID='OUT" 
                 + prevID.toString() 
                 + "' CLASS='collapsible' > &nbsp;&nbsp;" 
                 + prevElement.getAttribute('ITEXT') 
                 + "<BR></SPAN>" 
                 + "<DIV ID='OUT" 
                 + prevID.toString() 
                 + "D' STYLE='display:none'  >"; 
       curLevel = level;
    }
    else
    {
       builtHTML += "<SPAN STYLE='cursor:hand'  CLASS='dark' IURL='" 
                 + prevElement.getAttribute('IURL') 
                 + "' FLASHER>" 
                 + s 
                 + "<IMG SRC='leaf.gif'>&nbsp;" 
                 + prevElement.getAttribute('ITEXT') 
                 + "<BR></SPAN>";
       if (level < curLevel)
       {
          for (var tplev = level; tplev < curLevel; tplev++)
             builtHTML += "</DIV>";
          curLevel = level;
       }
    }   
  
    prevElement = el;
    prevLevel = level;
    prevID = id;
 }

 function divWrap() {
    while (curLevel > 0)
    {
       builtHTML +=      "</DIV>";
       curLevel--;
    }
    document.all.MyTree.innerHTML=builtHTML;
 }

 function clickHandler() {
    var colId, colElem ;
    var tpURL;
    gifElem = window.event.srcElement;
 
    if (gifElem.className == "collapsible") {
 
       colId = gifElem.id + "D";
       colElem = document.all(colId);
 
       if (colElem.style.display == "none") {
          colElem.style.display = "" ;
          gifElem.src = "fixed.gif" ;
       } else {
          colElem.style.display = "none" ;
          gifElem.src = "expand.gif" ;
       }
    }
    if (gifElem.className == "bright")
    {  
       with (parent.frames[1].document.all)
       {
          showpic.src = gifElem.getAttribute("IURL"); 
          picTitle.innerText = gifElem.innerText;
       }
    }
 }
 function MakeBright() {
    el = event.srcElement ;
    if (el.getAttribute("FLASHER") != null) {
       el.className = "bright" ;
    }
 }
 
 function MakeDark() {
    el = event.srcElement ;
    if (el.getAttribute("FLASHER") != null) {
       el.className = "dark";
    }
 }
</SCRIPT>
</HEAD>
 <BODY  ONLOAD="MakeTree()">
 
 <LVL0  ITEXT="The Waltons Family Album" IURL="album.gif" ITARGET=""></LVL0>   
    <LVL1  ITEXT= "James W. Walton" IURL="walt1.jpg" ITARGET=""></LVL1>
       <LVL2  ITEXT="Wife: Jose Emma" IURL="walt2.jpg" ITARGET=""></LVL2>
       <LVL2  ITEXT="Child: Maggie Walton" IURL="walt3.jpg" ITARGET=""></LVL2>
          <LVL3  ITEXT="Husband: Jack Eckel" IURL="walt4.jpg" ITARGET=""></LVL3>
          <LVL3  ITEXT="Grand child: Lucy Eckel" IURL="walt5.jpg" ITARGET=""></LVL3>
    <LVL1  ITEXT="Jack E. Walton"  IURL="walt6.jpg" ITARGET=""></LVL1>
       <LVL2  ITEXT="Wife: Nancy Lori" IURL="walt7.jpg" ITARGET=""</LVL2>
       <LVL2  ITEXT="Child: John Walton" IURL="walt8.jpg" ITARGET=""></LVL2>
    <LVL1  ITEXT="Joe Walton"  IURL="walt9.jpg" ITARGET=""></LVL1>
<TABLE WIDTH=95% BORDER=0 ALIGN=left>
   <TR><TD>
      <IMG SRC="Logo.gif">
    </TD></TR>
    <TR><TD BGCOLOR="lightyellow">&nbsp;</TD></TR>
    <TR><TD WIDTH=200 HEIGHT=340 VALIGN="top" BGCOLOR="lightyellow">
    <DIV ID=MyTree>
    </DIV>
    <DIV ID=Debug>
    </DIV>
    </TD></TR>
 </TABLE>
<SCRIPT LANUGAGE="JScript">
   document.onclick = clickHandler;
   document.onmouseover = MakeBright;
   document.onmouseout = MakeDark;
</SCRIPT>

</BODY>
</HTML>
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -