Frame を利用したインデックス付きメニューはかなり頻繁に使用される形態です。
然し、メニューを構成する要素があまりに多くなると、その操作性が問題になります。
そこで、これらのメニューを分類毎にまとめ、
エクスプローラのフォルダメニューのように表示・操作できれば、
操作性もかなり向上します。
以下にそのコード(例)を示します。
Frame の親( MenuTop.htm )
<script language="JavaScript"><!-- numMenus = 10; // 最大10分類とします flags = new Flags(numMenus); // 表示状態のフラグ群 // 表示状態領域(配列)の生成関数 function Flags(n){ for(var i=0;i<n;i++) this[i]=0; return this; } // 状態取得関数 function getFlagState (n){ return flags[n]; } // 状態変更関数 function changeFlagState(n){ flags[n]=(flags[n]==0?1:0); } // --></script> </head> <script language="JavaScript"><!-- document.write( '<frameset cols="30%,*">' + '<frame src="Index.htm" name="index">' + '<frame src="Title.htm" name="tips" >' +'<\/frameset>' ); // --></script>
メニュー( Contents.htm )
<script language="JavaScript"><!-- av = parseInt(navigator.appVersion); // バージョン mac = (navigator.userAgent.indexOf('Mac')!=-1); // Mac識別 nn = (navigator.appName=='Netscape'); // nn 識別 useReload = (av>3)||(nn && av>2); // Image は Mac版IE4.5, NN6 ではバギーなので対象外とする useImage = nn?(av>2 && av<5):(mac?(av>4):(av>3)); // 使用画像の定義 l1imgname = 'redball.gif'; // トップ項目 opimgname = 'OPEN.gif'; // 開いているフォルダ climgname = 'CLOSED.gif'; // 閉じているフォルダ l2imgname = 'doc.gif'; // サブ項目 target = 'tips'; // リンクを開くターゲット名 // 画像ハンドリング関数 function topImage(){ // トップ項目用画像 return '<img src="'+l1imgname+'" border=0>'; } function opnImage(){ // フォルダ(開)用画像 return '<img src="'+opimgname+'" border=0>'; } function clsImage(){ // フォルダ(閉)用画像 return '<img src="'+climgname+'" border=0>'; } function itmImage(){ // サブ項目用画像 return '<img src="'+l2imgname+'" border=0>'; } function spcImage(){ return ' '; } // インデント用画像 // リンク用文字列生成関数 function linkStr(imgstr,url,tgt,str){ return '<a href="'+url+'" ' +'target="'+tgt+'">'+imgstr+str+'<\/a>'; } // フォルダ用文字列生成関数 function folderStr(imgstr,level,str){ return '<a href="javascript:void(0);" ' +'onClick="changeMenu('+level+');return false;">' + imgstr+str+'<\/a>'; } // フォルダ状態変更関数 function changeMenu(l,s){ parent.changeFlagState(l); if(useReload) location.reload(); else history.go(0); } // メニュー用文字列生成関数 function Menu(level,url,str){ var menuStr=''; if(level==-1) menuStr=linkStr(topImage(),url,target,str)+'<br>'; else if(url==null) menuStr=folderStr( parent.getFlagState(level)? opnImage():clsImage(),level,str )+'<br>'; else if(parent.getFlagState(level)>0) menuStr=spcImage() +linkStr(itmImage(),url,target,str)+'<br>'; return menuStr+'\n'; } // --></script> <script language="JavaScript1.1"><!-- // パフォーマンス対策用関数 l1img = preLoadImage(l1imgname, 8, 8); // トップ項目 l1oimg= preLoadImage(opimgname,13,13); // フォルダ(開) l1cimg= preLoadImage(climgname,13,13); // フォルダ(閉) l2img = preLoadImage(l2imgname,15,16); // サブ項目 // Image オブジェクトダミー function DummyImage(w,h){ this.src=''; this.width=w; this.height=h; return this; } // 画像事前ロード関数 function preLoadImage(img,w,h){ var obj = useImage?(new Image(w,h)):(new DummyImage(w,h)); obj.src = img; return obj; } // 画像ハンドリング関数 function topImage(){ // トップ項目用画像 return '<img src="'+l1img.src +'" border=0 ' +width='+l1img.width +' height='+l1img.height +'>'; } function opnImage(){ // フォルダ(開)用画像 return '<img src="'+l1oimg.src+'" border=0 ' +width='+l1oimg.width+' height='+l1oimg.height+'>'; } function clsImage(){ // フォルダ(閉)用画像 return '<img src="'+l1cimg.src+'" border=0 ' +width='+l1cimg.width+' height='+l1cimg.height+'>'; } function itmImage(){ // サブ項目用画像 return '<img src="'+l2img.src +'" border=0 ' +width='+l2img.width +' height='+l2img.height +'>'; } // --></script>
この文字の部分は必要に応じて修正します。
numMenu はトップ階層の最大フォルダ数です。
このスクリプトでは 10個としていますが足りなければ増やします。
l1imgname, opimgname, climgname, l2imgname は
フォルダやリンク項目に付けるアイコン画像の定義で必要に応じて修正します。
また、 l1mg, l1oimg, l1cimg, l2imgでは
定義したアイコン画像のサイズ(縦・横)を一緒に修正します。
target はリンク項目の表示先フレーム名を指定します。
使用例
注意事項