|
微軟公司推出的IE4.X，使得按照HTML4標準制作的網頁一時成為時尚，這類網頁在動態功能方面有了非常大的提高。特別是可以通過頁面內嵌的Script語句，使頁面中的任意一段文字可以在需要時顯示出來，在不需要時隱藏起來，利用這
一特性，就可以在頁面上設計出可以伸縮的層次列表出來。這種列表實際表現的是一種分層次的樹狀結構，讀者可以用鼠標點擊上一層的條目，而展開或收起它的下一層。在明白了HTML4標準中DOM的實現機制及對風格表單的定義之后，很容易可以找到實現這種列表的途徑。但是一般來說，這種列表的條目都比較多，如果每次都用手工制作，不僅非常煩瑣，而且也十分容易出錯，所以要真正應用到實際的頁面制作當中，還必須有一種比較自動的方法。本人通過實驗，用ASP方式完成了一種比較通用的實現過程，稍加變化就可以應用到各種主頁的制作過程當中，非常方便。
簡單的實現
要在網頁上實現伸縮，首先要清楚如何使頁面中的一段文字按需要隱藏和顯示出來。我們看下面這段HTML格式的片段：
< Div Id="test" Style="Display:none" >
要隱藏的文字
這是符合HTML4標準的HTML語句，夾在
之間的文本將不顯示在頁面上，因為它風格表單的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="#" onclick="return ShowDiv('test');" >顯示< /a >
< a href="#" onclick="return HideDiv('test');" >隱藏< /a >
將上面的片段組合到一個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: >< ul >
< li >< a href="#" onclick="return
OnClickDiv('dy2')") >國內報刊< /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" >
農村大眾< /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 >
實現自動化
上面的一大堆東西，誰看了都會眼花繚亂的。不過在IE4上瀏覽的效果，又確實酷得讓人心癢，所以費一點力氣，用程序將這一煩瑣的制作過程自動化一下，是完全值得的。一個簡單的思路：將樹狀層次結構的數據保存到一個簡潔的文件載體當中，寫一段通用的程序從載體文件中讀取數據，生成我們所要的HTML文件。那么頭一步是要選擇什么樣的載體啦，數據庫方式當然最值得考慮，但這將牽扯出一大堆的問題，我想還是在另一個專題里來討論吧，在這里我選擇了Windows平臺上常用的.ini文件，這種文件很適合于保存樹狀的層次數據，并且系統平臺已經提供了基本的操作函數，可以大大省些力氣。
我把這一過程制成了ASP（ActiveServerPage）的形式，這樣拿過來就可以直接使用了，當然有時還是需要靜態的HTML文件，那么可以把ASP中的代碼轉移到VB程序中，也并不困難。為了能在ASP中處理.ini文件，用到了我以前寫的一個ActiveX服務對象，這個服務對象將對.ini文件操作的各種函數函數封裝在一個類（class）中，我用起來已經有順手了,下面開始我們的程序設計吧，先來看一下樹狀的層次數據保存在.ini文件中的形式：
文 件 名：LsTest.ini
[root]
a= 國 內 報 刊
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= 農 村 大 眾,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
文件中表現出的樹狀層次關系非常明顯，你只要稍微花點心思就一定能夠明白了。這里我做了一個小小的約定，就是每一個條目的等號后面，首先是這個條目的“標題”，它是不應省略的。之后是該條目的超級鏈接地址，由一個逗號進行分隔，如果沒有地址，就表明它還有下一層的子條目。
要在ASP程序中使用自制的ActiveX服務對象，首先要把該服務程序安裝到ASP程序運行的機器上，然后在ASP程序中建立這個對象，我想這些大家一定也有些經驗了，這里就不多說了。那么列出一個主題中的所有子條目，大概的形式就如下面的樣子：
Set Prof = Server.CreateObject("vbProFile.ProFile")
Prof.FileName = proPath
Buf = Prof.FirstValue(" 主 題 名")
Do While Len( Buf ) > 0
... ...
Buf = Prof.NextValue()
Loop
在上面的循環中，Buf中接收的數據是這樣的一種形式：“條目名=條目標題，鏈接地址”，為了便于在程序中使用，用InitDyItemStr函數將字符串分解到定義好的全局變量當中：
< !--#INCLUDE FILE="Str.inc"-- >
< %
gDyItemName="" ' 當 前 條 目 的 名 稱
gDyItemTitle="" ' 當 前 條 目 的 標 題
gDyItemLink="" ' 當 前 條 目 的 鏈 接 地 址
Sub InitDyItemStr( s )
gDyItemName = StrHead(s, "=")
gDyItemTitle = StrHead(s, ",")
gDyItemLink = s
End Sub
% >
這里調用了一個StrHead函數，這個函數也是出自本人之手，在處理字符串時十分有用，是我在編程時使用頻率最高的函數之一。另外為了方更地在程序中輸出引號，就寫了一個專門在字符串兩端加上引號的函數，因為在編寫ASP程序時常常要調用這兩個函數，所以我單獨把他們放在一個文件中，在要使用時把這個文件包含進行就可以了，下面就是這個文件：
文件名：Str.inc
<%
'在第一次遇參數c的位置載取ss
'返回載取的前半載，ss中保留后半載
'當ss中不包含c時，相當于從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
% >
在響應OnChick事件時，為書寫簡單，可以先寫成一個JavaScript函數，以備調用（注意：這里的JavaScript函數是在瀏覽器上執行的，一定要與服務器端執行的代碼區分開來）：
< 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值，以便在事件處理過程中進行操作，所以定義了一個全局的計數器和一個ID構造函數：
< %
curDyItemIndex=0
Function DyItemId()
DyItemId="dy" & curDyItemIndex
End Function
% >
有了這些準備工作，最后的輸出就不難了，提煉一下我們要完成的任務，就在從LsTest.ini文件中讀取數據，輸出如LsTest.htm文件中的格式數據。由于數據是樹狀的，所以很自然地會使用上函數的遞歸，請看下面實現的主體函數：
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
'結束定義的DIV對象
Response.Write "< /ul >< /div >" & vbCrLf
End Sub
最后為了調用方便，再定義一個對外的接口函數：
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 >
走向完善
功能是實現了，但在美觀程度上還不能盡人意，不過這是讓每個人施展各自絕活的時候，我可就不便包辦了。這里我只提出幾個我想到的改進方式，供大家參考：
通過響應onmouseover和onmouseout兩個事件，可以做到當鼠標移到某一個條目上時，令其變成與眾不同的顏色，這功能實現起來不難，確很有效果，何樂而不為呢？只要在條目輸出時，象下面的樣子加上點內容，想要的效果就有了：
< a ... onmouseover="this.style.color=COLOR1"
onmouseout="this.style.color=COLOR2" ... >
再有一點，在列表中，我們使用的是
和
標記，這能很好地體現出層次來，不過有時會感到，頁面上層次縮進的距離不是太合適，好象總是偏大了一點，在沒有風格表單時，我們是無能為力了，可現在通過對風格表單的定義，修改這一距離就十分簡單了，試試在ASP文件的頭部加上下面的風格定義，看看是否會有效果：
< style >
< !--
UL {margin-left:14pt; margin-top:0}
LI {line-height:12pt}
-- >
< /style >
本文取自：《計算機世界報》網站
|
