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

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

ダイアログ

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

ダイアログの作成

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

ノート

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

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

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

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

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

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

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

ノート

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

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

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

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

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

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