03/16(Sun) 02:33
フォーム形式メニューセレクターの作り方
【お知らせ】(2002/11/30)
同ページ内表示に加え、別ウィンドウ(ブランク)表示、小ウィンドウ表示を追加
フォームを使ったメニューセレクターを作ってみましょう。下のフォームから行きたいページをクリックするとそのページにジャンプします。
■ メニューセレクター関数LinkSelect(form, sel)をヘッダー部に定義します。
■ フォームを使って関数LinkSelect(form, sel)を呼び出すコマンドを本文中に記述します。OPTION VALUEに、ジャンプ先アドレスを記述します。
■別ウィンドウ(ブランク)に表示するには?
メニューセレクター関数LinkSelect(form, sel)を以下のものと置き換えます。
■小ウィンドウに表示するには?
メニューセレクター関数LinkSelect(form, sel)を以下のものと置き換えます。
myWindow = window.open("","myWin","height=500,width=700");のパラメータheight、widthで画面サイズを指定します。
■ボタンをクリックして小ウィンドウに表示するには?
ボタンクリックの場合は、LinkSelect(form, sel)は使えないので、onClickに直接JavaScriptを記述します。
myWindow = window.open("","myWin","height=500,width=700");のパラメータheight、widthで画面サイズを指定します。
■ フレームを使う時は?
■フレームを使う時は、function LinkSelect の location.href = adrs; を top.framename.location.href=adrs; と赤字の部分を追加します。framenameはあなたのつけたフレームの名前になります。
フレームの定義が下のような場合は、
この場合、表示したいページ 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()を参照。
小ウインドウからメインウインドウの背景色を変える例。上の命令も同じように表記できます。
■メインウインドウ(元 html)から小ウインドウを参照するには小ウインドウ名を使います。
var myWindow = window.open("","myWin","height=100,width=200")
上の定義文の場合は myWindow になります。
- myWindow.document.bgcolor="red"
メインウインドウから小ウインドウの背景色を変える例:
|