ページに関するTips


・フォルダ型階層メニュー

NN2Unknown NN3OK NN4OK MozillaOK IE3OK IE4OK

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 はリンク項目の表示先フレーム名を指定します。


使用例

  1. このメニューのサンプルはこちらです。

  2. 3階層まで可能にしたバージョンはこちらです。
    #> 3階層版の方がわかりやすくできているかも... f(^^;


  3. 3階層メニューを Cookie を使用してフレーム構成以外でも使用できるようにしたバージョンはこちらです。

  4. フレーム版3階層メニューに更に、多階層( 階層制限なし )を可能にしたバージョンはこちらです。
    #> 但し、階層制限をなくすのに JavaScript1.1 の機能を使用したので、 IE3 では動作しません。 f(^^;

注意事項

caution
このコードは JavaScript でしか動きません(当たり前ですが)。 JavaScript をサポートしていないブラウザでもそれなりに見えるようにするには、 インデックス部で全て展開した様なドキュメントを用意してやる必要があります。 Frame をサポートしていないブラウザの分も考慮すると、 この種の中心になるドキュメントを全て JavaScript で書くのは メンテナンスの面でもあまり得策とは言えないでしょう。 使用は、その状況や条件に応じて選択すべきでしょう。

Copyright(c) 1998 - 2001 ShinSoft. All rights reserved.