jQueryUIのdialog（ダイアログ）の優雅な使い方

Tweet

Category JavaScript / Tagged jQuery 2012/04/17

通常のマニュアルのとおりにjqueryuiのダイアログを使うと、画面上にダイアログ用の要素を仕込んでおく形になります。

例）

<script>
$(function() {
	$("#dialog").dialog();
});
</script>
↓↓ 初期状態で非表示にしておいたりして使う、ダイアログ用の要素
<div id="dialog" title="Basic dialog">
	<p>ダイアログの中身</p>
</div>

画面上に不要なdiv要素などを入れておきたくないときや、初期状態でダイアログ用の要素がないところでダイアログを出すときは、このようにします。

$(function(){
    $("#dialogButton").click(function(){
        /* 必要なときに、必要なdiv要素を生成して、利用する */
        var x = $("<div></div>").dialog({autoOpen:false});
        /* ダイアログの中身は、どこかから取ってきたり、べた書きしたり */
        x.html("ダイアログの中身");
        /* ダイアログのオプションを設定して */
        x.dialog("option", {
            title: "ダイアログのタイトル",
            width:600,
            height:400,
            buttons: {
                "必要ならボタン類も": function() { $(this).dialog("close"); },
                "追加できる": function() { $(this).dialog("close"); }
            }
        });
        /* ダイアログを開きます */
        x.dialog("open");
    });
});

jQueryUIのdialog（ダイアログ）の優雅な使い方 – デモ