Yahoo! User Interface Library - Dialog

YUI Dialogとは

Panelの拡張で、Panelにフォームを扱うための機能が追加されています。そしてそれはXMLHttpRequestを通してフォームデータをサブミットすることが容易に行えます。

詳しくはhttp://developer.yahoo.com/yui/container/dialog/のオリジナルを読まれるのがよいと思います。

Dialogを使う前準備

必要なのは8つのファイルです。もちろんインストールは済ませておく必要があります。

<script type="text/javascript" src="your install path/yahoo-min.js"></script>
<script type="text/javascript" src="your install path/dom-min.js"></script>
<script type="text/javascript" src="your install path/event-min.js"></script>
<script type="text/javascript" src="your install path/animation-min.js"></script>
<script type="text/javascript" src="your install path/dragdrop-min.js"></script>
<script type="text/javascript" src="your install path/container-min.js"></script>
<script type="text/javascript" src="your install path/connection-min.js"></script>
<link rel="stylesheet" type="text/css" href="your install pathcontainer.css" />

AJAXフォーム

Dialogの設定項目

まず、下のようにボディー部分にフォームを書きます。

<div id="dialog1">
  <div class="hd">ダイアログヘッダー</div>
  <div class="bd">ボディー部分にフォームを書く
    <form method="post" action="/" onsubmit="return false;">
      <input type="text" name="textbox"/>
      <select name="select" multiple>
        <option value="select-1">select-1</option>
        <option value="select-2">select-2</option>
        <option value="select-3">select-3</option>
      </select>
      <input type="checkbox" name="check" value="1"/>1
    </form>
  </div>
</div>
...
...
var dialog1 = new YAHOO.widget.Dialog("dialog1",{
    constraintoviewport:true,
    modal: true,
    fixedcenter: true,
    visible: false
});

ボタンは"buttons" プロパティーで設定をします。配列で指定するので、ボタンを複数設定できます。

ボタンは以下の３つのプロパティーを取ります。

ハンドラーは通常なにもしなければ、以下のようにsubmitとcancelを指定するだけでよいと思います。

dialog1.cfg.queueProperty("buttons", [
    {text: "送信", handler: dialog1.submit, isDefault: true},
    {text: "キャンセル", handler: dialog1.cancel}
]);

ここでは、送信ボタンを押下したら、formの内容をalertで表示するようにしています。

var dialog1_submit = function(){
    var formData = this.getData();
    var buf = [];
    buf.push("text=");
    buf.push(formData.textbox);
    buf.push("\n");
    buf.push("select=");
    buf.push(formData.select);
    buf.push("\n");
    buf.push("check=");
    buf.push(formData.check);
    alert(buf.join(''));
    //this.submit(); でデータがPOSTされます。
};

var dialog1_cancel = function(){
    this.cancel();
}

dialog1.cfg.queueProperty("buttons", [
    {text: "送信", handler: dialog1_submit, isDefault: true},
    {text: "キャンセル", handler: dialog1_cancel}
]);

サンプル

ここをクリックするとDialogが表示されます