菜單|程式|網頁
在網頁中實現摺疊式菜單的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>