dialog(options)

選択しているjQueryオブジェクトでダイアログを表示します。options(オブジェクト形式) を指定することにより、様々な挙動を与えることができます。

options説明

便宜上、「その他オプション」と「イベントに関するオプション」に分けています。

その他オプション

キー タイプ 内容 デフォルト
appendTo Selector ダイアログをどの要素にappendToするか。 'body'
autoOpen Boolean falseに設定された場合、生成と同時に表示しません。falseに設定した場合は、dialog('open')で呼び出せます。 true
buttons Object ダイアログの下部にボタンを表示します。指定したオブジェクトのキーがボタンの文字に、値がそのボタンを押した際のコールバック関数になります。 詳しくは下で解説します。 {}
closeOnEscape Boolean デフォルト(true)で、ダイアログにフォーカスがある際に、エスケープボタンでダイアログを閉じます。falseで閉じません。 true
closeText String Closeボタンのテキストを指定します。もし標準のテーマを使用した時は、視覚的にはテキストは見えなくなります。 'close'
dialogClass String ダイアログに付与したいクラス名。 ''
draggable Boolean デフォルト(true)で、タイトルバーを利用してドラッグすることができます。
(ちなみに、droppable要素が同じページにあると、そこにドロップするとdroppable側でイベントが発生するので注意)
true
height (Number|
String)
ピクセル数でダイアログの高さを指定します。'auto'で、自動になります。 'auto'
hide (Number|
String|Object)
ダイアログを隠す時にどのようなアニメーションを使うか。
Number … 指定したミリ秒数でフェードアウト
String … 指定した効果でアニメーション
Object … effect, delay, duration, easingのプロパティを指定可能
null
maxHeight Number リサイズ可能な最大の高さ(ピクセル) false
maxWidth Number リサイズ可能な最大の幅(ピクセル) false
minHeight Number リサイズ可能な最小の高さ(ピクセル) 150
minWidth Number リサイズ可能な最小の幅(ピクセル) 150
modal Boolean trueを設定すると、モーダル(ダイアログ以外は操作できない状態)でウィンドウを開きます。 false
position (Object|
String|Array)

ダイアログを開く際にどこに表示するかを指定します。
(注)Ver. 1.10からString、Array型は、将来廃止予定です。
Object … 詳しくは、本家ドキュメントをご確認下さい。
String … 以下が指定可能。'center', 'left', 'right', 'top', 'bottom'
Array … String のキーワードを組み合わせた文字列か、[left, top] の形
例)['left', 'top']、[150, 200]

{my: "center", at:"center", of: window }
resizable Boolean デフォルト(true)で、ダイアログのリサイズ可能。 true
show (Number|
String|Object)
ダイアログを表示する時にどのようなアニメーションを使うか。
指定方法は、hideと同様です。
null
title String ダイアログのタイトルを指定します。デフォルトではダイアログになる要素のtitle属性(あれば)がタイトルになります。 null
width Number ピクセル数でダイアログの幅を指定します。 300

 

イベントに関するオプション

キー 内容
beforeClose ダイアログが閉じる直前に実行する関数。return false;で閉じるのをキャンセルできます。
close ダイアログが閉じた時に実行する関数。
create ダイアログが作られた時に実行する関数。
drag ダイアログがドラッグされている間に実行する関数。
dragstart ダイアログのドラッグが開始された時に実行する関数。
dragstop ダイアログのドラッグが終了した時に実行する関数。
focus ダイアログがフォーカスされた時に実行する関数。
open ダイアログが開いた時に実行する関数。
resize ダイアログがリサイズされている間に実行する関数
resizeStart ダイアログのリサイズが開始された時に実行する関数。
resizeStop ダイアログのリサイズが終了した時に実行する関数。

上記のプロパティにイベントハンドラ関数を指定できます。
イベントに関しては、イベントのページでさらに詳しく見ていきます。

追記情報

Ver. 1.10で、stack、zIndexオプションは廃止。
IE6~IE8では、delay や distance を指定すると、問題が発生する事象があります。このオプションを使う際はお気をつけください。管理人も体験。
参考URL:http://bugs.jqueryui.com/ticket/7359

buttonsプロパティ

上記の表でも見たように、ダイアログの下部にボタンを表示します。指定したオブジェクトのキーがボタンの文字に、値がそのボタンを押した際のコールバック関数になります。コールバック関数内のcontext(this)は、ダイアログ要素を、event.targetで、ボタン要素を取得できます。

またボタンを複数表示する場合、1つは左にもう1つは右に配置とか、左右に分けることができません。 CSSを利用して対応するしか無さそうです。(nth-child(x)など)

スポンサー