参照：windoo - Mootools draggable and resizable Window plugin
新宿サザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん「クリスピー・クリーム・ドーナツ（Krispy Kreme Doughnuts）」。ドーナツの箱がピザの箱みたいでアメリカン！すごく甘いのかと思ってたら、意外とほどよい甘さ。生地はややわらかくてふんわりしてました！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script src="/content/lib/mootools/mootools-1.2-core-yc.js" type="text/javascript"></script>
<script src="/content/lib/mootools/mootools-1.2-more-yc.js" type="text/javascript"></script>
<script src="/content/lib/mootools/windoo-1.2-beta1.js" type="text/javascript"></script>
<style type="text/css" media="screen">
/* 共通CSS */
@import url(lib/mootools/windoo_themes/windoo.css);
/* ウィンドウテーマ用CSS */
@import url(/content/lib/mootools/windoo_themes/windoo.aero.css);
@import url(/content/lib/mootools/windoo_themes/windoo.alphacube.css);
@import url(/content/lib/mootools/windoo_themes/windoo.aqua.css);
/* custom CSS code */
#win2 {
width:320px;
height:240px;
border:solid red 1px;
margin:3em 0 0 2em;
padding:.5em;
overflow:hidden;
font-size:12px;
}
#win2 p {
margin:0;
padding:0;
}
</style>
<script type="text/javascript">
/* ページロード時にウィンドウを生成 */
window.addEvent('domready', function(){
/* Window 1: positioned window with content adopted from existing DOM element */
var win1 = $('win1'), container1 = win1.getParent();
win1.remove();
var panel = new Element('div', {'styles': {'padding-top': 10, 'text-align': 'right'}}).adopt(
new Element('input', {'type': 'button', 'value': '<< Back'}),
new Element('input', {'type': 'button', 'value': 'Forward >>'})
);
var windoo1 = new Windoo({
left: 600,
top: 10,
title: 'ボタンパネル付きのウィンドウ',
positionStyle: 'fixed', /* NOTE: not functional if container defined */
container: container1,
resizeLimit: {'x':[270], 'y':[200]},
theme: Windoo.Themes.aero,
position: false
}).addPanel(panel).adopt(win1).show();
/* Window 2: 要素の内容をウィンドウ表示 */
$('wrap-window').addEvent('click', function(ev){
new Event(ev).stop();
this.disabled = true;
new Windoo({
//ghost: {resize: true, move: true},
buttons: {roll: true},
title: '要素の内容を表示'
}).wrap($('win2'), {
position: true, /* inherit content position */
ignorePadding: false, /* = add window border padding to content block size */
resetWidth: true
}).show();
});
/* Window 3: インラインフレームウィンドウ表示 */
new Windoo({
width: 640,
height: 480,
title: 'インラインフレームウィンドウ',
type: 'iframe',
shadow: false,
container: false,
buttons: {menu: true},
ghost: {resize: true, move: true},
url: 'http://www.google.co.jp/',
onBeforeClose: function(){
this.preventClose( !confirm('このウィンドウを閉じますか？') );
}
}).show();
/* move windoo1 on top */
windoo1.bringTop();
$('alert-dialog').addEvent('click', function(ev){
/* Window 4: アラートダイアログ生成 */
new Windoo.Alert("<p style='padding:10px 10px 0 10px; line-height:1.5;'><img src='/content/img/css/warning_48.png' align='left' />アラートダイアログです。ダイアログのタイトル部分も指定できます。ダイアログの内容にはHTML文を記述できます。このダイアログのテーマは「aqua」を使用しています。</p>", {
'window': {
'title': 'アラートのタイトル',
'theme': Windoo.Themes.aqua,
'onClose': function(){
alert('アラートダイアログを閉じました');
}
}
});
});
$('confirm-dialog').addEvent('click', function(ev){
/* Window 5: コールバックのある確認ダイアログ生成 */
new Windoo.Confirm("<p style='line-height:1.5;'>確認ダイアログです。OKボタンをクリックしたか、キャンセルボタンをクリックしたかのコールバックを受け取れます。ダイアログのタイトル部分も指定できます。ダイアログの内容にはHTML文を記述できます。", {
'window': {
'title' : '確認ダイアログ',
'resizable': true
},
'onConfirm': function(){
alert('OKを選択しました');
},
'onCancel': function(){
alert('キャンセルを選択しました');
}
});
});
});
</script>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<div id="wrap">
<h1> 設置サンプル</h1>
<p>参照：<a href='http://code.google.com/p/windoo/'>windoo - Mootools draggable and resizable Window plugin</a></p>
<h2>Windoo.Dialogコンポーネントの使用例</h2>
<p>
<input id="alert-dialog" title="インラインモーダルアラートダイアログを生成" value="アラートダイアログ生成" type="button" />
<input id="confirm-dialog" title="インラインモーダル確認ダイアログ生成" value="確認ダイアログ生成" type="button" />
</p>
<h2>Windoo::wrap関数の使用例</h2>
<p>
<input id="wrap-window" value="ウィンドウ内にラップコンテンツ" type="button" />
</p>
<!-- Window 1 content -->
<div id="win1">
<a href="http://www.flickr.com/photos/22559849@N06/2973155055/" title="クリスピー・クリーム・ドーナツ by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3141/2973155055_385036c286_o.png" width="320" height="240" alt="クリスピー・クリーム・ドーナツ" /></a>
<p>新宿サザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん「クリスピー・クリーム・ドーナツ（Krispy Kreme Doughnuts）」。ドーナツの箱がピザの箱みたいでアメリカン！すごく甘いのかと思ってたら、意外とほどよい甘さ。生地はややわらかくてふんわりしてました！</p>
</div>
<!-- Window 2 content -->
<div id="win2">
<a href="http://www.flickr.com/photos/22559849@N06/2974008614/" title="くまさんケーキ by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3222/2974008614_f4b59bf651_o.png" width="320" height="240" alt="くまさんケーキ" /></a>
</div>
</div>
</body>
</html>