ポップアップメニューから項目を選んでボタンをクリックすると、ジャンプするスクリプトです。
これは選んだ項目によってフレーム内でジャンプしたり、
フレームを解除したり、新ウィンドゥで表示されるようになっています。
下のサンプルをクリックしますと、新しいウィンドゥが開いて動作を確認できます。
サンプルではフレーム内で表示、フレーム解除で表示、新ウィンドゥで表示と、交互に並べています。
・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」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を表示させるのか、名前を指定します。
上から１１行目の「myframe2」の部分に、実際に使用されるフレーム名をお書き下さい。
例：parent.myframe2.location.href=my_url.substring(2,my_url.length);
続いて実際に使用するURLと項目名を指定していきます。
下から１１行目〜６行目の部分に、URLと項目名を記入します。
一つのURLは、１行で構成されています。
例：<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
もし項目をもっと増やしたい場合は、下から６行目の後ろに、新たに
<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>
|
|
