ページ内にマルチウィンドウを表示する（Prototype Window Class）

説明

Prototype Window Classライブラリを利用すると手軽にページ内にマルチウィンドウを表示することができます。Prototype Window Classライブラリを動作させるにはprototype.jsライブラリとscript.aculo.usライブラリのエフェクト（effects.js）ファイルが必要です。あらかじめ、prototype.js、script.aculo.usライブラリのファイルを読み込ませておきます。
ウィンドウを生成するにはnew Window()とします。最初のパラメータにウィンドウIDを指定します。複数表示する場合には、このウィンドウIDが重複しないようにしてください。2番目のパラメータはオプションパラメータでプロパティリスト（ハッシュ）形式で指定します。指定できるパラメータを表1に示します。
ウィンドウが閉じられたらウィンドウ情報（ウィンドウオブジェクト）も破棄するようにsetDestroyOnClose()を指定します。これを指定しないと内部ではウィンドウ情報が残ったままになります。ウィンドウを表示するにはshow()を使います。表示されたウィンドウ内に文字などを表示するにはsetHTMLContent()を使います。
ウィンドウのドラッグ、リサイズ、クローズなどの処理は自動的に行われるため特に指定する必要はありません。

表１
名前初期値内容
classNamedialogクラス名
titlenoneウィンドウタイトル
urlnoneURL（別ぺージを表示する場合に指定）
parentbodyウィンドウの親ノード
top | bottomtop:0ウィンドウの表示Y座標（上）
bottom---ウィンドウの表示Y座標（下）
leftleft:0ウィンドウの表示X座標（左）
right---ウィンドウの表示X座標（右）
width100横幅
height100縦幅
maxWidthnone最大幅（横）
maxHeightnone最大幅（縦）
minWidth100最小幅（横）
minHeight20最小幅（縦）
resizabletrueリサイズ可能フラグ（true : リサイズ可能、false : リサイズ不可）
closabletrueクローズ可能フラグ（true : クローズ可能、false : クローズ不可）
minimizabletrue最小化ボタン（true : ボタンあり、false : ボタンなし）
maximizabletrue最大化ボタン（true : ボタンあり、false : ボタンなし）
draggabletrueドラッグ可能フラグ（true : ドラッグ可能、false : ドラッグ不可）
showEffectEffect.AppearまたはElement.showウィンドウ表示時のエフェクト
hideEffectEffect.FadeまたはElement.hideウィンドウクローズ時のエフェクト
showEffectOptionsnoneウィンドウ表示時のエフェクトオプション（script.aculo.us参照）
hideEffectOptionsnoneウィンドウクローズ時のエフェクトオプション（script.aculo.us参照）
effectOptionsnoneエフェクトオプション（script.aculo.us参照）
onloadnone読み込みが完了した時に呼び出す処理
opacity1不透明度（0〜1.0）

JavaScriptテクニック ブック 　詳しい解説などはJavaScriptテクニック ブックを参照してください。

サンプルコード [実行]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScript Sample</title>
<link rel="stylesheet" href="default.css" type="text/css" media="all">
<link rel="stylesheet" type="text/css" href="main.css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="effects.js"></script>
<script type="text/javascript" src="window.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<h1>ページ内にマルチウィンドウを表示する</h1>
<form action="./multi.cgi" method="get" name="mainForm">
<input type="button" id="openButton" value="ウィンドウを開く">
</form>
</body>
</html>
window.onload = function(){
document.getElementById("openButton").onclick = function(){
multiWindow.open("win01", "Sample1", 80, 100, 320, 240);
multiWindow.open("win02", "Sample2", 160, 160, 320, 240);
}
}
var multiWindow = {
open : function(winID, wTitle, x, y, w, h){
var win = new Window(winID, {
title: wTitle, className: "dialog",
top:y, left:x, width:w, height:h, zIndex: 100,
resizable: true, draggable:true
});
win.setDestroyOnClose();
win.show();
win.setHTMLContent("ウィンドウが表示されます");
}
}