|
|
|
03/16(Sun) 02:13
 小ウインドウ形式メニューセレクターの作り方
小ウインドウ形式メニューセレクターを作ってみましょう。ページをオープンしたり、メニューボタンやアンカータグを押すと小ウインドウを開き、その中のメニュー項目を選択すると元のページに選択したページを表示します。
タグの例：メニュー
■ 小ウインドウメニュー用ＨＴＭＬ文(java19_1.html)の作成
■普通のHTML文の場合
普通のHTML文のサンプルです。このサンプルをコピーし、あなたのメニューに合わせてＵＲＬやメニュー項目名を変更して下さい。
|
<![CDATA[
<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>時刻毎に変わるＢＧＭ or 音声のご挨拶</td></tr>
<tr><td bgcolor=lightcyan>
<a href="JavaScript:MenuSelect('java22.html')">ドキュメント情報</a></td>
<td>ブラウザの種類、バージョン、使用ＯＳ名などの情報を見る</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は、フレーム文であなたが定義したフレーム名です。あなたの定義に合わせて変更してください。
■ 小ウインドウメニューを開く
呼び出し元のＨＴＭＬ文中に以下の”小ウインドウメニューを開く”命令を記述します。あなたの好みに合わせて下の３つのサンプルから選択してください。
■ ページをオープンすると自動的に小ウインドウを開く場合は、
<BODY>タグの中に onLoad='window.open("java19_1.html","","width=300,height=200")'を追加します。java19_1.htmlはメニュー用HTMLのファイル名、width=300,height=200でウインドウサイズを調整します。
|
<![CDATA[
<BODY bgcolor="#FFE4C4" text="navy"
onLoad='window.open("java19_1.html","","width=300,height=200")'>
]]>
|
■ リンクボタンで小ウインドウを開く場合は、
|
<![CDATA[
<form>
<input type="button" value="メニュー"
onClick='window.open("java19_1.html","","width=300,height=200")'>
</form>
]]>
|
■ タグで小ウインドウを開く場合は、
|
<![CDATA[
<a href="javascript:;"
onClick='window.open("java19_1.html","","width=300,height=200")'>メニュー</a>
]]>
|
■ 参考
■小ウインドウから、メインウインドウ(元 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()を参照。
小ウインドウからメインウインドウの背景色を変える例。上の命令も同じように表記できます。
<![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>
]]>
|
|
