WebDesigning 12月号掲載のサンプルです。サンプルスクリプトは掲載されたものとは若干異なります。
【サンプルを実行する】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>単純にウィンドウを開く</title>
<link href="default.css" rel="stylesheet" type="text/css">
<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"><!--
window.onload = function(){
var subwin = new Window("win1", {
className: "dialog",
title: "Prototype Window Classサンプル",
left:100,
top:70,
width:320,
height:240,
zIndex:200
});
subwin.getContent().innerHTML = "ウェブ デザイニング買ってね!!";
//
subWin.setDestroyOnClose(); // ウィンドウが閉じられた時に破棄する
subwin.show();
}
// --></script>
</head>
<body>
<h1>Prototype Window Classサンプル</h1>
</body>
</html>
【サンプルを実行する】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>複数のウィンドウを開く</title>
<link href="default.css" rel="stylesheet" type="text/css">
<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"><!--
var windowZ = 100;
function openMultiWindow(){
var winID = "win"+(new Date()).getTime(); // 現在のミリ秒を付加したID名にする
var x = Math.random() * 400; // 表示するX座標
var y = Math.random() * 200 + 70; // 表示するY座標
var subwin = new Window(winID, {
className: "dialog",
title: "Prototype Window Classサンプル",
left:x,
top:y,
width:320,
height:240,
zIndex:windowZ++
});
var dateObj = new Date();
var H = dateObj.getHours();
var M = dateObj.getMinutes();
var S = dateObj.getSeconds();
subwin.getContent().innerHTML = "現在の時刻："+H+" : "+M+" : "+S;
subwin.setDestroyOnClose(); // ウィンドウが閉じられた時に破棄する
subwin.show();
}
// --></script>
</head>
<body>
<h1>Prototype Window Classサンプル</h1>
<form>
<input type="button" value="ランダムに開く" onClick="openMultiWindow()">
</form>
</body>
</html>
【サンプルを実行する】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>他のページを表示する</title>
<link href="default.css" rel="stylesheet" type="text/css">
<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"><!--
var windowZ = 100;
function openMultiWindow(){
var winID = "win"+(new Date()).getTime(); // 現在のミリ秒を付加したID名にする
var x = Math.random() * 400; // 表示するX座標
var y = Math.random() * 200 + 70; // 表示するY座標
var subwin = new Window(winID, {
className: "dialog",
title: "Prototype Window Classサンプル",
left:x,
top:y,
width:320,
height:240,
zIndex:windowZ++,
url: $F("pageURL")
});
subwin.setDestroyOnClose(); // ウィンドウが閉じられた時に破棄する
subwin.show();
}
// --></script>
</head>
<body>
<h1>Prototype Window Classサンプル</h1>
<form>
URL : <input type="text" id="pageURL" size="40" value="http://www.openspc2.org/"><br>
<input type="button" value="ウィンドウを開く" onClick="openMultiWindow()">
</form>
</body>
</html>
【サンプルを実行する】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>他のページを表示する</title>
<link href="default.css" rel="stylesheet" type="text/css">
<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"><!--
var windowZ = 100;
function openMultiWindow(){
var winID = "win"+(new Date()).getTime(); // 現在のミリ秒を付加したID名にする
var x = Math.random() * 400; // 表示するX座標
var y = Math.random() * 200 + 70; // 表示するY座標
var subwin = new Window(winID, {
className: "dialog",
title: "Prototype Window Classサンプル",
left:x,
top:y,
width:320,
height:240,
zIndex:windowZ++,
url: $F("pageURL")
});
subwin.setDestroyOnClose(); // ウィンドウが閉じられた時に破棄する
subwin.show();
}
// --></script>
</head>
<body>
<h1>Prototype Window Classサンプル</h1>
<form>
URL : <input type="text" id="pageURL" size="40" value="http://www.openspc2.org/"><br>
<input type="button" value="ウィンドウを開く" onClick="openMultiWindow()">
</form>
</body>
</html>
【サンプルを実行する】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>ダイアログを開く</title>
<link href="default.css" rel="stylesheet" type="text/css">
<link href="alert.css" rel="stylesheet" type="text/css">
<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"><!--
function openDialog(){
Dialog.alert("Google Maps API本もよろしく", {
windowParameters: {
width:320,
height:120
},
okLabel: "OK",
ok:function(win) {alert("買ってね"); return true;}
});
}
// --></script>
</head>
<body bgcolor="gray">
<h1>Prototype Window Classダイアログサンプル</h1>
<form>
<input type="button" value="ダイアログを開く" onClick="openDialog()">
</form>
</body>
</html>
【サンプルを実行する】
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="default.css" type="text/css" media="all">
<link rel="stylesheet" href="alert.css" type="text/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"><!--
function openDialog(){
Dialog.info({ url:"sample.txt", options:{ method:"get"} }, {
windowParameters: {width:360, height:90},
showProgress: true
});
}
// --></script>
</head>
<body>
<h1>ダイアログにサーバーデータを表示する</h1>
<form>
<input type="button" value="開く" onClick="openDialog()">
</form>
</body>
</html>