開発メモ,主に補足by子連れ親父プログラマー

2010-10-26

jQuery UIのDialogで、開くウインドウの中身を別ファイルにしたい

ついでなので。
こちらもサンプルソースを見ると、
HTMLはただdialogってidでdiv作っておいて、
<div id="dialog" title="Basic dialog">
  <p>ここに中身</p>
</div>
JavaScript側はこんだけ。
$(function() {
  $( "#dialog" ).dialog();
});
そっけないなあ。
ドキュメントのoptionsとか見ても皆目見当が付かない。
ただやはりこれも同じHTMLのソース(テンプレ)の中にダイアログ用のソースをどんどん書いていくと、ごちゃごちゃになってくる。
1個、2個くらいならいいとは思うが。
ということで調べてみると、

Loading a page into a dialog

こういう記事があり、やり方はあることが分かった。

jqueryでまず一発 div を生成し、そこに .load() で別ファイルを読み込んで、そいつに dialog のオプションを設定し、そして .open() すれ、ってことらしい。

例として、id="add" のなにがしをクリックした場合として、
$('#add').click(function() {
  $('<div></div>')
    .load('add.php')
    .dialog({
      modal: true,
      autoOpen: false,
      buttons: {
        "登録": function() {
          $(this).dialog("close");
        }
      }
    })
    .dialog('open');
  return false;
});
こんな感じでしょうかー。

このブログを検索

Powered by Blogger.

ラベル

php (17) jQuery (13) OSX (10) MySQL (8) Javascript (7) Postgres (7) port (7) apache (6) Java (3) Smarty (2) html (2) pear (2) FCKEditor (1) XAMPP (1) css (1) git (1) perl (1) ruby (1)

Facebookバナー