|
微軟公司推出的IE4.X，使得按照HTML4標(biāo)準(zhǔn)制作的網(wǎng)頁一時(shí)成為時(shí)尚，這類網(wǎng)頁在動(dòng)態(tài)功能方面有了非常大的提高。特別是可以通過頁面內(nèi)嵌的Script語句，使頁面中的任意一段文字可以在需要時(shí)顯示出來，在不需要時(shí)隱藏起來，利用這
一特性，就可以在頁面上設(shè)計(jì)出可以伸縮的層次列表出來。這種列表實(shí)際表現(xiàn)的是一種分層次的樹狀結(jié)構(gòu)，讀者可以用鼠標(biāo)點(diǎn)擊上一層的條目，而展開或收起它的下一層。在明白了HTML4標(biāo)準(zhǔn)中DOM的實(shí)現(xiàn)機(jī)制及對風(fēng)格表單的定義之后，很容易可以找到實(shí)現(xiàn)這種列表的途徑。但是一般來說，這種列表的條目都比較多，如果每次都用手工制作，不僅非常煩瑣，而且也十分容易出錯(cuò)，所以要真正應(yīng)用到實(shí)際的頁面制作當(dāng)中，還必須有一種比較自動(dòng)的方法。本人通過實(shí)驗(yàn)，用ASP方式完成了一種比較通用的實(shí)現(xiàn)過程，稍加變化就可以應(yīng)用到各種主頁的制作過程當(dāng)中，非常方便。
簡單的實(shí)現(xiàn)
要在網(wǎng)頁上實(shí)現(xiàn)伸縮，首先要清楚如何使頁面中的一段文字按需要隱藏和顯示出來。我們看下面這段HTML格式的片段：
< Div Id="test" Style="Display:none" >
要隱藏的文字
這是符合HTML4標(biāo)準(zhǔn)的HTML語句，夾在
之間的文本將不顯示在頁面上，因?yàn)樗L(fēng)格表單的Display屬性為none。（由于本文不主要介紹HTML4的風(fēng)格表單，有關(guān)祥情請讀者查找相關(guān)資料。）只要能動(dòng)態(tài)地將Display屬性設(shè)為空，即缺省值，那么這段文字就可以動(dòng)態(tài)地被顯示出來。這需要Script的支持，下面就是一個(gè)讓上面那樣的文字顯示和隱藏起來的兩個(gè)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 >
有了這兩個(gè)函數(shù)，就要考慮在什么時(shí)候調(diào)用它們。熟悉Script編程的讀者當(dāng)然已經(jīng)想到，可以把它們放到事件響應(yīng)過程之中了。大體的形式可能是這樣：
< a href="#" onclick="return ShowDiv('test');" >顯示< /a >
< a href="#" onclick="return HideDiv('test');" >隱藏< /a >
將上面的片段組合到一個(gè)HTML文件中，也算是一個(gè)完整的例子了，用IE4試驗(yàn)一下，看看是否達(dá)到了預(yù)期的效果。（注
意：JavaScript是大小寫敏感的，排版時(shí)可能出現(xiàn)差錯(cuò)，實(shí)際應(yīng)用中，最好都用小寫。）
有了以上的了解，制作一個(gè)伸縮式的層次列表，只是由簡到繁的過程，所以我也就不必做什么解釋，只提供一個(gè)例子做為參考，這個(gè)例子也是我們下一步要用程序來實(shí)現(xiàn)的一個(gè)結(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)報(bào)刊< /a >
< Div Id="dy2" Style=display:none >< ul >
< li >< a href="http://www.peopledaily.com.cn" >
人民日報(bào)< /a >
< li >< a href="http://www.gmdaily.com.cn" >
光明日報(bào)< /a >
< li >< a href="#" onclick="return
OnClickDiv('dy3')") >大眾日報(bào)< /a >
< Div Id="dy3" Style=display:none >< ul >
< li >< a href="http://www.dzdaily.com.cn" >
大眾日報(bào)< /a >
< li >< a href="http://www.dzdaily.com.cn/ncdz.htm" >
農(nóng)村大眾< /a >
< li >< a href="http://www.dzdaily.com.cn/qlwb.htm" >
齊魯晚報(bào)< /a >
< li >< a href="http://www.dzdaily.com.cn/shrb.htm" >
生活日報(bào)< /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 >
實(shí)現(xiàn)自動(dòng)化
上面的一大堆東西，誰看了都會(huì)眼花繚亂的。不過在IE4上瀏覽的效果，又確實(shí)酷得讓人心癢，所以費(fèi)一點(diǎn)力氣，用程序?qū)⑦@一煩瑣的制作過程自動(dòng)化一下，是完全值得的。一個(gè)簡單的思路：將樹狀層次結(jié)構(gòu)的數(shù)據(jù)保存到一個(gè)簡潔的文件載體當(dāng)中，寫一段通用的程序從載體文件中讀取數(shù)據(jù)，生成我們所要的HTML文件。那么頭一步是要選擇什么樣的載體啦，數(shù)據(jù)庫方式當(dāng)然最值得考慮，但這將牽扯出一大堆的問題，我想還是在另一個(gè)專題里來討論吧，在這里我選擇了Windows平臺(tái)上常用的.ini文件，這種文件很適合于保存樹狀的層次數(shù)據(jù)，并且系統(tǒng)平臺(tái)已經(jīng)提供了基本的操作函數(shù)，可以大大省些力氣。
我把這一過程制成了ASP（ActiveServerPage）的形式，這樣拿過來就可以直接使用了，當(dāng)然有時(shí)還是需要靜態(tài)的HTML文件，那么可以把ASP中的代碼轉(zhuǎn)移到VB程序中，也并不困難。為了能在ASP中處理.ini文件，用到了我以前寫的一個(gè)ActiveX服務(wù)對象，這個(gè)服務(wù)對象將對.ini文件操作的各種函數(shù)函數(shù)封裝在一個(gè)類（class）中，我用起來已經(jīng)有順手了,下面開始我們的程序設(shè)計(jì)吧，先來看一下樹狀的層次數(shù)據(jù)保存在.ini文件中的形式：
文 件 名：LsTest.ini
[root]
a= 國 內(nèi) 報(bào) 刊
b= 搜 索 引 擎
[a]
a1= 人 民 日 報(bào),http://www.peopledaily.com.cn
a2= 光 明 日 報(bào),http://www.gmdaily.com.cn
a3= 大 眾 日 報(bào)
[a3]
a3_1= 大 眾 日 報(bào),http://www.dzdaily.com.cn/
a3_1= 農(nóng) 村 大 眾,http://www.dzdaily.com.cn/ncdz.htm
a3_1= 齊 魯 晚 報(bào),http://www.dzdaily.com.cn/qlwb.htm
a3_1= 生 活 日 報(bào),http://www.dzdaily.com.cn/shrb.htm
[b]
b1= 雅 虎,http://gbchinese.yahoo.com
b2= 搜 狐,http://www.sohoo.com.cn
文件中表現(xiàn)出的樹狀層次關(guān)系非常明顯，你只要稍微花點(diǎn)心思就一定能夠明白了。這里我做了一個(gè)小小的約定，就是每一個(gè)條目的等號后面，首先是這個(gè)條目的“標(biāo)題”，它是不應(yīng)省略的。之后是該條目的超級鏈接地址，由一個(gè)逗號進(jìn)行分隔，如果沒有地址，就表明它還有下一層的子條目。
要在ASP程序中使用自制的ActiveX服務(wù)對象，首先要把該服務(wù)程序安裝到ASP程序運(yùn)行的機(jī)器上，然后在ASP程序中建立這個(gè)對象，我想這些大家一定也有些經(jīng)驗(yàn)了，這里就不多說了。那么列出一個(gè)主題中的所有子條目，大概的形式就如下面的樣子：
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)用了一個(gè)StrHead函數(shù)，這個(gè)函數(shù)也是出自本人之手，在處理字符串時(shí)十分有用，是我在編程時(shí)使用頻率最高的函數(shù)之一。另外為了方更地在程序中輸出引號，就寫了一個(gè)專門在字符串兩端加上引號的函數(shù)，因?yàn)樵诰帉慉SP程序時(shí)常常要調(diào)用這兩個(gè)函數(shù)，所以我單獨(dú)把他們放在一個(gè)文件中，在要使用時(shí)把這個(gè)文件包含進(jìn)行就可以了，下面就是這個(gè)文件：
文件名：Str.inc
<%
'在第一次遇參數(shù)c的位置載取ss
'返回載取的前半載，ss中保留后半載
'當(dāng)ss中不包含c時(shí)，相當(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事件時(shí)，為書寫簡單，可以先寫成一個(gè)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 >
為了給每一個(gè)條目在頁面上建立一個(gè)唯一的ID值，以便在事件處理過程中進(jìn)行操作，所以定義了一個(gè)全局的計(jì)數(shù)器和一個(gè)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ù)是樹狀的，所以很自然地會(huì)使用上函數(shù)的遞歸，請看下面實(shí)現(xiàn)的主體函數(shù)：
Sub ListItems(proPath,ItemName,Disp)
'建立并初始化ProFile對象
Set ItemProf = Server.CreateObject("vbProFile.ProFile")
ItemProf.FileName = proPath
'開始一個(gè)DIV對象，包含所有的子條目在其中
Response.Write "< Div Id=" & YH(DyItemId) & _
" Style=display:" & Disp & " >< ul >" & vbCrLf
'開始輸出每一個(gè)子條目
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)用方便，再定義一個(gè)對外的接口函數(shù)：
Public Sub DyList(proName,rootItem)
'將邏輯路徑映射成物理路徑
proPath=Server.mappath(proName)
curDyItemIndex = curDyItemIndex + 1
ListItems proPath,rootItem,""
End Sub
把上面這些片段保存到一個(gè)文件中，文件名就叫dyList.inc吧，我們就算大功告成了，你是不是想馬上看看效果呢？用下面這個(gè)ASP文件來做一下實(shí)驗(yàn)，瞧瞧你是否滿意？
文 件 名：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 >
走向完善
功能是實(shí)現(xiàn)了，但在美觀程度上還不能盡人意，不過這是讓每個(gè)人施展各自絕活的時(shí)候，我可就不便包辦了。這里我只提出幾個(gè)我想到的改進(jìn)方式，供大家參考：
通過響應(yīng)onmouseover和onmouseout兩個(gè)事件，可以做到當(dāng)鼠標(biāo)移到某一個(gè)條目上時(shí)，令其變成與眾不同的顏色，這功能實(shí)現(xiàn)起來不難，確很有效果，何樂而不為呢？只要在條目輸出時(shí)，象下面的樣子加上點(diǎn)內(nèi)容，想要的效果就有了：
< a ... onmouseover="this.style.color=COLOR1"
onmouseout="this.style.color=COLOR2" ... >
再有一點(diǎn)，在列表中，我們使用的是
和
標(biāo)記，這能很好地體現(xiàn)出層次來，不過有時(shí)會(huì)感到，頁面上層次縮進(jìn)的距離不是太合適，好象總是偏大了一點(diǎn)，在沒有風(fēng)格表單時(shí)，我們是無能為力了，可現(xiàn)在通過對風(fēng)格表單的定義，修改這一距離就十分簡單了，試試在ASP文件的頭部加上下面的風(fēng)格定義，看看是否會(huì)有效果：
< style >
< !--
UL {margin-left:14pt; margin-top:0}
LI {line-height:12pt}
-- >
< /style >
本文取自：《計(jì)算機(jī)世界報(bào)》網(wǎng)站
|
