在網頁中實現折疊式選單的ASP通用程序
中國銀行山西省晉城分行科技科元晉豫
隨著Internet/Intranet的日益普及，Web程式設計和網頁製作已成為一種趨勢。本文為讀者介紹一種在網頁中實現折疊菜單的程式技術，相信會為你的網頁增色不少。所謂折疊選單其實是一種動態顯示的選單，也就是在未進行選單操作時，只顯示主選單，當選擇某選單項目時，其下層子選單動態地顯示出來，選擇完成後，又隱藏起來。
實現原理
想必大家對HTML的<DIV>標記已非常熟悉，我們利用其display屬性即可讓<DIV>標記的內容隱藏或顯示，具體地做法是當display設為none時隱藏，設為時顯示。如果我們已經用<DIV>標記了所有的選單名稱（包括子選單），只要用ASP語言並結合Script腳本動態地控制對應的選單選項顯示或隱藏，即可實現折疊選單。
現在的問題是如何在程式中加入選單項目名稱，當然可以在網頁中直接加入，但是如果改變選單選項時，必須重新改動網頁的控製程式碼，這種辦法顯然不夠明智。本文採用的是將所有的選單選項名稱以一定格式另外存放在一個文字檔案中，在網頁載入時，ASP程式碼自動讀取其內容，這樣如果改變選單選項，只要在此檔案中作相應改變即可。
關於檔案操作，我們用ASP內建的檔案存取元件來完成，具體的用法請見文後的程式碼。
選單文字文件
本文約定選單文字檔案內容必須遵循以下規則：描述一個選單選項的名稱必須有三行內容（見下例）；檔案中不允許有空行；選單選項名稱前可以有空格，但必須用空白鍵（space ）形成，不能用Tab鍵；文件的結尾用兩行*END*來完成。
假設有以下的三級選單：
作業系統軟體
電腦軟體---- 應用系統軟體
工具軟體----- PC TOOLS
CuteFTP
在選單文字中應為如下格式：
1------表示第1個主選單名
電腦軟體-------- 選單名稱（以下同）
3 若不為0，指定本選單的子選單個數；本例為3個
1*1 表示第1個主選單的第1個子選單（必須用*號）
作業系統軟體
0 http://… --------- 若為0，表示此選單項目沒有子選單，後面接著超連結URL
1*2---------- 表示第1個主選單的第2個子選單（以下同）
應用系統軟體
0 http://…
1*3
工具軟體
2
1*3*1-------- 第1個主選單中第3個子選單的第1個子選單
PC TOOLS
0 http://…
程式碼：
<HTML>
<HEAD>
<SCRIPT Language=VBScript>
'顯示或隱藏子選單
Sub disp_sub_menu(curid)
dim ct,i,tmpid
ct=document.all(curid).style.ct
i=1
While i<=CInt(ct)
tmpid=curid+*+cstr(i)
If document.all(tmpid).style.display=none Then
document.all(tmpid).style.display=
Else
document.all(tmpid).style.display=none
If CInt(document.all(tmpid).style.ct)>0 Then
If document.all(tmpid+*1).style.display= Then
disp_sub_menu(tmpid) '遞歸呼叫下級子選單
End If
End If
End If
i=i+1
Wend
End Sub
</SCRIPT></HEAD><BODY>
<FONT color=red><H2 align=center>用ASP在網頁中實作折疊式選單範例</H2></FONT><HR>
<% '----| 計算選單id中的*個數|-----
Function spnum(str)
dim tmpstr,m,t
tmpstr=str
m=InStr(str,*)
t=0
While m<>0
t=t+1
tmpstr=Mid(tmpstr,m+1)
m=InStr(tmpstr,*)
Wend
spnum=t
End Function
'-----| 傳送一個選單選項給瀏覽器|-----
Sub output_line(ct_flag,curid,txtname,ct,txtcolor)
dim ptl,sp,dispval,tspace
sp=spnum(curid)
dispval=none
If sp=0 Then dispval=
tspace=
While sp>0
tspace=tspace+
sp=sp-1
Wend
If ct_flag=1 Then '此等級選單有子選單，只用<DIV>標記
ptl=<div id=+chr(34)+curid+chr(34)+ style=
ptl=ptl+chr(34)+color:+txtcolor+;
ptl=ptl+ ct:+ct+; line-height:25px;
ptl=ptl+ cursor:hand;
ptl=ptl+ display:+dispval+chr(34)
ptl=ptl+ onclick=+chr(34)+disp_sub_menu('+curid+')+chr(34)
ptl=ptl+>+tspace+txtname+</div>+chr(13)
Else '此級選單是最低層選單，以<DIV>和<A>標記
ptl=<div id=+chr(34)+curid+chr(34)
ptl=ptl+ style=+chr(34)+display:+dispval+;
ptl=ptl+line-height:25px; color:+txtcolor+; ct:0+chr(34)+>
ptl=ptl+tspace+<A href=+chr(34)+ct+?txt=+txtname+chr(34)+>+txtname+</A></div>+chr(13)
End If
response.write ptl
End Sub
'----| 主控過程|-----
dim curid,txtname,ct,ct_flag,txtcolor
set fs=createobject(SCRIPTING.FILESYSTEMOBJECT)
menufile=replace(request.servervariables(path_translated),menu.asp,mfile.txt)
set txtstr=fs.opentextfile(menufile)
curid=txtstr.readline
While curid<>*END*
curid=y+Trim(curid) '形成目前選單項目的id
txtname=Trim(txtstr.readline) '讀取選單名稱
ct=Trim(txtstr.readline) '讀取該項目選單的子選單個數
ct_flag=1
If Mid(ct,1,1)=0 Then
ct_flag=0
ct=LTrim(Mid(ct,2))
End If
txtcolor=black
Select case spnum(curid)
case 1
txtcolor=red '一級子選單顏色a
case 2
txtcolor=green '二級子選單顏色
case 3
txtcolor=blue '三級子選單顏色，可繼續增加
End Select
output_line ct_flag,curid,txtname,ct,cstr(txtcolor)
curid=txtstr.readline
Wend
txtstr.close
%>
<HR></BODY></HTML>
本程式碼在Win98/PWS(Personal Web Server)下通過。