微軟公司推出的IE4.X，使得按照HTML4標(biāo)準(zhǔn)制作的網(wǎng)頁一時成為時尚，這類網(wǎng)頁在動態(tài)功能方面有了非常大的提高。特別是可以通過頁面內(nèi)嵌的Script語句，使頁面中的任意一段文字可以在需要時顯示出來，在不需要時隱藏起來，利用這
一特性，就可以在頁面上設(shè)計出可以伸縮的層次列表出來。這種列表實際表現(xiàn)的是一種分層次的樹狀結(jié)構(gòu)，讀者可以用鼠標(biāo)點擊上一層的條目，而展開或收起它的下一層。在明白了HTML4標(biāo)準(zhǔn)中DOM的實現(xiàn)機制及對風(fēng)格表單的定義之后，很容易可以找到實現(xiàn)這種列表的途徑。但是一般來說，這種列表的條目都比較多，如果每次都用手工制作，不僅非常煩瑣，而且也十分容易出錯，所以要真正應(yīng)用到實際的頁面制作當(dāng)中，還必須有一種比較自動的方法。本人通過實驗，用ASP方式完成了一種比較通用的實現(xiàn)過程，稍加變化就可以應(yīng)用到各種主頁的制作過程當(dāng)中，非常方便。
　　簡單的實現(xiàn)

　　要在網(wǎng)頁上實現(xiàn)伸縮，首先要清楚如何使頁面中的一段文字按需要隱藏和顯示出來。我們看下面這段HTML格式的片段：

< Div Id="test" Style="Display:none" >
要隱藏的文字
　　這是符合HTML4標(biāo)準(zhǔn)的HTML語句，夾在

之間的文本將不顯示在頁面上，因為它風(fēng)格表單的Display屬性為none。（由于本文不主要介紹HTML4的風(fēng)格表單，有關(guān)祥情請讀者查找相關(guān)資料。）只要能動態(tài)地將Display屬性設(shè)為空，即缺省值，那么這段文字就可以動態(tài)地被顯示出來。這需要Script的支持，下面就是一個讓上面那樣的文字顯示和隱藏起來的兩個JavaScript函數(shù)，只要將自定義的Div的Id值代入，對應(yīng)的文字就顯示或隱藏起來了：

< 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 >
　　有了這兩個函數(shù)，就要考慮在什么時候調(diào)用它們。熟悉Script編程的讀者當(dāng)然已經(jīng)想到，可以把它們放到事件響應(yīng)過程之中了。大體的形式可能是這樣：

< a href="#" onclick="return ShowDiv('test');" >顯示< /a >
< a href="#" onclick="return HideDiv('test');" >隱藏< /a >
　　將上面的片段組合到一個HTML文件中，也算是一個完整的例子了，用IE4試驗一下，看看是否達(dá)到了預(yù)期的效果。（注
意：JavaScript是大小寫敏感的，排版時可能出現(xiàn)差錯，實際應(yīng)用中，最好都用小寫。）

　　有了以上的了解，制作一個伸縮式的層次列表，只是由簡到繁的過程，所以我也就不必做什么解釋，只提供一個例子做為參考，這個例子也是我們下一步要用程序來實現(xiàn)的一個結(jié)果：

文 件 名：LsTest.htm
< html >
< head >
< title >DyList Test< /title >
< script language="JavaScript" >
/*
根據(jù)對象當(dāng)前的屬性，改變對象的顯示狀態(tài)
*/
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: >< ul >
< li >< a href="#" onclick="return
OnClickDiv('dy2')") >國內(nèi)報刊< /a >
< Div Id="dy2" Style=display:none >< ul >
< li >< a href="http://www.peopledaily.com.cn" >
人民日報< /a >
< li >< a href="http://www.gmdaily.com.cn" >
光明日報< /a >
< li >< a href="#" onclick="return
OnClickDiv('dy3')") >大眾日報< /a >
< Div Id="dy3" Style=display:none >< ul >
< li >< a href="http://www.dzdaily.com.cn" >
大眾日報< /a >
< li >< a href="http://www.dzdaily.com.cn/ncdz.htm" >
農(nóng)村大眾< /a >
< li >< a href="http://www.dzdaily.com.cn/qlwb.htm" >
齊魯晚報< /a >
< li >< a href="http://www.dzdaily.com.cn/shrb.htm" >
生活日報< /a >
< /ul >< /div >
< /ul >< /div >
< li >< a href="#" onclick="return OnClickDiv('dy4')") >
搜索引擎< /a >
< Div Id="dy4" Style=display:none >< ul >
< li >< a href="http://gbchinese.yahoo.com" >
雅虎< /a >
< li >< a href="http://www.sohoo.com.cn" >
搜狐< /a >
< /ul >< /div >
< /ul >< /div >
< hr >< h3 >List End< /h3 >
< /body >
< /html >
　　實現(xiàn)自動化

　　上面的一大堆東西，誰看了都會眼花繚亂的。不過在IE4上瀏覽的效果，又確實酷得讓人心癢，所以費一點力氣，用程序?qū)⑦@一煩瑣的制作過程自動化一下，是完全值得的。一個簡單的思路：將樹狀層次結(jié)構(gòu)的數(shù)據(jù)保存到一個簡潔的文件載體當(dāng)中，寫一段通用的程序從載體文件中讀取數(shù)據(jù)，生成我們所要的HTML文件。那么頭一步是要選擇什么樣的載體啦，數(shù)據(jù)庫方式當(dāng)然最值得考慮，但這將牽扯出一大堆的問題，我想還是在另一個專題里來討論吧，在這里我選擇了Windows平臺上常用的.ini文件，這種文件很適合于保存樹狀的層次數(shù)據(jù)，并且系統(tǒng)平臺已經(jīng)提供了基本的操作函數(shù)，可以大大省些力氣。

　　我把這一過程制成了ASP（ActiveServerPage）的形式，這樣拿過來就可以直接使用了，當(dāng)然有時還是需要靜態(tài)的HTML文件，那么可以把ASP中的代碼轉(zhuǎn)移到VB程序中，也并不困難。為了能在ASP中處理.ini文件，用到了我以前寫的一個ActiveX服務(wù)對象，這個服務(wù)對象將對.ini文件操作的各種函數(shù)函數(shù)封裝在一個類（class）中，我用起來已經(jīng)有順手了,下面開始我們的程序設(shè)計吧，先來看一下樹狀的層次數(shù)據(jù)保存在.ini文件中的形式：

文 件 名：LsTest.ini
[root]
a= 國 內(nèi) 報 刊
b= 搜 索 引 擎

[a]
a1= 人 民 日 報,http://www.peopledaily.com.cn
a2= 光 明 日 報,http://www.gmdaily.com.cn
a3= 大 眾 日 報

[a3]
a3_1= 大 眾 日 報,http://www.dzdaily.com.cn/
a3_1= 農(nóng) 村 大 眾,http://www.dzdaily.com.cn/ncdz.htm
a3_1= 齊 魯 晚 報,http://www.dzdaily.com.cn/qlwb.htm
a3_1= 生 活 日 報,http://www.dzdaily.com.cn/shrb.htm

[b]
b1= 雅 虎,http://gbchinese.yahoo.com
b2= 搜 狐,http://www.sohoo.com.cn
　　文件中表現(xiàn)出的樹狀層次關(guān)系非常明顯，你只要稍微花點心思就一定能夠明白了。這里我做了一個小小的約定，就是每一個條目的等號后面，首先是這個條目的“標(biāo)題”，它是不應(yīng)省略的。之后是該條目的超級鏈接地址，由一個逗號進(jìn)行分隔，如果沒有地址，就表明它還有下一層的子條目。

　　要在ASP程序中使用自制的ActiveX服務(wù)對象，首先要把該服務(wù)程序安裝到ASP程序運行的機器上，然后在ASP程序中建立這個對象，我想這些大家一定也有些經(jīng)驗了，這里就不多說了。那么列出一個主題中的所有子條目，大概的形式就如下面的樣子：

Set Prof = Server.CreateObject("vbProFile.ProFile")
Prof.FileName = proPath
Buf = Prof.FirstValue(" 主 題 名")
Do While Len( Buf )  > 0
... ...
Buf = Prof.NextValue()
Loop
　　　　在上面的循環(huán)中，Buf中接收的數(shù)據(jù)是這樣的一種形式：“條目名=條目標(biāo)題，鏈接地址”，為了便于在程序中使用，用InitDyItemStr函數(shù)將字符串分解到定義好的全局變量當(dāng)中：

< !--#INCLUDE FILE="Str.inc"-- >
< %
gDyItemName="" ' 當(dāng) 前 條 目 的 名 稱
gDyItemTitle="" ' 當(dāng) 前 條 目 的 標(biāo) 題
gDyItemLink="" ' 當(dāng) 前 條 目 的 鏈 接 地 址

Sub InitDyItemStr( s )
gDyItemName = StrHead(s, "=")
gDyItemTitle = StrHead(s, ",")
gDyItemLink = s
End Sub
% >
　　這里調(diào)用了一個StrHead函數(shù)，這個函數(shù)也是出自本人之手，在處理字符串時十分有用，是我在編程時使用頻率最高的函數(shù)之一。另外為了方更地在程序中輸出引號，就寫了一個專門在字符串兩端加上引號的函數(shù)，因為在編寫ASP程序時常常要調(diào)用這兩個函數(shù)，所以我單獨把他們放在一個文件中，在要使用時把這個文件包含進(jìn)行就可以了，下面就是這個文件：

文件名：Str.inc
<%
'在第一次遇參數(shù)c的位置載取ss
'返回載取的前半載，ss中保留后半載
'當(dāng)ss中不包含c時，相當(dāng)于從ss的最后載取
Public Function StrHead(ss, c)
    i = InStr(ss, c)
    If i  > 0 Then
        StrHead = Mid(ss, 1, i - 1)
        ss = Mid(ss, i + Len(c))
    Else
        StrHead = ss
        ss = ""
    End If
End Function
' 在s 的 兩 端 加 上 引 號 返 回
Public Function YH(s)
    YH = Chr(34) & s & Chr(34)
End Function
% >
　　在響應(yīng)OnChick事件時，為書寫簡單，可以先寫成一個JavaScript函數(shù)，以備調(diào)用（注意：這里的JavaScript函數(shù)是在瀏覽器上執(zhí)行的，一定要與服務(wù)器端執(zhí)行的代碼區(qū)分開來）：

< 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 >
　　為了給每一個條目在頁面上建立一個唯一的ID值，以便在事件處理過程中進(jìn)行操作，所以定義了一個全局的計數(shù)器和一個ID構(gòu)造函數(shù)：

< %
curDyItemIndex=0
Function DyItemId()
DyItemId="dy" & curDyItemIndex
End Function
% >
　　有了這些準(zhǔn)備工作，最后的輸出就不難了，提煉一下我們要完成的任務(wù)，就在從LsTest.ini文件中讀取數(shù)據(jù)，輸出如LsTest.htm文件中的格式數(shù)據(jù)。由于數(shù)據(jù)是樹狀的，所以很自然地會使用上函數(shù)的遞歸，請看下面實現(xiàn)的主體函數(shù)：

Sub ListItems(proPath,ItemName,Disp)
'建立并初始化ProFile對象
Set ItemProf = Server.CreateObject("vbProFile.ProFile")
ItemProf.FileName = proPath

'開始一個DIV對象，包含所有的子條目在其中
Response.Write "< Div Id=" & YH(DyItemId) & _
" Style=display:" & Disp & " >< ul >" & vbCrLf

'開始輸出每一個子條目
  buf = ItemProf.FirstValue(ItemName)
Do While Len(buf)  > 0
InitDyItemStr buf
If Len(gDyItemLink)  > 0 then
Response.Write "< li >< a href=
         " & YH(gDyItemLink) & " >" & _
gDyItemTitle & "< /a >" & vbCrLf
Else
'如果鏈接地址為空，則開始下一層的列表
curDyItemIndex = curDyItemIndex + 1
Response.Write "< li >
            < a href=" & YH("#") & _
" onclick=" & YH("return OnClickDiv
            ('" & DyItemId & "')") & _
") >" & gDyItemTitle & "< /a >" & vbCrLf
ListItems proPath,gDyItemName,"none" '使用遞歸
End If

buf=ItemProf.NextValue()
Loop

'結(jié)束定義的DIV對象
Response.Write "< /ul >< /div >" & vbCrLf
End Sub
　　最后為了調(diào)用方便，再定義一個對外的接口函數(shù)：
Public Sub DyList(proName,rootItem)
'將邏輯路徑映射成物理路徑
proPath=Server.mappath(proName)
curDyItemIndex = curDyItemIndex + 1
ListItems proPath,rootItem,""
End Sub
　　　　把上面這些片段保存到一個文件中，文件名就叫dyList.inc吧，我們就算大功告成了，你是不是想馬上看看效果呢？用下面這個ASP文件來做一下實驗，瞧瞧你是否滿意？

文 件 名：LsTest.asp
< html >
< head >
< title >DyList Test< /title >
< !--#INCLUDE FILE=" dyList.inc"-- >
< /head >
< body >
< h3 >List Start< /h3 >< hr >
< %
DyList "lsTest.ini","root"
% >
< hr >< h3 >List End< /h3 >
< /body >
< /html >
　　走向完善

　　功能是實現(xiàn)了，但在美觀程度上還不能盡人意，不過這是讓每個人施展各自絕活的時候，我可就不便包辦了。這里我只提出幾個我想到的改進(jìn)方式，供大家參考：

　　通過響應(yīng)onmouseover和onmouseout兩個事件，可以做到當(dāng)鼠標(biāo)移到某一個條目上時，令其變成與眾不同的顏色，這功能實現(xiàn)起來不難，確很有效果，何樂而不為呢？只要在條目輸出時，象下面的樣子加上點內(nèi)容，想要的效果就有了：

< a ... onmouseover="this.style.color=COLOR1"
onmouseout="this.style.color=COLOR2" ...  >
　　再有一點，在列表中，我們使用的是

和

標(biāo)記，這能很好地體現(xiàn)出層次來，不過有時會感到，頁面上層次縮進(jìn)的距離不是太合適，好象總是偏大了一點，在沒有風(fēng)格表單時，我們是無能為力了，可現(xiàn)在通過對風(fēng)格表單的定義，修改這一距離就十分簡單了，試試在ASP文件的頭部加上下面的風(fēng)格定義，看看是否會有效果：
< style >
< !--
UL {margin-left:14pt; margin-top:0}
LI {line-height:12pt}
-- >
< /style >

　　本文取自：《計算機世界報》網(wǎng)站