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>

※上記は、構成を把握しやすくするため、設定される属性を抜き出したものです。 指定したオプションによっても、要素に設定される内容は変わります。

draggable, resizableのロードを忘れずに

draggable, resizable オプションを使用するには、対応する依存ファイルを正しくロードしてください。 正しくロードされない場合は、それぞれのオプションは機能しません。

逆に、draggable, resizable オプションを使用しない場合は、対応する依存ファイルのロードは必要ありません。

effect 使用時のロードを忘れずに

show, hide オプションで、effect を使用するには、対応する effect の依存ファイルを正しくロードしてください。 正しくロードされない場合は、それぞれのオプションは機能せず、ダイアログを閉じたり、開いたりできなくなります。(エラーも出ません)

例えば、"explode" effect を使用するには、次の依存ファイルのロードが必要です。

  • jquery.effects.core
  • jquery.effects.explode