Dialog
解説
高機能なダイアログウィジェットです。
dialog は、タイトルバーとコンテンツエリアを持つ、フローティングウィンドウです。
デフォルトでは、移動、リサイズすることができ、右上の "x" ボタンでウィンドウを閉じることができます。
コンテンツの大きさが最大値を超えた場合は、スクロールバーが自動的に表示されます。
書式
jQuery_Object.dialog([options]);
依存ファイル
- jquery.ui.core.js
- jquery.ui.widget.js
- jquery.ui.mouse.js
- jquery.ui.position.js
- jquery.ui.draggable.jsオプション
- jquery.ui.resizable.jsオプション
引数
-
optionsオプション
関数
String: "destroy"、 "disable"、"enable"、"option"、"widget"、"close", "isOpen", "moveToTop", "open" のいずれか。
値 | 書式 | 説明 |
"destroy" |
dialog("destroy") |
ダイアログ機能を完全に破棄します。 |
"disable" |
dialog("disable") |
ダイアログ機能を一時的に無効にします。 |
"enable" |
dialog("enable") |
ダイアログ機能を有効にします。 |
"option" |
dialog("option", optionName, [value]) |
ダイアログのオプションを設定します。
optionName に、オプション名を指定します。
value に、オプション値を指定します。
(value を指定した場合は、オプションを設定するsetterとして、value を指定しない場合は、オプションを取得するgetterとして動作します。)
|
"option" |
dialog("option", options) |
ダイアログのオプションを設定します。
options に、オプションを指定します。(キーと値のハッシュ)
|
"widget" |
dialog("widget") |
ダイアログの要素を返します。
|
"close" |
dialog("close") |
ダイアログを閉じます。
|
"isOpen" |
dialog("isOpen") |
ダイアログが開いている場合は true 、閉じている場合は false を返します。
|
"moveToTop" |
dialog("moveToTop") |
ダイアログを最前面に移動します。
|
"open" |
dialog("open") |
ダイアログを開きます。
|
オプション
Object: 指定したオプションで、要素にダイアログ機能を追加します。(キーと値のハッシュ)
プロパティ | 型 | 初期値 | 説明 |
disabled |
Boolean |
false |
ダイアログの有効(false)、無効(true)を設定します。ダイアログを生成する時の初期値として設定できます。 |
autoOpen |
Boolean |
true |
このオプションが true の場合は、dialog() が呼び出されると自動的にダイアログを開きます。
false の場合は、dialog("open") が呼び出されるまでは開きません。
|
buttons |
Object |
{}(空オブジェクト) |
ダイアログにボタンを表示する場合に指定します。
指定したハッシュのキーが、ボタンのテキストとして表示されます。
ボタンがクリックされたときのイベントハンドラ関数は、ハッシュの値に指定します。
ボタンの要素を参照するには、イベントハンドラに渡されるイベントオブジェクトの target プロパティを使用します。
$(selector).dialog({
buttons: {
"はい": function(event) {
alert($(event.target).text());
$(this).dialog("close");
},
"いいえ": function() { $(this).dialog("close"); }
}
});
|
closeOnEscape |
Boolean |
true |
このオプションが true の場合は、ダイアログにフォーカスがあり、ESC キーを押された場合にダイアログを閉じます。
|
closeText |
String |
"close" |
close ボタンのテキストを指定します。
|
dialogClass |
String |
"" |
ダイアログに、指定したクラス名を追加します。
|
draggable |
Boolean |
true |
このオプションが true の場合は、タイトルバーをつかんでドラッグ可能になります。
|
height |
Number |
"auto" |
ダイアログの高さをピクセル単位で指定します。
"auto" を指定した場合は、ダイアログ生成時のコンテンツの高さに自動的に設定されます。
|
hide |
String |
null |
ダイアログを閉じるときのエフェクトを指定します。
$(selector).dialog({hide: "slide"});
|
maxHeight |
Number |
false |
ダイアログの最大の高さをピクセル単位で指定します。
リサイズしても、この大きさを超えることはありません。
|
maxWidth |
Number |
false |
ダイアログの最大の横幅をピクセル単位で指定します。
リサイズしても、この大きさを超えることはありません。
|
minHeight |
Number |
150 |
ダイアログの最大の高さをピクセル単位で指定します。
リサイズしても、この大きさより小さくなることはありません。
|
minWidth |
Number |
150 |
ダイアログの最大の横幅をピクセル単位で指定します。
リサイズしても、この大きさより小さくなることはありません。
|
modal |
Boolean |
false |
true を指定すると、モーダルダイアログとして動作します。
その場合、ページ内にある他の要素は、無効状態になり、ダイアログの下にはオーバレイが作成されます。
|
position |
String, Array |
"center" |
ダイアログの表示位置を指定します。有効な値は次のいずれかです。
-
String: 表示領域における位置を表す文字列。'center', 'left', 'right', 'top', 'bottom' のいずれか。
-
Array: 表示領域における左端(x)、上端(y)、からの位置(ピクセル)を含む配列。(例:[10, 320])
-
Array: 表示領域における水平位置(x)、垂直位置(y)を表す文字列を含む配列。(例:["center", "top"])
|
resizable |
Boolean |
true |
true の場合は、ダイアログの大きさの変更が可能です。
|
show |
String |
null |
ダイアログを開くときのエフェクトを指定します。
$(selector).dialog({show: "slide"});
|
stack |
Boolean |
true |
ダイアログが、他のダイアログの上に積み重ねられるかどうかを指定します。
true の場合は、ダイアログがフォーカスを得ると、他のダイアログの前に移動します。
|
title |
String |
"" |
ダイアログのタイトルを指定します。
|
width |
Number |
300 |
ダイアログの横幅をピクセル単位で指定します。
"auto" を指定した場合は、ダイアログ生成時のコンテンツの横幅に自動的に設定されます。
|
zIndex |
Integer |
1000 |
ダイアログの z-index を指定します。
|
イベント
プロパティ | イベントタイプ | 説明 |
beforeclose |
dialogbeforeclose |
ダイアログが閉じられようとする時に呼び出されます。
このイベントハンドラが false を返すと、ダイアログは閉じません。
|
open |
dialogopen |
ダイアログが開いた時に呼び出されます。
|
focus |
dialogfocus |
ダイアログがフォーカスを得た時に呼び出されます。
|
dragStart |
dialogdragstart |
ダイアログのドラッグを開始した時に呼び出されます。
|
drag |
dialogdrag |
ダイアログをドラッグした時に呼び出されます。
|
dragStop |
dialogdragstop |
ダイアログのドラッグを終了した時に呼び出されます。
|
resizeStart |
dialogresizestart |
ダイアログのリサイズを開始した時に呼び出されます。
|
resize |
dialogresize |
ダイアログをリサイズした時に呼び出されます。
|
resizeStop |
dialogresizestop |
ダイアログのリサイズを終了した時に呼び出されます。
|
close |
dialogclose |
ダイアログを閉じた時に呼び出されます。
|
イベントハンドラには、イベントオブジェクトが渡されます。
例: drag イベントハンドラ
$(".selector").dialog({
drag: function(event) {
event;
}
});
bind(type, [data], fn) を使用してイベントにバインドするには、上記のイベントタイプを指定します。
例: drag イベントにバインドする場合
$(".selector").bind(
"dialogdrag",
function(event) { ... }
);
戻り値
例
例1:様々なオプションで、ダイアログを生成します。(オプションと動きを確認してください。)
title: "dialog1",
maxWidth: 500,
maxHeight: 400,
minWidth: 300,
minHeight: 200
title: "dialog2",
show: "blind",
hide: "explode"
title: "dialog3",
modal: true,
width: "auto",
buttons: {
"はい": function(event) {
alert($(event.target).text());
$(this).dialog("close");
},
"いいえ": function() { $(this).dialog("close"); }
}
dialog 要素に設定される属性と要素
dialog 要素は、いくつかの div要素で構成されています。
<div class="ui-dialog" role="dialog">
<div class="ui-dialog-titlebar">
<span class="ui-dialog-title">{dialogTitle}</span>
<a href="#" class="ui-dialog-titlebar-close" role="button">
<span class="ui-icon ui-icon-closethick">close</span>
</a>
</div>
<div class="ui-dialog-content">
{dialog() を呼び出した要素}
</div>
</div>
※上記は、構成を把握しやすくするため、設定される属性を抜き出したものです。
指定したオプションによっても、要素に設定される内容は変わります。
draggable, resizableのロードを忘れずに
draggable, resizable オプションを使用するには、対応する依存ファイルを正しくロードしてください。
正しくロードされない場合は、それぞれのオプションは機能しません。
逆に、draggable, resizable オプションを使用しない場合は、対応する依存ファイルのロードは必要ありません。
effect 使用時のロードを忘れずに
show, hide オプションで、effect を使用するには、対応する effect の依存ファイルを正しくロードしてください。
正しくロードされない場合は、それぞれのオプションは機能せず、ダイアログを閉じたり、開いたりできなくなります。(エラーも出ません)
例えば、"explode" effect を使用するには、次の依存ファイルのロードが必要です。
- jquery.effects.core
- jquery.effects.explode
|