動態|伸縮|伸縮 微軟公司推出的IE4.X，使得按照HTML4標準製作的網頁一時成為時尚，這類網頁在動態功能方面有了非常大的提高。特別是可以通過頁面內嵌的Script語句，使頁面中的任意一段文字可以在需要時顯示出來，在不需要時隱藏起來，利用這一特性，就可以在頁面上設計出可以伸縮的層次列表出來。這種列表實際表現的是一種分層次的樹狀結構，讀者可以用滑鼠點擊上一層的條目，而展開或收合它的下一層。在明白了HTML4標準中DOM的實現機制及對風格表單的定義之後，很容易可以找到實現這種列表的途徑。但是一般來說，這種列表的條目都比較多，如果每次都用手工製作，不僅非常煩瑣，而且也十分容易出錯，所以要真正應用到實際的頁面製作當中，還必須有一種比較自動的方法。本人通過實驗，用ASP方式完成了一種比較通用的實現過程，稍加變化就可以應用到各種首頁的製作過程當中，非常方便，在這裡我把它寫出來奉獻給大家，希望大家能多提意見嘍。
簡單的實現
要在網頁上實現伸縮，首先要清楚如何使頁面中的一段文字按需要隱藏和顯示出來。我們看下面這段HTML格式的片段：
<Div Id=”test” Style=”Display:none”>要隱藏的文字</Div>
這是符合HTML4標準的HTML語句，夾在<Div>之間的文本將不顯示在頁面上，因為它風格表單的Display屬性為none。（由於本文不主要介紹HTML4的風格表單，有關祥情請讀者尋找相關資料。）只要能動態地將Display屬性設為空白，即預設值，那麼這段文字就可以動態地被顯示出來。這需要Script的支援，下面就是一個讓上面那樣的文字顯示和隱藏起來的兩個JavaScript函數，只要將自訂的Div的Id值代入，對應的文字就顯示或隱藏起來了：
<script language="JavaScript">
function ShowDiv(DivId)
{
document.all[DivId].style.display='';
return 0;
}
</script>
function HideDiv(DivId)
{
document.all[DivId].style.display='none';
return 0;
}
</script>
有了這兩個函數，就要考慮在什麼時候調用它們。熟悉Script編程的讀者當然已經想到，可以把它們放到事件響應過程之中了。大體的形式可能是這樣：
<a href=”#” return HideDiv(‘test’);”>隱藏
將上面的片段組合到一個HTML檔案中，也算是一個完整的例子了，用IE4實驗一下，看看是否達到了預期的效果。（注意：JavaScript是大小寫敏感的，排版時可能出現差錯，實際應用中，最好都用小寫。）
有了以上的瞭解，製作一個伸縮式的層次列表，只是由簡到繁的過程，所以我也就不必做什麼解釋，只提供一個例子做為參考，這個例子也是我們下一步要用程式來實現的一個結果：
檔案名稱：LsTest.htm
<html>
<head>
<title>DyList Test</title>
<script language="JavaScript">
/*
根據對象當前的屬性，改變對象的顯示狀態
*/
function OnClickDiv(DivId)
{
if(document.all[DivId].style.display=='none')
{ document.all[DivId].style.display=''; }
else
{ document.all[DivId].style.display='none'; }
return 0;
}
</script>
</head>
<body>
<h3>List Start</h3><hr>
<Div Id="dy1" Style=display:>
<a href="#" )>國內報刊
<Div Id="dy2" Style=display:none>
人民日報
光明日報
<a href="#" )>福士日報
<Div Id="dy3" Style=display:none>
福士日報
農村福士
齊魯晚報
生活日報
</div>
</div>
<a href="#" )>搜尋引擎
<Div Id="dy4" Style=display:none>
雅虎
搜狐
</div>
</div>
<hr><h3>List End</h3>
</body>
</html>
實現自動化
上面的一大堆東西，誰看了都會眼花繚亂的。不過在IE4上瀏覽的效果，又確實酷得讓人心癢，所以費一點力氣，用程式將這一煩瑣的製作過程自動化一下，是完全值得的。一個簡單的思路：將樹狀階層的資料儲存到一個簡潔的檔案載體當中，寫一段通用的程式從載體檔案中讀取資料，產生我們所要的HTML檔案。那麼頭一步是要選擇什麼樣的載體啦，資料庫方式當然最值得考慮，但這將牽扯出一大堆的問題，我想還是在另一個專題裡來討論吧，在這裡我選擇了Windows平台上常用的.ini檔案，這種檔案很適合於儲存樹狀的層次資料，並且系統平台已經提供了基本的操作函數，可以大大省些力氣。
我把這一過程製成了ASP（Active Server Page）的形式，這樣拿過來就可以直接使用了，當然有時還是需要靜態HTML檔案，那麼可以把ASP中的代碼轉移到VB程式中，也並不困難。為了能在ASP中處理.ini檔案，用到了我以前寫的一個ActiveX服務物件，這個服務物件將對.ini檔案操作的各種函數函數封裝在一個類（class）中，我用起來已經有順手了（關於這個服務物件的具體說明，請見本人的《設定檔(.ini)在VB5中的應用》一文，聽別人講在什麼刊物上見過我的這篇文章，可我一直也沒有接到任何通知，所以將它也一併附在後面）。
下面開始我們的程式設計吧，先來看一下樹狀的層次資料儲存在.ini檔案中的形式：
檔案名稱：LsTest.ini
[root]
a=國內報刊
b=搜尋引擎
[a]
a1=人民日報,http://www.peopledaily.com.cn
a2=光明日報,http://www.gmdaily.com.cn
a3=福士日報
[a3]&n
