menutree.htm

JavaScript实例

    return ind;
}

function arrange() {
    nextY = document.layers[firstInd].pageY +document.layers[firstInd].document.height;
    for (i=firstInd+1; i<document.layers.length; i++) {
        whichEl = document.layers[i];
        if (whichEl.visibility != "hide") {
            whichEl.pageY = nextY;
            nextY += whichEl.document.height;
        }
    }
}

function initIt(){
    if (!ver4) return;
    if (NS4) {
        for (i=0; i<document.layers.length; i++) {
            whichEl = document.layers[i];
            if (whichEl.id.indexOf("Child") != -1) whichEl.visibility = "hide";
       }
        arrange();
    }
    else {
        divColl = document.all.tags("DIV");
        for (i=0; i<divColl.length; i++) {
            whichEl = divColl(i);
            if (whichEl.className == "child") whichEl.style.display = "none";
        }
    }
}

function expandIt(el) {
    if (!ver4) return;
    if (IE4) {
        whichEl = eval(el + "Child");
        if (whichEl.style.display == "none") {
            whichEl.style.display = "block";
        }
        else {
            whichEl.style.display = "none";
        }
    }
    else {
        whichEl = eval("document." + el + "Child");
        if (whichEl.visibility == "hide") {
            whichEl.visibility = "show";
        }
        else {
            whichEl.visibility = "hide";
        }
        arrange();
    }
}
onload = initIt;
</script>
        </font></p>
      <div id="KB1Parent" class="parent">　　　　<a href="#" onClick="expandIt('KB1'); return false" ><img src="img/plus.gif" border=0>文件夹一</a></div>
      <div id="KB1Child" class="child">　　　　　<a href="sample.htm" target="_blank" ><img src="img/spacer.gif"  border=0 alt=""><img src="img/open.gif"  border=0>页面一</a><br>
        　　　　　<a href="sample.htm" target="_blank" ><img src="img/spacer.gif"  border=0 alt="" width="15" height="11"><img src="img/open.gif"  border=0>页面二</a><br>
        　　　　　<a href="sample.htm" target="_blank" ><img src="img/spacer.gif"  border=0 alt="" width="15" height="11"><img src="img/open.gif"  border=0>页面三</a></div>
      <div id="KB2Parent" class="parent">　　　　<a href="#" onClick="expandIt('KB2'); return false" ><img src="img/plus.gif" border=0>文件夹二</a></div>
      <div id="KB2Child" class="child">　　　　　<a href="sample.htm" target="_blank" ><img src="img/spacer.gif"  border=0 alt="" width="15" height="11"><img src="img/open.gif"  border=0>页面一</a><br>
        　　　　　<a href="sample.htm" target="_blank" ><img src="img/spacer.gif"  border=0 alt=""><img src="img/open.gif"  border=0>页面二</a><br>
        　　　　　<a href="sample.htm" target="_blank" ><img src="img/spacer.gif"  border=0 alt="" width="15" height="11"><img src="img/open.gif"  border=0>页面三</a></div>
      <div id="KB3Parent" class="parent">　　　　<a href="#" onClick="expandIt('KB3'); return false" ><img src="img/plus.gif"  border=0>文件夹三</a></div>
      <div id="KB3Child" class="child"> 　　　　　<a href="sample.htm" target="_blank" ><img src="img/spacer.gif"  border=0 alt=""><img src="img/open.gif"  border=0>页面一</a><br>
        　　　　　　<a href="sample.htm" target="_blank" ><img src="img/open.gif"  border=0>页面二</a><br>
        　　　　　<a href="sample.htm" target="_blank" ><img src="img/spacer.gif"  border=0 alt=""><img src="img/open.gif"  border=0>页面三</a></div>
      <script language="JavaScript">
if (NS4) {
        firstEl = "KB1Parent";
        firstInd = getIndex(firstEl);
        arrange();
}
&lt;/script&gt;</textarea>
        </p>
      </form>
      <b> </b></td>
    <td bgcolor="5F74BF" width="28" align="center">&nbsp;</td>
    <td width="37" align="center">&nbsp;</td>
  </tr>
  <tr>
    <td align="center" valign="bottom"> 
      <table width="238" border="0" cellspacing="0" cellpadding="0">
        <tr align="center"> 
          <td> 
            <table width="110" border="0" cellspacing="0" cellpadding="0">
              <tr bgcolor="5F74BF" align="center"> 
                <td class="p1" align="right"><b><font color="#FFFFFF">源程序讲解：</font></b></td>
                <td class="p1" width="11"><img src="img/bule2.gif" width="11" height="18"></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
    <td width="457" class="p2" valign="top">&nbsp;</td>
    <td bgcolor="5F74BF" width="28" align="center"><img src="img/bule1.gif" width="28" height="49"></td>
    <td width="37" align="center">&nbsp;</td>
  </tr>
</table>
<table width="760" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr> 
    <td class="p2" align="right" width="693"> <br>
      <table width="650" border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td height="25"> 
            <table width="100%" border="1" cellspacing="1" cellpadding="1" bordercolorlight="#666666" bordercolordark="#666666" class=p2>
              <tr class=p2> 
                <td width="50%"><font color="#000000">NS4 = (document.layers) 
                  ? 1 : 0;<br>
                  IE4 = (document.all) ? 1 : 0; <br>
                  ver4 = (NS4 || IE4) ? 1 : 0;<br>
                  </font></td>
                <td width="50%" class=p2>声明几个变量。当用户的浏览器是IE时，变量IE4的值为1，当用户的浏览器是Netscape时，变量NS4的值为1，当用户的浏览器是IE或是Netscape时，变量ver4的值为1。</td>
              </tr>
              <tr bgcolor="CFDFFF"> 
                <td width="50%">if (ver4)<br>
                  { with (document) <br>
                  {write(&quot;&lt;STYLE TYPE='text/css'&gt;&quot;);<br>
                  if (NS4) {<br>
                  write(&quot;.parent{position:absolute; visibility:visible}&quot;); 
                  <br>
                  write(&quot;.child {position:absolute; visibility:visible}&quot;); 
                  <br>
                  write(&quot;.regular {position:absolute; visibility:visible}&quot;) 
                  } <br>
                  else { write(&quot;.child {display:none}&quot;) } <br>
                  write(&quot;&lt;/STYLE&gt;&quot;);<br>
                  } }</td>
                <td width="50%">这段代码相当于一个样式，定义各个层的位置及显示状态。</td>
              </tr>
              <tr> 
                <td width="50%">function getIndex(el)<br>
                  { ind = null; <br>
                  for (i=0; i&lt;document.layers.length; i++) <br>
                  { whichEl = document.layers[i]; <br>
                  if (whichEl.id == el) <br>
                  { ind = i; break; } } <br>
                  return ind; }</td>
                <td width="50%">定义一个函数getIndex，功能是获得变量ind的值。</td>
              </tr>
              <tr bgcolor="CFDFFF"> 
                <td width="50%">function arrange() <br>
                  { nextY = document.layers[firstInd].pageY +document.layers[firstInd].document.height;<br>
                  for (i=firstInd+1; i&lt;document.layers.length; i++) <br>
                  { whichEl = document.layers[i]; <br>
                  if (whichEl.visibility != &quot;hide&quot;) <br>
                  { whichEl.pageY = nextY; nextY += whichEl.document.height; } 
                  } }</td>
                <td width="50%">定义一个函数arrange（），功能就是定义一下页面上元素的位置。当菜单打开时，页面上菜单以下的东西的位置顺序往下推，菜单合起时，菜单以下的东西自动上移。</td>
              </tr>
              <tr> 
                <td width="50%">function initIt()<br>
                  { if (!ver4) return; <br>
                  if (NS4) { for (i=0; i&lt;document.layers.length; i++) <br>
                  { whichEl = document.layers[i]; <br>
                  if (whichEl.id.indexOf(&quot;Child&quot;) != -1) whichEl.visibility 
                  = &quot;hide&quot;; } <br>
                  arrange(); } <br>
                  else { divColl = document.all.tags(&quot;DIV&quot;);<br>
                  for (i=0; i&lt;divColl.length; i++) <br>
                  { whichEl = divColl(i);<br>
                  if (whichEl.className == &quot;child&quot;) <br>
                  whichEl.style.display = &quot;none&quot;; } } }</td>
                <td width="50%">定义函数initIt()，页面载入时，首先调用该函数。功能是初始化菜单，让页面载入时，菜单处于未打开状态。</td>
              </tr>
              <tr bgcolor="CFDFFF"> 
                <td rowspan="3">function expandIt(el) { <br>
                  if (!ver4) return; <br>
                  if (IE4) { whichEl = eval(el + &quot;Child&quot;);<br>
                  if (whichEl.style.display == &quot;none&quot;) { whichEl.style.display 
                  = &quot;block&quot;; } <br>
                  else { whichEl.style.display = &quot;none&quot;; } } <br>
                  else { whichEl = eval(&quot;document.&quot; + el + &quot;Child&quot;); 
                  <br>
                  if (whichEl.visibility == &quot;hide&quot;) <br>
                  { whichEl.visibility = &quot;show&quot;; }<br>
                  else { whichEl.visibility = &quot;hide&quot;; } arrange(); } 
                  } <br>
                  onload = initIt;</td>
                <td rowspan="3">定义一个函数expandIt(el)。由于层的可见状态在IE浏览器和NetScape浏览器中的解释是不同的，所以要分别讨论，判断菜单的状态。如果菜单是打开的，那么当再点击时，子菜单就不可见；如果菜单是关闭状态，那么当再点击时，子菜单就可见。</td>
              </tr>
              <tr> </tr>
              <tr> </tr>
              <tr> 
                <td width="50%"> 
                  <p>&lt;div id=&quot;KB1Parent&quot; class=&quot;parent&quot;&gt;<br>
                    &lt;a href=&quot;#&quot; onClick=&quot;expandIt('KB1'); return 
                    false&quot; &gt;<br>
                    &lt;img src=&quot;img/plus.gif&quot; border=0&gt;文件夹一&lt;/a&gt;&lt;/div&gt;<br>
                    。。。<br>
                    &lt;a href=&quot;sample.htm&quot; target=&quot;_blank&quot; 
                    &gt;&lt;img src=&quot;img/spacer.gif&quot; border=0 alt=&quot;&quot;&gt;&lt;img 
                    src=&quot;img/open.gif&quot; border=0&gt;页面三&lt;/a&gt; </p>
                  </td>
                <td width="50%">这一部分是页面上所显示的部分，包括那些形象的小“文件夹”图标，和文字。</td>
              </tr>
              <tr bgcolor="CFDFFF"> 
                <td width="50%">&lt;script language=&quot;JavaScript&quot;&gt;<br>
                  if(NS4){ firstEl = &quot;KB1Parent&quot;; <br>
                  firstInd = getIndex(firstEl); <br>
                  arrange(); } <br>
                  &lt;/script&gt;</td>
                <td width="50%">如果用户的浏览器是NetScape，先初始化一下变量。</td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
      <br>
      <br>
    </td>
    <td class="p2" width="18">&nbsp;</td>
    <td class="p2" width="1" bgcolor="A8A8AB"><img src="img/blank.gif" width="1" height="1"></td>
    <td class="p2" width="48">&nbsp;</td>
  </tr>
</table>
<table width="760" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr bgcolor="5F74BF"> 
    <td>&nbsp;</td>
  </tr>
</table>

<!--底部开始--> 
  
  <!--底部结束--> <p></p>
</body>
</html>