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) { // event.target でボタンの要素を参照 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	ダイアログを閉じるときのエフェクトを指定します。 // ダイアログを閉じるときに、slide エフェクトを使用する。 $(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	ダイアログを開くときのエフェクトを指定します。 // ダイアログを開くときに、slide エフェクトを使用する。 $(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) { ... }
);

戻り値

jQuery: jQueryオブジェクト

例

例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要素で構成されています。

// dialog 要素
<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>