|
|
|
03/16(Sun) 01:08
 フォーム形式メニューセレクターの作り方
【お知らせ】（2002/11/30）
同ページ内表示に加え、別ウィンドウ（ブランク）表示、小ウィンドウ表示を追加
フォームを使ったメニューセレクターを作ってみましょう。下のフォームから行きたいページをクリックするとそのページにジャンプします。
■ メニューセレクター関数LinkSelect(form, sel)をヘッダー部に定義します。
|
<![CDATA[
<SCRIPT language="JavaScript">
<!--
//メニューセレクター(同ページ内表示)
function LinkSelect(form, sel){
adrs = sel.options[sel.selectedIndex].value;
location.href = adrs;
}
// -->
</SCRIPT>
]]>
|
■ フォームを使って関数LinkSelect(form, sel)を呼び出すコマンドを本文中に記述します。OPTION VALUEに、ジャンプ先アドレスを記述します。
|
<![CDATA[
<FORM METHOD="POST" NAME="link">
<SELECT NAME="selLink" onChange="LinkSelect(this.form, this)">
<OPTION>☆メニュー
<OPTION VALUE="java34.html">クッキー入門
<OPTION VALUE="java05.html">BGM/音声の挨拶(1)
<OPTION VALUE="java22.html">ドキュメント情報
</SELECT></FORM>
]]>
|
■別ウィンドウ（ブランク）に表示するには？
メニューセレクター関数LinkSelect(form, sel)を以下のものと置き換えます。
|
<![CDATA[
<SCRIPT language="JavaScript">
<!--
//メニューセレクター(別ウィンドウ表示)
function LinkSelect(form, sel){
adrs = sel.options[sel.selectedIndex].value;
window.open(adrs,'_blank');
}
// -->
</SCRIPT>
]]>
|
■小ウィンドウに表示するには？
メニューセレクター関数LinkSelect(form, sel)を以下のものと置き換えます。
|
<![CDATA[
<SCRIPT language="JavaScript">
<!--
//メニューセレクター(小ウィンドウ表示)
function LinkSelect(form, sel){
myWindow = window.open("","myWin","height=500,width=700");
adrs = sel.options[sel.selectedIndex].value;
if (adrs != "") myWindow.location.href=adrs;
}
// -->
</SCRIPT>
]]>
|
myWindow = window.open("","myWin","height=500,width=700");のパラメータheight、widthで画面サイズを指定します。
■ボタンをクリックして小ウィンドウに表示するには？
ボタンクリックの場合は、LinkSelect(form, sel)は使えないので、onClickに直接JavaScriptを記述します。
|
<![CDATA[
<FORM>
<SELECT NAME="selLink">
<OPTION>☆メニュー
<OPTION VALUE="java34.html">クッキー入門
<OPTION VALUE="java05.html">BGM/音声の挨拶(1)
<OPTION VALUE="java22.html">ドキュメント情報
</SELECT>
<input type="button" value="開く" onClick="myWindow=window.open
('','myWin','height=500,width=700');
myWindow.location.href=this.form.selLink.options
[this.form.selLink.selectedIndex].value;">（小ウィンドウ表示2）
</FORM>
]]>
|
myWindow = window.open("","myWin","height=500,width=700");のパラメータheight、widthで画面サイズを指定します。
■ フレームを使う時は？
■フレームを使う時は、function LinkSelect の location.href = adrs; を top.framename.location.href=adrs; と赤字の部分を追加します。framenameはあなたのつけたフレームの名前になります。
フレームの定義が下のような場合は、
<![CDATA[
<FRAMESET ROWS="140,*" FRAMEBORDER="no" BORDER="0">
<FRAME SRC="frame1.html" NAME="f1"> ---このフレームにメニューセレクターをセット
<FRAME SRC="frame2.html" NAME="f2"> ---このフレームに選択したページを表示
</FRAMESET>
]]>
この場合、表示したいページ frame2.html のフレーム名は f2 ですので、記述はtop.f2.location.href=adrs; になります。
■フレームの中にさらにフレームを作った時は、parent.framename.の場合もあります。
topとparentは、2つのフレーム(例:menuとmain)の時は、同じ動作をしますが、3つ以上のフレームの時は、フレームの定義の状態によって動作が異なりますので、あなたの希望する状態になる方を使います。
- top は、常にフレームをオープンしたindex.html(top)に戻ります。
- parent は、子フレームの親フレームに戻ります。index.htmlに menu、mainのフレームがあって、mainをさらにsubmain1、submain2とフレームに分割した場合、submain1、submain2から、mainに戻る時は parent、index.htmlに戻したい時は top を使います。
■ 小ウインドウを使う時は？
■小ウインドウから、メインウインドウ(元 html)を参照するには opener を使います。
- opener.document.bgColor="red"
- opener.location.href="test.htm"
- opener.location.href="http://kikuchisan.net/index.htm"
- windows.opener.close()
- opener.func()----メインウインドウで定義された関数 func()を参照。
小ウインドウからメインウインドウの背景色を変える例。上の命令も同じように表記できます。
<![CDATA[
<form>
<input type="button" onClick="opener.document.bgColor='red'" value="変更">
</form>
]]>
■メインウインドウ(元 html)から小ウインドウを参照するには小ウインドウ名を使います。
var myWindow = window.open("","myWin","height=100,width=200")
上の定義文の場合は myWindow になります。
- myWindow.document.bgcolor="red"
メインウインドウから小ウインドウの背景色を変える例:
<![CDATA[
<form>
<input type="button" onClick="myWindow.document.bgColor='red'" value="変更">
</form>
]]>
|
|
