WEST MiRa(1,739 Byte)
JavaScript(1,601 Byte)

■ JavaScript - サンプル集(257種類) - フレーム
   - ポップアップメニュー  フレーム版 Ver2(フレーム内・フレーム解除)

ポップアップメニューから項目を選ぶと、ジャンプするスクリプトです。
これは選んだ項目によってフレーム内でジャンプしたり、 フレームを解除して表示したりします。
下のサンプルをクリックしますと、新しいウィンドゥが開いて動作を確認できます。 サンプルではフレーム解除でジャンプ、フレーム内でジャンプと、交互に並べています。

サンプルを見る
ソースを保存する
(右クリック→「対象をファイルに保存」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

	function jump2(my_url)
		{
		my_url=document.form1.sele1.selectedIndex;
		my_url=document.form1.sele1.options[my_url].value;

		if(my_url.charAt(0) == 1)
			parent.myframe2.location.href=my_url.substring(2,my_url.length);
		else if(my_url.charAt(0) == 0)
			parent.window.location=my_url.substring(2,my_url.length);
		}

//-->
</script>

</head>

<body>

<form name="form1">
  <select name="sele1" onChange="jump2();">
  <option>
  <option value="0,../../index.html">JavaScript
  <option value="1,../../lib_form.html">サンプル集(フォーム)
  <option value="0,../../index.html">JavaScript
  <option value="1,../../lib_form.html">サンプル集(フォーム)
  <option value="0,../../index.html">JavaScript
  <option value="1,../../lib_form.html">サンプル集(フォーム)
  </select>
</form>

</body></html>


[ 解説 ]

まずフレーム内部で表示させる場合、どのフレームにHTMLを表示させるのか、 名前を指定します。
上から11行目の「myframe2」の部分に、実際に使用されるフレーム名をお書き下さい。
  例:parent.myframe2.location.href=my_url.substring(2,my_url.length);

続いて実際に使用するURLと項目名を指定していきます。
下から11行目〜6行目の部分に、URLと項目名を記入します。
一つのURLは、1行で構成されています。
  例:<option value="0,../kiso_faq.html">JavaScript FAQ

まずフレームを解除して表示させたいHTMLの場合は、URLを実際に書いてある前の部分に「0」を記入します。
  例:<option value="0,../kiso_faq.html">JavaScript FAQ

フレーム内部で表示させたいHTMLならば、URLを実際に書いてある前の部分に「1」を記入します。
  例:<option value="1,../kiso_faq.html">JavaScript FAQ

この時、必ず数字は半角数字で書いて下さい。

続いて、「,」の後ろに続けてお好きなURLを記入して下さい。
  例:<option value="0,../kiso_faq.html">JavaScript FAQ

項目名もお好きに変更して下さい。
  例:<option value="0,../kiso_faq.html">JavaScript FAQ

もし項目をもっと増やしたい場合は、下から6行目の後ろに、新たに
<option value="0,../kiso_faq.html">JavaScript FAQ
を追加して、同じように詳細を変更してあげて下さい。

例:
追加前追加後
<form name="form1">
<select name="sele1" onChange="jump2();">
<option>
<option value="0,../kiso_faq.html">JavaScript FAQ
<option value="1,../kiso_faq.html">JavaScript FAQ
<option value="0,../../index.html#JavaScript">JavaScript
<option value="1,../etc_link.html">Link
<option value="0,../lib_link.html">Library(Link)
<option value="1,../../index.html#JavaScript">JavaScript
</select>
</form>
<form name="form1">
<select name="sele1" onChange="jump2();">
<option>
<option value="0,../kiso_faq.html">JavaScript FAQ
<option value="1,../kiso_faq.html">JavaScript FAQ
<option value="0,../../index.html#JavaScript">JavaScript
<option value="1,../etc_link.html">Link
<option value="0,../lib_link.html">Library(Link)
<option value="1,../../index.html#JavaScript">JavaScript
<option value="1,../../index.html#JavaScript">JavaScript
</select>
</form>



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

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