SITEMAP [初めてのホームページ講座] [JavaScript , DHTML] [エクスプローラ風無限ツリー]

Dynamic HTMLの参考書 Java Scriptの参考書

エクスプローラ風無限ツリー

機能

WindowsのExplorer風のツリー形式での展開が可能なメニュー形式のスクリプトです。 世の中にある一般的なものと機能は殆ど変わらないのですが、無限大に展開が可能な構成をとっています。 (サンプルでは10段までに設定。確認もここまで)

当然クロスブラウズしていますので、IEでもNNでも対応可能です。 また、CSSによるスタイル指定によりきめ細かな設定が可能です。 その他、メニュー同士の隙間を任意に変更可能です。

類似サンプル

  1. エクスプローラ風2段ツリー

利用方法

HEAD部分にスタイルとスクリプトを記述します。 メニュー内のスタイルもここに記述します。

外部JavaScriptファイルを読み込みます。 サンプルでは、HTMLファイルと同一ディレクトリに「menudb.js」としておいてあります。 ファイル名やパスを変更する場合は、スクリプト内の「<script src="menudb.js"></script>」 の部分をHTMLファイルに対する相対パスで指定し直して下さい。 また、このファイルの中身については詳細をご覧下さい。

A要素にHREF属性でリンク先を「JavaScript:void(0)」にします。 この他にも、mouseovereのイベントハンドラを設定しますが、JavaScriptの関数「Mover(レイヤー名)」を指定します。 レイヤー名はDIV要素のID属性値を指定するものです。 この他、そのメニューに対して子メニューが存在する場合は画像を指定します。この画像に対しても、それぞれレイヤー名の指定が必要です。

当スクリプトは上記の外部JavaScriptファイルとBODY部分のDIV要素(レイヤー)との対比を確実にとる必要があります。 これを間違うと正常に作動しません。

画像ファイル
メニューを展開済み(−の画像)か未展開(+の画像)なのかを画像で示しています。 これらの画像ファイルのパスを指定します。また画像は2種類まで対応しており、各自で変更可能です。
外部JavaScriptファイル
サンプルではHTMLファイルと同一ディレクトリにあります。 このファイルにはメニューの情報が記述されており、省略不可です。 「<script src="menudb.js"></script>」で読み込んでいます。 中身の設定方法には色々と決まり事があります。参考の画像に詳細があります。

改造方法

メニューの数を自由に変更可能です。その際、外部スクリプトとHTMLのBODY部分を一部変更する必要があります。 また、スタイルは比較的簡単に設定可能です。(CSSの知識が必要) この他、メニューの項目の隙間や位置を変更することもできます。

メニューの指定方法などに若干の決めごとがあります。これらを守らないと正常に動作しませんのでご注意下さい。

最大ステップ数 (MaxStep)
メニューの最大の段数です。無限大と言いつつ、これで最大数を制限しています。 必要に応じて拡張して下さい。初期値は「10」となっているので、最大10段までのメニューが作れます。
メニューの作成
HTMLのBODY部分にDIV要素で作ります。画像が必要な場合はここにIMG要素も含みます。 また、このメニューにそれ以上展開する必要がない場合は、A要素もIMG要素も必要ありません。 下記に一例を示します。それぞれCLASS属性でスタイルも変えています。 メニューを増やす場合、必ず同じ名前のID属性は存在しないようにして下さい。 また、メニュー構成や数の変更は必ず外部JavaScriptファイルの対応をとって下さい。
外部JavaScriptファイル

当スクリプトで最も重要な部分です。 BODY要素に記述したメニューに対して対応するメニューの情報を記述する必要があります。 メニュー構成の決まり事に関しては参考の画像を見て直感的に理解して下さい(言葉の説明よりは簡単なハズ)。

ただし、1つだけ約束事があります。 メニューの設定の最後に、下記の文を記述して下さい。 これがなければ無限ループに陥り、メモリ浪費が発生します。 最悪の場合、システムが不安定になることもありますのでご注意下さい。

n++;
menu[(n-1)*LI+STEP] = "END";

このファイルの中には下記の4種類の情報を記述します。 これらが間違った場合、JavaScriptエラーが発生します。

ステップ番号(メニューの段の何番目か) menu[(n-1)*LI+STEP]
メニューの段数を指定。1段目ならば「1」2段目は「2」とする。
レイヤー名 DIV要素ID属性値 menu[(n-1)*LI+LAYER]
HTMLのBODY部に指定したID属性値をクォーテンション(')で括り指定する。
子レイヤーを持つか持たないか 持つ=1,持たない=0 menu[(n-1)*LI+CHLAY]
通常、下にメニューがあれば子レイヤーを持つことになる。 その場合は「1」を指定する。そうでない場合は最後のコンテンツ部分に該当し、「0」を指定する。
イメージレイヤー名 無い場合はnull menu[(n-1)*LI+IMLAY]
子レイヤーを持つ場合は指定するのが普通。 IMG要素のNAME属性値をクォーテンション(')で括り指定する。 存在しない場合はnull値とし、クォーテンション以外は何も記述しない。

上記、「メニューの作成」に該当する記述方法は、下記のようになります。

n++;
menu[(n-1)*LI+STEP] = 3;
menu[(n-1)*LI+LAYER] = "iL112";
menu[(n-1)*LI+CHLAY] = 1;
menu[(n-1)*LI+IMLAY] = "jL112";
n++;
menu[(n-1)*LI+STEP] = 4;
menu[(n-1)*LI+LAYER] = "iLc1121";
menu[(n-1)*LI+CHLAY] = 0;
menu[(n-1)*LI+IMLAY] = "";
表示位置
CSSリファレンスに従って、変更可。
Top
メニュー全体の上位置をピクセルで指定。
Left
メニュー全体の左座標をピクセルで指定。
Wid
メニューの幅をピクセルで指定。
Hei
メニューの高さをピクセルで指定。
dLeft
親メニューと子メニューの横座標のずれ量をピクセルで指定。
Space
メニュー縦間隔をピクセルで指定。
画像
プラス、マイナスの画像ファイルを指定します。 HTMLファイルに対する相対パス、または絶対パスで指定します。 プラスマークは非展開時、マイナスマークは展開時で、それぞれ以下のように設定しています。
プラス
plus.src = "image/plus.gif";
マイナス
minus.src = "image/minus.gif";

対応ブラウザ

IE4,IE5,NN4,N6

サンプル

サンプルを見る] [ダウンロード

[Go To Top]

ソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>エクスプローラ風無限ツリー</title>

<style type="text/css">
<!--
.Style1{		/*for Main,SubMenu*/
	position:			absolute;
	font-weight:		bold;
	visibility:			hidden;
}
.Style2{		/*for Contents*/
	position:			absolute;
	font-size:			12pt;
	font-weight:		bold;
	color:				#c00;
	visibility:			hidden;
}
.title{
	font-size:			16pt;
	font-weight:		bold;
	color:				#00c;
	background-color:	#ccf;
	margin:				0px;
	padding:			5px;
	border:				2px solid #33f;
}
/*Style of Anchor*/
A{
	text-decoration:	none;
}
A:Link{
	color:				#0000ff;
}
A:Visited{
	color:				#6666ff;
}
A:Active{
	color:				#0000ff;
}
A:Hover{
	color:				#ff0000;
	text-decoration:	underline;
	background-color:	#fdd;
}
-->
</style>


<script language="JavaScript" type="text/javascript">
<!--
//ここから設定
var Top = 100;				//メニュー上位置
var Left = 50;				//メニュー左位置
var dLeft = 25;				//メニューの段ごとの横ずれ量
var Wid = 300;				//メニュー幅
var Hei = 20;				//メニュー高さ
var Space = 10;				//メニュー縦間隔
var MaxStep = 10;			//最大ステップ数

var plus = new Image(0,0);
	plus.src = "image/plus.gif";	//+の画像
var minus = new Image(0,0);
	minus.src = "image/minus.gif";	//-の画像
//ここまで設定

var LI = 10;
var STEP = 0;
var LAYER = 1;
var CHLAY = 2;
var IMLAY = 3;
var TOP = 4;
var LEFT = 5;
var WIDTH = 6;
var HEIGHT = 7;
var VISI = 8;
var IMG = 9;
var menu = new Array();
	//menu[(n-1)*LI+STEP]  :n番目メニューのステップ番号(メニューの段の何番目か)
	//menu[(n-1)*LI+LAYER] :n番目メニューのレイヤー名 DIV要素ID属性値に合わせること
	//menu[(n-1)*LI+CHLAY] :n番目メニューが子レイヤーを持つか持たないか 持つ=1,持たない=0
	//menu[(n-1)*LI+IMLAY] :n番目メニューのイメージレイヤー名 無い場合はnull
	//menu[(n-1)*LI+TOP]   :n番目メニューの上位置  自動設定
	//menu[(n-1)*LI+LEFT]  :n番目メニューの左位置  自動設定
	//menu[(n-1)*LI+WIDTH] :n番目メニューの幅    自動設定
	//menu[(n-1)*LI+HEIGHT]:n番目メニューの高さ   自動設定
	//menu[(n-1)*LI+VISI]  :n番目メニューの表示状態 自動設定
	//menu[(n-1)*LI+IMG]   :n番目メニューの画像種類 自動設定
// -->
</script>

<script src="menudb.js"></script>

<script language="JavaScript" type="text/javascript">
<!--
var Lflag1 = false;
var Lflag2 = false;
var Ln;

var MaxLayM;
var X = new Array();
var Y = new Array();

if(document.getElementById){
	document.onmousedown = Mclick;
}else if(document.all){
	document.onmousedown = Mclick;
}else if(document.layers){
	window.captureEvents(Event.MOUSEDOWN);
	window.onmousedown = Mclick;
}

function Mover(m,n){
	if(Lflag1){
		Ln = m;
		Lflag2 = true;
	}
}
function Mout(){
	if(Lflag1){
		Lflag2 = false;
	}
}
function Mclick(){
	if(Lflag2){
		Correct(Ln);
	}
}

function Init(){
	MaxLayM = SetCord();
	if(MaxLayM > 1){
		LayerSet();
		Lflag1 = true;
	}
}

//メニュー段ごとの座標セット
function SetXY(){
	for(var i = 1;i <= MaxStep;i++){
		X[i] = Left + (i - 1) * dLeft;
	}
}

//初期座標のセット
function SetCord(){
	var i = 1;
	SetXY();
	while(menu[(i - 1) * LI + STEP] != 'END'){
		menu[(i - 1) * LI + TOP] = Top;
		menu[(i - 1) * LI + LEFT] = X[menu[(i - 1) * LI + STEP]];
		menu[(i - 1) * LI + WIDTH] = Wid;
		menu[(i - 1) * LI + HEIGHT] = Hei;
		if(menu[(i - 1) * LI + STEP] == 1){
			menu[(i - 1) * LI + VISI] = 1;
			menu[(i - 1) * LI + IMG] = 0;
		}else{
			menu[(i - 1) * LI + VISI] = 0;
			menu[(i - 1) * LI + IMG] = 0;
		}
		i++;
	}
	return(i-1);
}

//レイヤーの座標セット
function LayerSet(){
	SetLayerCord();
    if(document.getElementById){
		for(i = 1;i <= MaxLayM;i++){
			document.getElementById(menu[(i-1)*LI+LAYER]).style.top = menu[(i - 1) * LI + TOP];

			document.getElementById(menu[(i-1)*LI+LAYER]).style.left = menu[(i - 1) * LI + LEFT];
			document.getElementById(menu[(i-1)*LI+LAYER]).style.height = menu[(i - 1) * LI + HEIGHT];
			document.getElementById(menu[(i-1)*LI+LAYER]).style.width = menu[(i - 1) * LI + WIDTH];
			if(menu[(i - 1) * LI + VISI]){
				document.getElementById(menu[(i-1)*LI+LAYER]).style.visibility = "visible";
			}else{
				document.getElementById(menu[(i-1)*LI+LAYER]).style.visibility = "hidden";
			}
			if(menu[(i-1)*LI+IMLAY] != ''){
				if(menu[(i - 1) * LI + IMG]){
					document.images[menu[(i-1)*LI+IMLAY]].src = minus.src;
				}else{
					document.images[menu[(i-1)*LI+IMLAY]].src = plus.src;
				}
			}
		}
	}else if(document.all){
		for(i = 1;i <= MaxLayM;i++){
			document.all(menu[(i-1)*LI+LAYER]).style.pixelTop = menu[(i - 1) * LI + TOP];

			document.all(menu[(i-1)*LI+LAYER]).style.pixelLeft = menu[(i - 1) * LI + LEFT];
			document.all(menu[(i-1)*LI+LAYER]).style.height = menu[(i - 1) * LI + HEIGHT];
			document.all(menu[(i-1)*LI+LAYER]).style.width = menu[(i - 1) * LI + WIDTH];
			if(menu[(i - 1) * LI + VISI]){
				document.all(menu[(i-1)*LI+LAYER]).style.visibility = "visible";
			}else{
				document.all(menu[(i-1)*LI+LAYER]).style.visibility = "hidden";
			}
			if(menu[(i-1)*LI+IMLAY] != ''){
				if(menu[(i - 1) * LI + IMG]){
					document.images[menu[(i-1)*LI+IMLAY]].src = minus.src;
				}else{
					document.images[menu[(i-1)*LI+IMLAY]].src = plus.src;
				}
			}
		}
	}else if(document.layers){
		for(i = 1;i <= MaxLayM;i++){
			document.layers[menu[(i-1)*LI+LAYER]].top = menu[(i - 1) * LI + TOP];
			document.layers[menu[(i-1)*LI+LAYER]].left = menu[(i - 1) * LI + LEFT];
			document.layers[menu[(i-1)*LI+LAYER]].height = menu[(i - 1) * LI + HEIGHT];
			document.layers[menu[(i-1)*LI+LAYER]].width = menu[(i - 1) * LI + WIDTH];
			if(menu[(i - 1) * LI + VISI]){
				document.layers[menu[(i-1)*LI+LAYER]].visibility = "show";
			}else{
				document.layers[menu[(i-1)*LI+LAYER]].visibility = "hide";
			}
			if(menu[(i-1)*LI+IMLAY] != ''){
				if(menu[(i - 1) * LI + IMG]){
					document.layers[menu[(i-1)*LI+LAYER]].document.images[menu[(i-1)*LI+IMLAY]].src = minus.src;
				}else{
					document.layers[menu[(i-1)*LI+LAYER]].document.images[menu[(i-1)*LI+IMLAY]].src = plus.src;
				}
			}
		}
	}
}

//レイヤー縦位置の再演算
function SetLayerCord(){
	H0 = menu[HEIGHT];
	Y0 = menu[TOP] - menu[HEIGHT] - Space;
	for(var i = 1;i <= MaxLayM;i++){
		if(menu[(i - 1) * LI + VISI]){
			Y1 = Y0 + H0 + Space;
			menu[(i - 1) * LI + TOP] = Y1;
			Y0 = Y1;
			H0 = menu[(i - 1) * LI + HEIGHT];
		}
	}
}

//Visibility処理
function Correct(LayName){
	var i = 1;
	var j = 0;
	var LayNum = 1;
	var f_L = false;

	//該当レイヤー番号の抽出
	for(var i = 1;i <= MaxLayM;i++){
		if(menu[(i - 1) * LI + LAYER] != LayName){
			LayNum++;
		}else{
			break;
		}
	}

	j = LayNum + 1;											//次のレイヤーセット
	Lstep = menu[(LayNum - 1) * LI + STEP];				//該当レイヤーのステップ数格納

	if((LayNum >= 1)&&(LayNum <= MaxLayM)){
		//hidden,visible判定
		while((Lstep < menu[(j - 1) * LI + STEP])&&(j <= MaxLayM)){
			if(menu[(j - 1) * LI + VISI]){			//visibleの場合
				f_L = true;
			}
			j++;
		}

		j = LayNum + 1;										//次のレイヤーセット
		if(f_L){											//visible -> hideen
			menu[(LayNum - 1) * LI + IMG] = 0;				//画像切替
			while(Lstep < menu[(j - 1) * LI + STEP]){		//ステップ数が増え続けるまで続ける
				menu[(j - 1) * LI + VISI] = 0;
				menu[(j - 1) * LI + IMG] = 0;
				j++;
			}
		}else{												//hidden->visible
			menu[(LayNum - 1) * LI + IMG] = 1;				//画像切替
			while(Lstep < menu[(j - 1) * LI + STEP]){		//ステップ数が増え続けるまで続ける
				if((Lstep + 1) == menu[(j - 1) * LI + STEP]){		//1段下のステップの場合
					menu[(j - 1) * LI + VISI] = 1;
				}
				j++;
			}
		}
	}
	LayerSet();
}

// -->
</script>

</head>

<body onload="Init()">

<div class="title">エクスプローラ風無限ツリー</div>

<!-- 1 -->
<div class="Style1" id="iL1">
	<a href="javascript:void(0);" onmouseover="Mover('iL1')" onmouseout="Mout()">
		<img name="jL1" src="image/plus.gif" border=0> List1
	</a>
</div>

<div class="Style1" id="iL11">
	<a href="JavaScript:void(0);" onmouseover="Mover('iL11')" onmouseout="Mout()">
		<img name="jL11" src="image/plus.gif" border=0> List1-1
	</a>
</div>

<div class="Style1" id="iL111">
	<a href="JavaScript:void(0);" onmouseover="Mover('iL111')" onmouseout="Mout()">
		<img name="jL111" src="image/plus.gif" border=0> List1-1-1
	</a>
</div>

<div class="Style1" id="iL1111">
	<a href="JavaScript:void(0);" onmouseover="Mover('iL1111')" onmouseout="Mout()">
		<img name="jL1111" src="image/plus.gif" border=0> List1-1-1-1
	</a>
</div>

<div class="Style2" id="iLc11111">CONTENTS1111-1</div>
<div class="Style2" id="iLc11112">CONTENTS1111-2</div>
<div class="Style2" id="iLc11113">CONTENTS1111-3</div>

<div class="Style1" id="iL1112">
	<a href="JavaScript:void(0);" onmouseover="Mover('iL1112')" onmouseout="Mout()">
		<img name="jL1112" src="image/plus.gif" border=0> List1-1-1-2
	</a>
</div>

<div class="Style2" id="iLc11121">CONTENTS1112-1</div>
<div class="Style2" id="iLc11122">CONTENTS1112-2</div>
<div class="Style2" id="iLc11123">CONTENTS1112-3</div>

<div class="Style1" id="iL1113">
	<a href="JavaScript:void(0);" onmouseover="Mover('iL1113')" onmouseout="Mout()">
		<img name="jL1113" src="image/plus.gif" border=0> List1-1-1-3
	</a>
</div>

<div class="Style2" id="iLc11131">CONTENTS1113-1</div>
<div class="Style2" id="iLc11132">CONTENTS1113-2</div>

<div class="Style1" id="iL112">
	<a href="JavaScript:void(0);" onmouseover="Mover('iL112')" onmouseout="Mout()">
		<img name="jL112" src="image/plus.gif" border=0> List1-1-2
	</a>
</div>

<div class="Style2" id="iLc1121">CONTENTS112-1</div>
<div class="Style2" id="iLc1122">CONTENTS112-2</div>
<div class="Style2" id="iLc1123">CONTENTS112-3</div>
<div class="Style2" id="iLc1124">CONTENTS112-4</div>

<div class="Style1" id="iL12">
	<a href="JavaScript:void(0);" onmouseover="Mover('iL12')" onmouseout="Mout()">
		<img name="jL12" src="image/plus.gif" border=0> List1-2
	</a>
</div>

<div class="Style2" id="iLc12">CONTENTS12</div>

<div class="Style1" id="iL13">
	<a href="JavaScript:void(0);" onmouseover="Mover('iL13')" onmouseout="Mout()">
		<img name="jL13" src="image/plus.gif" border=0> List1-3
	</a>
</div>

<div class="Style2" id="iLc13">CONTENTS13</div>


<!-- 2 -->
<div class="Style1" id="iL2">
	<a href="JavaScript:void(0);" onmouseover="Mover('iL2')" onmouseout="Mout()">
		<img name="jL2" src="image/plus.gif" border=0> List2
	</a>
</div>

<div class="Style1" id="iL21">
	<a href="JavaScript:void(0);" onmouseover="Mover('iL21')" onmouseout="Mout()">
		<img name="jL21" src="image/plus.gif" border=0> List2-1
	</a>
</div>

<div class="Style2" id="iLc21">CONTENTS21</div>

<div class="Style1" id="iL22">
	<a href="JavaScript:void(0);" onmouseover="Mover('iL22')" onmouseout="Mout()">
		<img name="jL22" src="image/plus.gif" border=0> List2-2
	</a>
</div>

<div class="Style2" id="iLc22">CONTENTS22</div>


<!-- 3 -->
<div class="Style1" id="iL3">
	<a href="JavaScript:void(0);" onmouseover="Mover('iL3')" onmouseout="Mout()">	
		<img name="jL3" src="image/plus.gif" border=0> List3
	</a>
</div>

<div class="Style1" id="iL31">
	<a href="JavaScript:void(0);" onmouseover="Mover('iL31')" onmouseout="Mout()">
		<img name="jL31" src="image/plus.gif" border=0> List3-1
	</a>
</div>

<div class="Style1" id="iL311">
	<a href="JavaScript:void(0);" onmouseover="Mover('iL311')" onmouseout="Mout()">
		<img name="jL311" src="image/plus.gif" border=0> List3-1-1
	</a>
</div>

<div class="Style1" id="iL3111">
	<a href="JavaScript:void(0);" onmouseover="Mover('iL3111')" onmouseout="Mout()">
		<img name="jL3111" src="image/plus.gif" border=0> List3-1-1-1
	</a>
</div>

<div class="Style1" id="iL31111">
	<a href="JavaScript:void(0);" onmouseover="Mover('iL31111')" onmouseout="Mout()">
		<img name="jL31111" src="image/plus.gif" border=0> List3-1-1-1-1
	</a>
</div>

<div class="Style1" id="iL311111">
	<a href="JavaScript:void(0);" onmouseover="Mover('iL311111')" onmouseout="Mout()">
		<img name="jL311111" src="image/plus.gif" border=0> List3-1-1-1-1-1
	</a>
</div>

<div class="Style1" id="iL3111111">
	<a href="JavaScript:void(0);" onmouseover="Mover('iL3111111')" onmouseout="Mout()">
		<img name="jL3111111" src="image/plus.gif" border=0> List3-1-1-1-1-1-1
	</a>
</div>

<div class="Style1" id="iL31111111">
	<a href="JavaScript:void(0);" onmouseover="Mover('iL31111111')" onmouseout="Mout()">
		<img name="jL31111111" src="image/plus.gif" border=0> List3-1-1-1-1-1-1-1
	</a>
</div>

<div class="Style1" id="iL311111111">
	<a href="JavaScript:void(0);" onmouseover="Mover('iL311111111')" onmouseout="Mout()">
		<img name="jL311111111" src="image/plus.gif" border=0> List3-1-1-1-1-1-1-1-1
	</a>
</div>

<div class="Style2" id="iLc3111111111">CONTENTS3-1-1-1-1-1-1-1-1-1-1</div>

</body>
</html>

外部JavaScriptファイル

//menu[(n-1)*LI+STEP]  :n番目メニューのステップ番号(メニューの段の何番目か)
//menu[(n-1)*LI+LAYER] :n番目メニューのレイヤー名 DIV要素ID属性値に合わせること
//menu[(n-1)*LI+CHLAY] :n番目メニューが子レイヤーを持つか持たないか 持つ=1,持たない=0
//menu[(n-1)*LI+IMLAY] :n番目メニューのイメージレイヤー名 無い場合はnull

var n = 0;

n++;
menu[(n-1)*LI+STEP] = 1;
menu[(n-1)*LI+LAYER] = "iL1";
menu[(n-1)*LI+CHLAY] = 1;
menu[(n-1)*LI+IMLAY] = "jL1";

n++;
menu[(n-1)*LI+STEP] = 2;
menu[(n-1)*LI+LAYER] = "iL11";
menu[(n-1)*LI+CHLAY] = 1;
menu[(n-1)*LI+IMLAY] = "jL11";

n++;
menu[(n-1)*LI+STEP] = 3;
menu[(n-1)*LI+LAYER] = "iL111";
menu[(n-1)*LI+CHLAY] = 1;
menu[(n-1)*LI+IMLAY] = "jL111";

n++;
menu[(n-1)*LI+STEP] = 4;
menu[(n-1)*LI+LAYER] = "iL1111";
menu[(n-1)*LI+CHLAY] = 1;
menu[(n-1)*LI+IMLAY] = "jL1111";

n++;
menu[(n-1)*LI+STEP] = 5;
menu[(n-1)*LI+LAYER] = "iLc11111";
menu[(n-1)*LI+CHLAY] = 0;
menu[(n-1)*LI+IMLAY] = "";

n++;
menu[(n-1)*LI+STEP] = 5;
menu[(n-1)*LI+LAYER] = "iLc11112";
menu[(n-1)*LI+CHLAY] = 0;
menu[(n-1)*LI+IMLAY] = "";

n++;
menu[(n-1)*LI+STEP] = 5;
menu[(n-1)*LI+LAYER] = "iLc11113";
menu[(n-1)*LI+CHLAY] = 0;
menu[(n-1)*LI+IMLAY] = "";

n++;
menu[(n-1)*LI+STEP] = 4;
menu[(n-1)*LI+LAYER] = "iL1112";
menu[(n-1)*LI+CHLAY] = 1;
menu[(n-1)*LI+IMLAY] = "jL1112";

n++;
menu[(n-1)*LI+STEP] = 5;
menu[(n-1)*LI+LAYER] = "iLc11121";
menu[(n-1)*LI+CHLAY] = 0;
menu[(n-1)*LI+IMLAY] = "";

n++;
menu[(n-1)*LI+STEP] = 5;
menu[(n-1)*LI+LAYER] = "iLc11122";
menu[(n-1)*LI+CHLAY] = 0;
menu[(n-1)*LI+IMLAY] = "";

n++;
menu[(n-1)*LI+STEP] = 5;
menu[(n-1)*LI+LAYER] = "iLc11123";
menu[(n-1)*LI+CHLAY] = 0;
menu[(n-1)*LI+IMLAY] = "";

n++;
menu[(n-1)*LI+STEP] = 4;
menu[(n-1)*LI+LAYER] = "iL1113";
menu[(n-1)*LI+CHLAY] = 1;
menu[(n-1)*LI+IMLAY] = "jL1113";

n++;
menu[(n-1)*LI+STEP] = 5;
menu[(n-1)*LI+LAYER] = "iLc11131";
menu[(n-1)*LI+CHLAY] = 0;
menu[(n-1)*LI+IMLAY] = "";

n++;
menu[(n-1)*LI+STEP] = 5;
menu[(n-1)*LI+LAYER] = "iLc11132";
menu[(n-1)*LI+CHLAY] = 0;
menu[(n-1)*LI+IMLAY] = "";

n++;
menu[(n-1)*LI+STEP] = 3;
menu[(n-1)*LI+LAYER] = "iL112";
menu[(n-1)*LI+CHLAY] = 1;
menu[(n-1)*LI+IMLAY] = "jL112";

n++;
menu[(n-1)*LI+STEP] = 4;
menu[(n-1)*LI+LAYER] = "iLc1121";
menu[(n-1)*LI+CHLAY] = 0;
menu[(n-1)*LI+IMLAY] = "";

n++;
menu[(n-1)*LI+STEP] = 4;
menu[(n-1)*LI+LAYER] = "iLc1122";
menu[(n-1)*LI+CHLAY] = 0;
menu[(n-1)*LI+IMLAY] = "";

n++;
menu[(n-1)*LI+STEP] = 4;
menu[(n-1)*LI+LAYER] = "iLc1123";
menu[(n-1)*LI+CHLAY] = 0;
menu[(n-1)*LI+IMLAY] = "";

n++;
menu[(n-1)*LI+STEP] = 4;
menu[(n-1)*LI+LAYER] = "iLc1124";
menu[(n-1)*LI+CHLAY] = 0;
menu[(n-1)*LI+IMLAY] = "";

n++;
menu[(n-1)*LI+STEP] = 2;
menu[(n-1)*LI+LAYER] = "iL12";
menu[(n-1)*LI+CHLAY] = 1;
menu[(n-1)*LI+IMLAY] = "jL12";

n++;
menu[(n-1)*LI+STEP] = 3;
menu[(n-1)*LI+LAYER] = "iLc12";
menu[(n-1)*LI+CHLAY] = 0;
menu[(n-1)*LI+IMLAY] = "";

n++;
menu[(n-1)*LI+STEP] = 2;
menu[(n-1)*LI+LAYER] = "iL13";
menu[(n-1)*LI+CHLAY] = 1;
menu[(n-1)*LI+IMLAY] = "jL13";

n++;
menu[(n-1)*LI+STEP] = 3;
menu[(n-1)*LI+LAYER] = "iLc13";
menu[(n-1)*LI+CHLAY] = 0;
menu[(n-1)*LI+IMLAY] = "";

n++;
menu[(n-1)*LI+STEP] = 1;
menu[(n-1)*LI+LAYER] = "iL2";
menu[(n-1)*LI+CHLAY] = 1;
menu[(n-1)*LI+IMLAY] = "jL2";

n++;
menu[(n-1)*LI+STEP] = 2;
menu[(n-1)*LI+LAYER] = "iL21";
menu[(n-1)*LI+CHLAY] = 1;
menu[(n-1)*LI+IMLAY] = "jL21";

n++;
menu[(n-1)*LI+STEP] = 3;
menu[(n-1)*LI+LAYER] = "iLc21";
menu[(n-1)*LI+CHLAY] = 0;
menu[(n-1)*LI+IMLAY] = "";

n++;
menu[(n-1)*LI+STEP] = 2;
menu[(n-1)*LI+LAYER] = "iL22";
menu[(n-1)*LI+CHLAY] = 1;
menu[(n-1)*LI+IMLAY] = "jL22";

n++;
menu[(n-1)*LI+STEP] = 3;
menu[(n-1)*LI+LAYER] = "iLc22";
menu[(n-1)*LI+CHLAY] = 0;
menu[(n-1)*LI+IMLAY] = "";

n++;
menu[(n-1)*LI+STEP] = 1;
menu[(n-1)*LI+LAYER] = "iL3";
menu[(n-1)*LI+CHLAY] = 1;
menu[(n-1)*LI+IMLAY] = "jL3";

n++;
menu[(n-1)*LI+STEP] = 2;
menu[(n-1)*LI+LAYER] = "iL31";
menu[(n-1)*LI+CHLAY] = 1;
menu[(n-1)*LI+IMLAY] = "jL31";

n++;
menu[(n-1)*LI+STEP] = 3;
menu[(n-1)*LI+LAYER] = "iL311";
menu[(n-1)*LI+CHLAY] = 1;
menu[(n-1)*LI+IMLAY] = "jL311";

n++;
menu[(n-1)*LI+STEP] = 4;
menu[(n-1)*LI+LAYER] = "iL3111";
menu[(n-1)*LI+CHLAY] = 1;
menu[(n-1)*LI+IMLAY] = "jL3111";

n++;
menu[(n-1)*LI+STEP] = 5;
menu[(n-1)*LI+LAYER] = "iL31111";
menu[(n-1)*LI+CHLAY] = 1;
menu[(n-1)*LI+IMLAY] = "jL31111";

n++;
menu[(n-1)*LI+STEP] = 6;
menu[(n-1)*LI+LAYER] = "iL311111";
menu[(n-1)*LI+CHLAY] = 1;
menu[(n-1)*LI+IMLAY] = "jL311111";

n++;
menu[(n-1)*LI+STEP] = 7;
menu[(n-1)*LI+LAYER] = "iL3111111";
menu[(n-1)*LI+CHLAY] = 1;
menu[(n-1)*LI+IMLAY] = "jL3111111";

n++;
menu[(n-1)*LI+STEP] = 8;
menu[(n-1)*LI+LAYER] = "iL31111111";
menu[(n-1)*LI+CHLAY] = 1;
menu[(n-1)*LI+IMLAY] = "jL31111111";

n++;
menu[(n-1)*LI+STEP] = 9;
menu[(n-1)*LI+LAYER] = "iL311111111";
menu[(n-1)*LI+CHLAY] = 1;
menu[(n-1)*LI+IMLAY] = "jL311111111";

n++;
menu[(n-1)*LI+STEP] = 10;
menu[(n-1)*LI+LAYER] = "iLc3111111111";
menu[(n-1)*LI+CHLAY] = 0;
menu[(n-1)*LI+IMLAY] = "";

n++;
menu[(n-1)*LI+STEP] = "END";

修正履歴

2000.10.04
ページ読込時のゴミ表示対応のため、visibility:hiddenを追加
2001.9.02
N6対応。
[Go To Top]

Last modified Sep,2001
Copyright(C)2000 T.Miyazaki , All Rights Reserved.