参照:windoo - Mootools draggable and resizable Window plugin
<!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>