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

■ JavaScript - サンプル集(257種類) - ページ
   - ポップアップメニュー フレーム版 Ver6(ボタン付き・フレーム内・フレーム解除・新ウィンドゥ)

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

サンプルを見る
ソースを保存する
(右クリック→「対象をファイルに保存」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) == 0)
			parent.myframe2.location.href=my_url.substring(2,my_url.length);
		else if(my_url.charAt(0) == 1)
			parent.window.location=my_url.substring(2,my_url.length);
		else if(my_url.charAt(0) == 2)
			window.open(my_url.substring(2,my_url.length));
		}

//-->
</script>

</head>

<body>

<form name="form1">
  <select name="sele1">
  <option>
  <option value="0,../../index.html">JavaScript
  <option value="1,../../lib_form.html">サンプル集(フォーム)
  <option value="2,../../lib_link.html">サンプル集(リンク)
  <option value="0,../../index.html">JavaScript
  <option value="1,../../lib_form.html">サンプル集(フォーム)
  <option value="2,../../lib_link.html">サンプル集(リンク)
  </select>
<input type="button" value="CLICk!" onClick="jump2();">
</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

新ウィンドゥで表示させたいHTMLならば、URLを実際に書いてある前の部分に「2」を記入します。
  例:<option value="2,../../index.html#JavaScript">JavaScript

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

続いて、「,」の後ろに続けてお好きな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="2,../../index.html#JavaScript">JavaScript
<option value="0,../etc_link.html">Link
<option value="1,../lib_link.html">Library(Link)
<option value="2,../../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="2,../../index.html#JavaScript">JavaScript
<option value="0,../etc_link.html">Link
<option value="1,../lib_link.html">Library(Link)
<option value="2,../../index.html#JavaScript">JavaScript
<option value="0,../../index.html#JavaScript">JavaScript
</select>
</form>



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

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