WEST MiRa(1,739 Byte)
JavaScript(1,601 Byte)
[ JavaScriptの目次 ]
▲トップページ
▲基礎知識
▲基本操作
▲その他
▲サンプル集(257種類)
▲その他

[ 他の一覧 ]
◆↑ホームへ

 

■ JavaScript - サンプル集(257種類) - フレーム
　　 - ポップアップメニュー　フレーム版 Ver9（2つのフレーム内容を同時に変更）

フレームを3分割していて、ポップアップメニューの項目を選択された時に、 同時に2つのフレームの内容を変更できるスクリプトです。 フレーム専用です。

サンプルをクリックしますと、新しいウィンドゥが開いて動作を確認できます。

・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」or「リンクを名前を付けて保存」して下さい。）
・ソースを見る
・解説を見る




[ ソース ] 

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<script language="JavaScript" type="text/javascript">
<!--//Copyright (C) WEST MiRa http://www.west-mira.jp

	my_url=new Array();
	my_url2=new Array();

	//1つ目のフレームに表示するURLを指定する
	my_url[0]="../../index.html";
	my_url[1]="../../lib_form.html";
	my_url[2]="../../lib_link.html";

	//2つ目のフレームに表示するURLを指定する
	my_url2[0]="sample9_2.html#1";
	my_url2[1]="sample9_2.html#2";
	my_url2[2]="sample9_2.html#3";

	function jump3()
		{
		doko=document.form1.sele1.selectedIndex-1;


		parent.myframe2.location.href=my_url2[doko];
		parent.myframe3.location.href=my_url[doko];
		}

//-->
</script>

</head>

<body>

<form name="form1">
  <select name="sele1" onChange="jump3();">
  <option>
  <option>JavaScript
  <option>サンプル集（フォーム）
  <option>サンプル集（リンク）
  </select>
</form>

</body>
</html>

[ 解説 ]

まずどのフレームにHTMLを表示させるのか、名前を指定します。
上から21行目と22行目の「myframe2」と「myframe3」の部分に、実際に使用されるフレーム名をお書き下さい。
（サンプルでは、「myframe2」が上フレーム、「myframe3」が下フレームの名前です。）
　　例：parent.myframe2.location.href=my_url2[doko];
　　parent.myframe3.location.href=my_url[doko];

ソースの上から12行目〜19行目までが、フレームに表示したいURLの一覧になっています。

URLの一覧は、2行で一組です。

my_url[0]="../kiso_faq.html";
my_url2[0]="sample9_2.html#1";

各URLは、上の2行で1組となっています。
上の行が、上フレームに表示したいURLの一覧、
下の行が、下フレームに表示したいURLの一覧になっています。

お好きなように書き換えて下さい。

ソースの下から8行目〜6行目にポップアップメニューの項目が書いてあります。
1行で1つの項目を構成しています。
項目名はお好きなように書き換えてください。

もし項目を増やしたい場合は、必要なだけ同じように1行増やして下さい。
例）<option>Library(Link)←これをコピーして増やし、項目名を書き換える

次にURLの一覧も増やします。
URLの一覧は、先ほどのソースの部分を変更します。

2行で1組ですから、増やしたい数だけ2行ずつ増やしていきます。

その時URLを書き換えるだけでなく、数字の部分も書き換える事を忘れないでください。

「my_url[2]」の「2」の部分を、1つ繰り上げて「3」にします。

例えば1つURLを増やした場合は、以下のようになります。

例：
追加前追加後
my_url[0]="../kiso_faq.html";
my_url2[0]="sample9_2.html#1";

my_url[1]="../../index.html#JavaScript";
my_url2[1]="sample9_2.html#2";

my_url[2]="../lib_link.html";
my_url2[2]="sample9_2.html#3"; 		my_url[0]="../kiso_faq.html";
my_url2[0]="sample9_2.html#1";

my_url[1]="../../index.html#JavaScript";
my_url2[1]="sample9_2.html#2";

my_url[2]="../lib_link.html";
my_url2[2]="sample9_2.html#3";

my_url[3]="../../index.html#JavaScript";
my_url2[3]="sample9_2.html#4";

減らす場合は、同じように2行ずつ減らしてください。
またポップアップメニューの項目は、1行ずつ消していってください。

　 WEST MiRa > JavaScript > サンプル集(257種類) > フレーム > ポップアップメニュー　フレーム版 Ver9（2つのフレーム内容を同時に変更） >

バナー、リンクについて  ,   利用規約  ,   ヘルプ

Copyright (C) 1998-2007 WEST MiRa. All rights reserved.