jQueryUI Dialogつづき

id:feiz:20081112のつづき

簡単な使い方

jQueryオブジェクトのdialogメソッドを呼ぶ。

  $("#my_dialog").dialog();

これでidがmy_dialogのボックスをリサイズできたりドラッグできたりするダイアログにしてぽんと表示できる。
引数にオブジェクトを渡してやる事で各種パラメーターを設定することもできる。

  $("#my_dialog").dialog({
    autoOpen: false,
    width: 400,
    height: 200,
    title: "ダイアログ",
    draggable: true,
    resizable: true,
    buttons: {
      "OK": function() {
        alert("OK!");
        $(this).dialog("close");
      },
      "キャンセル": function() {
        alert("ないわー");
        $(this).dialog("close");
      }
    }
  });

上記のコードだと「幅400高さ200、タイトル文字は「ダイアログ」、ドラッグ、リサイズ可、[OK]と[キャンセル]の2つのボタンがある」ダイアログが非表示で作成される。

以下、設定可能な値のうち分かりにくそうなのに関する解説

名前(デフォルト値)

説明

autoOpen(true)

trueだとdialog()メソッドを呼び出すのと同時にダイアログが表示される。falseだとdialog("open")を呼び出すまで隠れている

modal(false)

モーダルダイアログ（ダイアログが開いている間ほかの部分を操作できなくする）

buttons({})

ボタンの名前と動作を定義するオブジェクトを渡す。メソッド名でボタンが作られて、クリック時にそのメソッドが呼ばれる感じ？*1

position("center")

ダイアログの初期表示位置。

center, top, bottom, left, rightのいずれか、もしくは配列で複数を指定できる

closeOnEscape(true)

エスケープキー押下でダイアログを閉じる

overlay({})

モーダル時のoverlayレイヤーにスタイルを設定する。書き方はjQueryのcssメソッド参照

bgiframe(false)

Selectボックスに関するIE6のバグを回避するためにoverlayをiframeにする（未検証）

stack(true)

複数のダイアログを同時に表示したとき、フォーカスが移ったダイアログが最上位に上がってくる。falseの場合はOpenした順に重なり、重なり順序は不変

autoResize(true)

不明…

show, hide

これも不明･･･

その他

細かい調整を加えるときはCSSで指定するのが手っ取り早い。
例えば右上の×ボタンを消したいときは

.ui-dialog-titlebar-close { display: none; }

タイトルバー自体が要らないときは

.ui-dialog-titlebar { display: none; }

などなど。

こういうリッチなUIがスッと実現できるのはありがたい。
これからも活用していこう。

*1:用語的に正しいかイマイチ理解できてないです。要勉強