本日  昨日
 
03/16(Sun) 01:08

o フォーム形式メニューセレクターの作り方
【お知らせ】(2002/11/30) 同ページ内表示に加え、別ウィンドウ(ブランク)表示、小ウィンドウ表示を追加
フォームを使ったメニューセレクターを作ってみましょう。下のフォームから行きたいページをクリックするとそのページにジャンプします。
(同ページ内表示)

(別ウィンドウ表示)

(小ウィンドウ表示)

(小ウィンドウ表示2)

メニューセレクター関数LinkSelect(form, sel)をヘッダー部に定義します。

<SCRIPT language="JavaScript"> <!-- //メニューセレクター(同ページ内表示) function LinkSelect(form, sel){ adrs = sel.options[sel.selectedIndex].value; location.href = adrs; } // --> </SCRIPT>


フォームを使って関数LinkSelect(form, sel)を呼び出すコマンドを本文中に記述します。OPTION VALUEに、ジャンプ先アドレスを記述します。

<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)を以下のものと置き換えます。
<SCRIPT language="JavaScript"> <!-- //メニューセレクター(別ウィンドウ表示) function LinkSelect(form, sel){ adrs = sel.options[sel.selectedIndex].value; window.open(adrs,'_blank'); } // --> </SCRIPT>


小ウィンドウに表示するには?

メニューセレクター関数LinkSelect(form, sel)を以下のものと置き換えます。
<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を記述します。
<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はあなたのつけたフレームの名前になります。

フレームの定義が下のような場合は、

<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つ以上のフレームの時は、フレームの定義の状態によって動作が異なりますので、あなたの希望する状態になる方を使います。

  1. top は、常にフレームをオープンしたindex.html(top)に戻ります。
  2. parent は、子フレームの親フレームに戻ります。index.htmlに menu、mainのフレームがあって、mainをさらにsubmain1、submain2とフレームに分割した場合、submain1、submain2から、mainに戻る時は parent、index.htmlに戻したい時は top を使います。

小ウインドウを使う時は?

小ウインドウから、メインウインドウ(元 html)を参照するには opener を使います。

  1. opener.document.bgColor="red"
  2. opener.location.href="test.htm"
  3. opener.location.href="http://kikuchisan.net/index.htm"
  4. windows.opener.close()
  5. opener.func()----メインウインドウで定義された関数 func()を参照。
小ウインドウからメインウインドウの背景色を変える例。上の命令も同じように表記できます。 <form> <input type="button" onClick="opener.document.bgColor='red'" value="変更"> </form>

メインウインドウ(元 html)から小ウインドウを参照するには小ウインドウ名を使います。

var myWindow = window.open("","myWin","height=100,width=200")

上の定義文の場合は myWindow になります。

  1. myWindow.document.bgcolor="red"
メインウインドウから小ウインドウの背景色を変える例: <form> <input type="button" onClick="myWindow.document.bgColor='red'" value="変更"> </form>
 
 
©1997- Kikuchisan's workshop All rights reserved //

スポンサーリンク

関連コンテンツ