Web ページに折りたたみ可能なメニューを実装する ASP ユニバーサル プログラム
中国銀行 山西省金城支店 晋宇科技支店
インターネット/イントラネットの普及に伴い、Web プログラミングと Web ページ制作がトレンドになっています。この記事では、Web ページに折りたたみメニューを実装するためのプログラミング テクノロジを読者に紹介します。これは、Web ページに多くの彩りを加えるものになると思います。いわゆる折りたたみメニューは、実際には動的に表示されるメニューです。つまり、メニュー操作が実行されていないときはメイン メニューのみが表示され、メニュー項目が選択されると、その下位のサブメニューが動的に表示され、選択が完了すると動的に表示されます。 、再び非表示になります。
実施原則
HTML の <DIV> タグについてよく知っている必要があります。その表示属性を使用して、<DIV> タグの内容を非表示または表示できます。具体的な方法は、表示が none に設定されている場合に非表示または表示することです。すべてのメニュー名 (サブメニューを含む) を <DIV> でマークした場合、ASP 言語とスクリプトを組み合わせて、対応するメニュー オプションの表示または非表示を動的に制御することで、折りたたみメニューを実現できます。
ここで問題となるのは、メニュー項目名をプログラムに追加する方法です。もちろん、それを Web ページに直接追加することもできますが、メニュー オプションを変更する場合は、Web ページの制御コードを再変更する必要があります。この方法は明らかに賢明ではありません。この記事では、すべてのメニュー オプション名を特定の形式でテキスト ファイルに保存することにより、Web ページが読み込まれるときに、ASP コードがその内容を自動的に読み取ります。この方法では、メニュー オプションが変更された場合、対応するものを作成するだけです。このファイルの変更は可能です。
ファイル操作については、ASP の組み込みファイル アクセス コンポーネントを使用して実行します。具体的な使用方法については、記事の最後にあるプログラム コードを参照してください。
メニューテキストファイル
この記事は、メニュー テキスト ファイルの内容が次の規則に従う必要があることに同意します。メニュー オプションを説明する名前には 3 行の内容が必要です (以下の例を参照)。ファイル内で前に空白行を含めることはできません。メニュー オプション名ですが、スペース キーを使用する必要があります (スペース キー)。Tab キーは使用できません。ファイルの終わりは 2 行の *END* で終わります。
次の 3 レベルのメニューがあるとします。
オペレーティング システム ソフトウェア
コンピュータソフトウェア----アプリケーションシステムソフトウェア
ツールソフト-----PC TOOLS
CuteFTP
メニュー テキストは次の形式にする必要があります。
1------最初のメインメニュー名を示します
パソコンソフト-----メニュー名（以下同じ）
3 0 でない場合は、このメニューのサブメニューの数を指定します。この例では 3 です。
1*1 は、最初のメイン メニューの最初のサブメニューを示します (* を使用する必要があります)
オペレーティング システム ソフトウェア
0 http://… --------- 0 の場合、メニュー項目にサブメニューがなく、その後にハイパーリンク URL が続くことを意味します
1*2---------- は、最初のメインメニューの 2 番目のサブメニューを示します（以下同じ）
アプリケーションシステムソフトウェア
0 http://…
1*3
ツールソフトウェア
2
1*3*1---------- 1番目のメインメニューの3番目のサブメニューの1番目のサブメニュー
パソコンツール
0 http://…
プログラムコード:
<HTML>
<頭>
<SCRIPT 言語=VBScript>
'サブメニューの表示または非表示
サブ disp_sub_menu(curid)
薄暗いct、i、tmpid
ct=document.all(curid).style.ct
i=1
i<=CInt(ct) の場合
tmpid=curid+*+cstr(i)
document.all(tmpid).style.display=none の場合
document.all(tmpid).style.display=
それ以外
document.all(tmpid).style.display=none
If CInt(document.all(tmpid).style.ct)>0 then
document.all(tmpid+*1).style.display= の場合
disp_sub_menu(tmpid) '下位レベルのサブメニューを再帰的に呼び出します
終了する場合
終了する場合
終了する場合
i=i+1
ウェン
エンドサブ
</SCRIPT></HEAD><BODY>
<FONT color=red><H2 align=center>ASP を使用して Web ページに折りたたみメニューを実装する例</H2></FONT><HR>
<% '------| メニュー ID の * 数値を計算します|-----
関数 spnum(str)
dim tmpstr,m,t
tmpstr=str
m=InStr(str,*)
t=0
一方、m<>0
t=t+1
tmpstr=Mid(tmpstr,m+1)
m=InStr(tmpstr,*)
ウェン
スプナム=t
終了機能
'-----| メニュー オプションをブラウザに送信します |-----
サブ出力ライン(ct_flag,curid,txtname,ct,txtcolor)
dim ptl、sp、dispval、tspace
sp=spnum(curid)
dispval=なし
sp=0 の場合 dispval=
tspace=
sp>0の間
tspace=tspace+
sp=sp-1
ウェン
ct_flag=1 の場合、「このレベルのメニューにはサブメニューがあります。それらをマークするには <DIV> のみを使用してください」
ptl=<div id=+chr(34)+curid+chr(34)+style=
ptl=ptl+chr(34)+color:+txtcolor+;
ptl=ptl+ ct:+ct+; 行の高さ:25px;
ptl=ptl+ カーソル:手;
ptl=ptl+表示:+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+行の高さ:25px; カラー:+txtcolor+;
ptl=ptl+tspace+<A href=+chr(34)+ct+?txt=+txtname+chr(34)+>+txtname+</A></div>+chr(13)
終了する場合
応答.書き込みptl
エンドサブ
'----| メイン制御プロセス|-----
dim curid、txtname、ct、ct_flag、txtcolor
set fs=createobject(SCRIPTING.FILESYSTEMOBJECT)
menufile=replace(request.servervariables(path_transulated),menu.asp,mfile.txt)
set txtstr=fs.opentextfile(メニューファイル)
curid=txtstr.readline
硬化中<>*END*
curid=y+Trim(curid) '現在のメニュー項目のIDを形成します
txtname=Trim(txtstr.readline) 'メニュー名を読み込む
ct=Trim(txtstr.readline) 'このメニューのサブメニューの数を読み取ります
ct_flag=1
Mid(ct,1,1)=0 の場合
ct_flag=0
ct=LTrim(Mid(ct,2))
終了する場合
txtcolor=黒
ケース spnum(curid) を選択してください
ケース1
txtcolor=red 'レベル 1 サブメニューの色 a
ケース2
txtcolor=green '第 2 レベルのサブメニューの色
ケース3
txtcolor=blue '3 レベルのサブメニューの色、引き続き追加できます
エンドセレクト
Output_line ct_flag,curid,txtname,ct,cstr(txtcolor)
curid=txtstr.readline
ウェン
txtstr.close
%>
<HR></BODY></HTML>
このコードは、Win98/PWS (Personal Web Server) の下で渡されます。