intra-mart Accel Kaiden! / プログラミングガイド

第2版 2014-08-01

«  4.2.2.5. テキストボックスなどエレメントの表示モードと書式   ::   コンテンツ   ::   4.2.2.7. ドロップダウンリストの選択肢の作成方法と動的変更  »

4.2.2.6. ダイアログ

intra-mart Accel Kaiden! ではダイアログを作成するためのタグリブを用意しています。
本項では、ダイアログの作成について解説します。

4.2.2.6.1. ダイアログの作成

<k:dialog title="サンプルダイアログ" id="sampleDialog" modal="true">
  <%-- ダイアログの内容 --%>
</k:dialog>

コラム

ダイアログはガジェットブロック(<k:blockContainer>)として扱われます。
そのため、<k:gadgetContainer>内に配置する必要があります。
また、ガジェットブロック・TMtable・ダイアログそれぞれ内包させることはできません。

4.2.2.6.2. ダイアログの基本的な操作

以下にコード例を示します。

//ダイアログオブジェクトの取得
var dialog = KAIDEN.getGadget("ガジェットID").dialogs["sampleDialog"];

//ダイアログにボタンを登録
dialog.addButton("ボタン名", function() {
  //ボタン押下時の処理
});

//ダイアログを開く
dialog.open();

//ダイアログを閉じる
dialog.close();

コラム

dialog.addButton()で指定する関数について詳しくは、jQuery UIのDialogのbuttonオプションを参照してください。

4.2.2.6.3. ダイアログ内のみのバリデーション

<k:dialog>で作成されたダイアログは、その内容を自動的に<form>で囲みます。
そのため、 バリデーション にて解説した内容とほぼ同じように処理できます。
if (dialog.validate("バリデーションキー")) {
  //エラーがなかった場合の処理
}

バリデーション で解説した内容との違いは以下の点です。

  • エラーメッセージが別画面で表示されずに、自身のダイアログ内に表示されます。
../../../_images/dialog-validation.png

«  4.2.2.5. テキストボックスなどエレメントの表示モードと書式   ::   コンテンツ   ::   4.2.2.7. ドロップダウンリストの選択肢の作成方法と動的変更  »