本日  昨日
 
03/16(Sun) 00:47

o 小ウインドウ形式メニューセレクターの作り方
小ウインドウ形式メニューセレクターを作ってみましょう。ページをオープンしたり、メニューボタンやアンカータグを押すと小ウインドウを開き、その中のメニュー項目を選択すると元のページに選択したページを表示します。
ボタンの例:
タグの例:メニュー

小ウインドウメニュー用HTML文(java19_1.html)の作成

普通のHTML文の場合
普通のHTML文のサンプルです。このサンプルをコピーし、あなたのメニューに合わせてURLやメニュー項目名を変更して下さい。
<html> <head> <title>java19_1</title> <STYLE type="text/css"> <!-- table {font-size:10pt} //--> </STYLE> <SCRIPT language="JavaScript"> <!-- //メニューセレクター function MenuSelect(adrs){ window.opener.location.href=adrs; } //--> </SCRIPT> </head> <body bgcolor=white text=navy> <center> <form><TABLE BORDER="3" BGCOLOR="#0000B3"> <TR><TH><H4><FONT COLOR="#FFFFFF">メニュー</FONT></TH> <TD align=right><input type='button' VALUE='閉じる' onClick='window.close()'> </TD></TR></TABLE></form> <table border=0 bgcolor="#FFFFD0"> <tr bgcolor="#66CC99"><th>項目</th><th>説明</th></tr> <tr><td bgcolor=lightcyan> <a href="JavaScript:MenuSelect('java34.html')">クッキー入門</a></td> <td>クッキー入門。仕組みと関数の使い方</td></tr> <tr><td bgcolor=lightcyan> <a href="JavaScript:MenuSelect('java05.html')">BGM/音声の挨拶(1)</a></td> <td>時刻毎に変わるBGM or 音声のご挨拶</td></tr> <tr><td bgcolor=lightcyan> <a href="JavaScript:MenuSelect('java22.html')">ドキュメント情報</a></td> <td>ブラウザの種類、バージョン、使用OS名などの情報を見る</td></tr> </table> </center> </body></html>

フレーム形式の場合
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でウインドウサイズを調整します。
<BODY bgcolor="#FFE4C4" text="navy" onLoad='window.open("java19_1.html","","width=300,height=200")'>

リンクボタンで小ウインドウを開く場合は、
<form> <input type="button" value="メニュー" onClick='window.open("java19_1.html","","width=300,height=200")'> </form>

タグで小ウインドウを開く場合は、
<a href="javascript:;" onClick='window.open("java19_1.html","","width=300,height=200")'>メニュー</a>


参考

小ウインドウから、メインウインドウ(元 html)を参照するには opener を使います。window.openerのwindowを省略して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 //

スポンサーリンク

関連コンテンツ