03/16(Sun) 00:47
小ウインドウ形式メニューセレクターの作り方
小ウインドウ形式メニューセレクターを作ってみましょう。ページをオープンしたり、メニューボタンやアンカータグを押すと小ウインドウを開き、その中のメニュー項目を選択すると元のページに選択したページを表示します。
タグの例:メニュー
■ 小ウインドウメニュー用HTML文(java19_1.html)の作成
■普通のHTML文の場合
普通のHTML文のサンプルです。このサンプルをコピーし、あなたのメニューに合わせてURLやメニュー項目名を変更して下さい。
■フレーム形式の場合
menuフレーム(frame name="menu")からメニューセレクターをオープンし、選択結果をmainフレーム(frame name="main")に表示するには、MenuSelectの中のwindow.opener.location.href=adrs;に
window.opener.parent.main.location.href=adrs;と赤字の部分を追加します。mainは、フレーム文であなたが定義したフレーム名です。あなたの定義に合わせて変更してください。
■ 小ウインドウメニューを開く
呼び出し元のHTML文中に以下の”小ウインドウメニューを開く”命令を記述します。あなたの好みに合わせて下の3つのサンプルから選択してください。
■ ページをオープンすると自動的に小ウインドウを開く場合は、
<BODY>タグの中に onLoad='window.open("java19_1.html","","width=300,height=200")'を追加します。java19_1.htmlはメニュー用HTMLのファイル名、width=300,height=200でウインドウサイズを調整します。
■ リンクボタンで小ウインドウを開く場合は、
■ タグで小ウインドウを開く場合は、
■ 参考
■小ウインドウから、メインウインドウ(元 html)を参照するには opener を使います。window.openerのwindowを省略して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"
メインウインドウから小ウインドウの背景色を変える例:
|