|
隨著Internet/Intranet的日益普及，Web編程和網(wǎng)頁(yè)制作已成為一種趨勢(shì)。本文給讀者介紹一種在網(wǎng)頁(yè)中實(shí)現(xiàn)折疊菜單的編程技術(shù)，相信會(huì)給你的網(wǎng)頁(yè)增色不少。所謂折疊菜單其實(shí)是一種動(dòng)態(tài)顯示的菜單，即在未進(jìn)行菜單操作時(shí)，只顯示主菜單，當(dāng)選擇某菜單項(xiàng)時(shí)，其下級(jí)子菜單動(dòng)態(tài)地顯示出來(lái)，選擇完成后，又隱藏起來(lái)。
實(shí)現(xiàn)原理
想必大家對(duì)HTML的<DIV>標(biāo)記已非常熟悉，我們利用其display屬性即可讓<DIV>標(biāo)記的內(nèi)容隱藏或顯示，具體地做法是當(dāng)display設(shè)為“none”時(shí)隱藏，設(shè)為“”時(shí)顯示。如果我們已經(jīng)用<DIV>標(biāo)記了所有的菜單名稱(chēng)（包括子菜單），只要用ASP語(yǔ)言并結(jié)合Script腳本動(dòng)態(tài)地控制相應(yīng)的菜單選項(xiàng)顯示或隱藏，即可實(shí)現(xiàn)折疊菜單。
現(xiàn)在的問(wèn)題是如何在程序中加入菜單項(xiàng)名稱(chēng)，當(dāng)然可以在網(wǎng)頁(yè)中直接加入，但是如果改變菜單選項(xiàng)時(shí)，必須重新改動(dòng)網(wǎng)頁(yè)的控制代碼，這種辦法顯然不夠明智。本文采用的是將所有的菜單選項(xiàng)名稱(chēng)按一定格式另外存放在一個(gè)文本文件中，在網(wǎng)頁(yè)載入時(shí)，ASP代碼自動(dòng)讀取其內(nèi)容，這樣如果改變菜單選項(xiàng)，只要在此文件中作相應(yīng)改動(dòng)即可。
關(guān)于文件操作，我們用ASP內(nèi)置的文件存取組件來(lái)完成，具體的用法見(jiàn)文后的程序代碼。
菜單文本文件
本文約定菜單文本文件內(nèi)容必須遵循以下規(guī)則：描述一個(gè)菜單選項(xiàng)的名稱(chēng)必須有三行內(nèi)容（見(jiàn)下例）；文件中不允許有空行；菜單選項(xiàng)名稱(chēng)前可以有空格，但必須用空格鍵（space）形成，不能用Tab鍵；文件的結(jié)尾用兩行“*END*”來(lái)完成。
假設(shè)有如下的三級(jí)菜單：
操作系統(tǒng)軟件
計(jì)算機(jī)軟件---- 應(yīng)用系統(tǒng)軟件
工具軟件----- PC TOOLS
CuteFTP
在菜單文本中應(yīng)為如下格式：
1------表示第1個(gè)主菜單名
計(jì)算機(jī)軟件-------- 菜單名稱(chēng)（以下同）
3 若不為0，指定本菜單的子菜單個(gè)數(shù)；本例為3個(gè)
1*1 表示第1個(gè)主菜單的第1個(gè)子菜單（必須用*號(hào)）
操作系統(tǒng)軟件
0 http://… --------- 若為0，表示該菜單項(xiàng)沒(méi)有子菜單，后跟超鏈接URL
1*2---------- 表示第1個(gè)主菜單的第2個(gè)子菜單（以下同）
應(yīng)用系統(tǒng)軟件
0 http://…
1*3
工具軟件
2
1*3*1-------- 第1個(gè)主菜單中第3個(gè)子菜單的第1個(gè)子菜單
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) '遞歸調(diào)用下級(jí)子菜單
End If
End If
End If
i=i+1
Wend
End Sub
</SCRIPT></HEAD><BODY>
<FONT color=red><H2 align="center">用ASP在網(wǎng)頁(yè)中實(shí)現(xiàn)折疊式菜單示例</H2></FONT><HR>
<% '----| 計(jì)算菜單id中的*個(gè)數(shù) |-----
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
'-----| 向?yàn)g覽器送出一個(gè)菜單選項(xiàng) |-----
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 '該級(jí)菜單有子菜單，只用<DIV>標(biāo)記
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 '該級(jí)菜單是最低層菜單，用<DIV>和<A>標(biāo)記
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
'----| 主控過(guò)程 |-----
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) '形成當(dāng)前菜單項(xiàng)的id
txtname=Trim(txtstr.readline) '讀取菜單名稱(chēng)
ct=Trim(txtstr.readline) '讀取該項(xiàng)菜單的子菜單個(gè)數(shù)
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" '一級(jí)子菜單顏色
case 2
txtcolor="green" '二級(jí)子菜單顏色
case 3
txtcolor="blue" '三級(jí)子菜單顏色，可繼續(xù)增加
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)下通過(guò)。
|
