Step By Step 製作XML的Javascript樹形目錄

javascript|xml

    很多地方都會用到樹形目錄，比如CSDN論壇的列表，這樣的代碼也有很多，但是很多人都是拿來主義，沒有自己動手做個，下面我就和大家一起分享怎麼來自己做一個XML做資料來源的TreeMenu。從中你會看到很多有用的JS指令碼和頁面元素的一些重要但經常被我們忽略的屬性用法。

    Step1.倒著來，看看完成後的TreeMenu是什麼樣子的？

JS指令碼動態產生的HTML大綱，這個是動態產生的，頁面原始碼裡沒有

<div id="MyDiv"> <span class="hasItems" id="csxmlTree" style="MARGIN-LEFT: 0px" text="根目錄" expanding="true" target treeId> <img  src="http://www.webjx.com/htmldata/2005-10-10/images/contract.gif">根目錄</span><br> <span style="DISPLAY: none"><span class="hasItems" id="csxmlTree" style="MARGIN-LEFT: 16px" text="目錄1" expanding="false" target treeId="1000"> <img  src="http://www.webjx.com/htmldata/2005-10-10/images/contract.gif">目錄1</span><br> <span class="Items" id="csxmlTree" style="MARGIN-LEFT: 32px" text="目錄1.1" expanding="false" target treeId="2000" href="javascript:alert(this.innerHTML);"> <img src="http://www.webjx.com/htmldata/2005-10-10/images/endnode.gif">目錄1.1</span><br> <span class="Items" id="csxmlTree" style="MARGIN-LEFT: 32px" text="目錄1.2" expanding="false" target="_blank" treeId="2001" href="1.htm"> <img src="http://www.webjx.com/htmldata/2005-10-10/images/endnode.gif">目錄1.2</span><br> <span class="hasItems" id="csxmlTree" style="MARGIN-LEFT: 16px" text="目錄2" expanding="false" target treeId="3000"> <img  src="http://www.webjx.com/htmldata/2005-10-10/images/contract.gif">目錄2</span><br> <span class="Items" id="csxmlTree" style="MARGIN-LEFT: 32px" text="目錄2.1" expanding="false" target treeId="3001"> <img src="http://www.webjx.com/htmldata/2005-10-10/images/endnode.gif">目錄2.1</span><br> <span class="Items" id="csxmlTree" style="MARGIN-LEFT: 32px" text="目錄2.2" expanding="false" target treeId="3002"> <img src="http://www.webjx.com/htmldata/2005-10-10/images/endnode.gif">目錄2.2</span><br> <span class="Items" id="csxmlTree" style="MARGIN-LEFT: 32px" text="目錄2.3" expanding="false" target treeId="3003"> <img src="http://www.webjx.com/htmldata/2005-10-10/images/endnode.gif">目錄2.3</span><br> <span class="Items" id="csxmlTree" style="MARGIN-LEFT: 32px" text="目錄2.3" expanding="false" target treeId="3004"> <img src="http://www.webjx.com/htmldata/2005-10-10/images/endnode.gif">目錄2.3</span><br> <span class="hasItems" id="csxmlTree" style="MARGIN-LEFT: 16px" text="目錄3" expanding="false" target treeId="4000"> <img  src="http://www.webjx.com/htmldata/2005-10-10/images/contract.gif">目錄3</span><br> <span class="Items" id="csxmlTree" style="MARGIN-LEFT: 32px" text="目錄3.1" expanding="false" target treeId="4001"> <img src="http://www.webjx.com/htmldata/2005-10-10/images/endnode.gif">目錄3.1</span><br> <span class="Items" id="csxmlTree" style="MARGIN-LEFT: 16px" text="目錄4" expanding="false" target treeId="5000"> <img src="http://www.webjx.com/htmldata/2005-10-10/images/endnode.gif">目錄4</span><br> 　</span> </div>

    上面的代碼是不是看起來很亂？其實不是的，你把它粘貼到FP等視覺化檢視的代碼裡面，就能看清楚結構了。其實很簡單，就是SPAN網頁Tag產生一格嵌套的結構。我們接下來要寫的JS指令碼的主要目的就是讀取XML檔案然後產生這樣的結構。所以這個是關鍵，你一定要看明白。不妨把它先存成一個網頁，看看效果（注意，原封不動拷貝的話，只能顯示“根目錄”一項，你需要改動藍色的地方，把none去掉），除了紅色的DIV其他都是JS指令碼動態產生的。class="Items"和class="hasItems"是類似這樣的樣式表單：

.hasItems{font-weight:bold;height:20px;padding:3 6 0 6;margin:2px;cursor:hand;color:#555555;border:1px solid #fffffa;} .Items{height:20px;padding:3 6 0 6;margin:1px;cursor:hand;color:#555555;border:1px solid #fffffa;}

    察看黃色部分的樣式表，可以明白Tree結構形式上就是靠這個定義左邊距來達到效果了，通過縮緊不同的量，這樣就會很清楚把樹形構造出來了。

    接下來要寫的指令碼就是要通過一定的方法把上面提到的要點構造出HTML代碼來。大家仔細把上面的弄明白，下面我們就開工！！！