在網頁中實現折疊式菜單的ASP通用程序
2024-05-04 11:07:14
供稿：網友
在網頁中實現折疊式菜單的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)下通過。
