mootoolsベースウィンドウ、モーダル
- windoo〔ドラッグ、リサイズ可能な多目的ウィンドウ〕
- Window.Growl 2.0 with MooTools 1.2beta2〔ふわっと消える角丸ウィンドウ〕
windoo
ドラッグ、リサイズ可能な多目的ウィンドウ
2008/11/22
windoo - Mootools draggable and resizable Window plugin
Firefox、Opera、Safari、IE 6、IE 7
［CSS］windoo.css＋theme用CSS
［JS］mootools.js v1.2、windoo.js v1.2-beta1
［JS］mootools.js v1.2、windoo.js v1.2-beta1
ドラッグとリサイズ可能なウィンドウを生成するmotoolsプラグイン。 アラートダイアログ、確認ダイアログ、ページ内の要素や指定したURLのページをウィンドウ内に表示したりと、いろいろなウィンドウを実装することができます。
ウィンドウには、閉じるボタン、ウィンドウ内で最大化ボタン、最小化ボタンを付けることもできます。 Mac OS風の「aqua」など、3つのテーマが用意されており、テーマの指定を変更するだけでウィンドウのデザインを変えることができます。
ページ読込時にウィンドウを表示したり、ボタンクリックでウィンドウを表示したり、確認ダイアログの結果を取得したりと、イベントを設定したりコールバックを受け取ることもできます。
設置イメージ
HEAD
<!-- JS --> <script src="mootools-1.2-core-yc.js" type="text/javascript" charset="utf-8"></script> <script src="mootools-1.2-more-yc.js" type="text/javascript" charset="utf-8"></script> <script src="windoo-1.2-beta1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> /* インラインフレームウィンドウ表示 */ /* ページロード時にウィンドウを生成 */ window.addEvent('domready', function(){ /* Window 1: positioned window with content adopted from existing DOM element */ var win1 = $('win1'); win1.remove(); var windoo1 = new Windoo({ left: 600, top: 10, width: 640, height: 480, title: 'インラインフレームウィンドウ', type: 'iframe', shadow: false, container: false, buttons: {menu: true}, ghost: {resize: true, move: true}, url: 'インラインフレームに表示するURL', onBeforeClose: function(){ this.preventClose( !confirm('このウィンドウを閉じますか？') ); } }).show(); windoo1.bringTop(); </script> <!-- CSS --> <style type="text/css" media="screen"> /* 共通CSS */ @import url(lib/mootools/windoo_themes/windoo.css); /* ウィンドウテーマ用CSS */ @import url(lib/mootools/windoo_themes/windoo.alphacube.css); </style>
HTML
<!-- インラインフレームウィンドウ表示 --> <div id="win1"><!-- Window 1 content --></div>
windooの設置サンプルサンプルを見る
<!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>
</head>
<body>
<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>
Window.Growl 2.0 with MooTools 1.2beta2
ふわっと消える角丸ウィンドウ
unknown
Window.Growl 2.0 with MooTools 1.2beta2
mootools v1.2b2、growl.js
自動的にふわっと消える角丸ウィンドウを生成するライブラリ。 消えるまでの表示時間は「duration」に秒単位で指定します。
設置イメージ
HEAD
<script type="text/javascript" src="/content/lib/mootools/mootools-1.2b2.js" charset="utf-8"></script> <script type="text/javascript" src="/content/lib/growl/growl.js" charset="utf-8"></script>
HTML
<ul> <li><a href="#" id="smoke" title="Show msg Smoke">Show Growl Smoke.</a></li> <li><a href="#" id="bezel" title="Show msg Bezel">Show Growl Bezel.</a></li> </ul> <script type="text/javascript" charset="utf-8"> $('smoke').onclick = function() { Growl.Smoke({ title: 'タイトル', text: 'テキスト', image: '画像URL', duration: 2 }); return false; }; $('bezel').onclick = function() { Growl.Bezel({ title: 'タイトル', text: 'テキスト', image: '画像URL', duration: 2 }); return false; }; </script>
Window.Growl 2.0の設置サンプルサンプルを見る
<!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 type="text/javascript" src="/content/lib/mootools/mootools-1.2b2.js"></script>
<script type="text/javascript" src="/content/lib/growl/growl.js"></script>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>参照：<a href='http://icebeat.bitacoras.com/mootools/growl/'>Window.Growl 2.0 with MooTools 1.2beta2</a></p>
<ul>
<li><a href="#" id="smoke" title="Show msg Smoke">Show Growl Smoke.</a></li>
<li><a href="#" id="bezel" title="Show msg Bezel">Show Growl Bezel.</a></li>
</ul>
<script type="text/javascript">
$('smoke').onclick = function() {
Growl.Smoke({
title: 'PHP & JavaScript Room',
text: 'http://phpjavascriptroom.com/',
image: '/content/img/banner/banner7.gif',
duration: 5
});
return false;
};
$('bezel').onclick = function() {
Growl.Bezel({
title: 'PHP & JavaScript Room',
text: 'http://phpjavascriptroom.com/',
image: '/content/img/banner/banner7.gif',
duration: 3
});
return false;
};
</script>
</div>
</body>
</html>