確認ダイアログの作成

wijdialog ウィジェットでは、ファイルの削除やごみ箱を空にするなどのイベントを確認する確認ダイアログを作成できます。 Web サイト ( http://demo.componentone.com/ASPNET/MVCExplorer/dialog/ModalConfirmation ) にアクセスし、コントロールエクスプローラの Dialog > Confirm Dialog サンプルのライブデモをご覧ください。.

ASP.NET MVC Wijmo アプリケーションを作成します。
ソリューションエクスプローラで、Views → Shared フォルダをクリックし、_Layout.cshtml ファイルをダブルクリックしてそれを開きます。
ソリューションエクスプローラで、Views → Home フォルダをクリックし、Index.cshtml ファイルをダブルクリックしてそれを開きます。

以下のマークアップを追加して、ボタン付きのダイアログウィンドウを作成します。

ソースビュー	コードのコピー
<div> <input type="button" value="確認" onclick="$('#dialog-confirm').wijdialog('open')" /> <div id="dialog-confirm" title="ごみ箱を空にする"> <p> <span class="ui-icon ui-icon-alert"></span>これらの項目を完全に削除しますか？ </div> </div>

ソースビュー

コードのコピー

<div>
        <input type="button" value="確認" onclick="$('#dialog-confirm').wijdialog('open')" />
        <div id="dialog-confirm" title="ごみ箱を空にする">
            <p>
                <span class="ui-icon ui-icon-alert"></span>これらの項目を完全に削除しますか？
        </div>
    </div>

以下のスクリプトを挿入して、ウィジェットを初期化します。

ソースビュー	コードのコピー
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { /$(":wijmo-wijdialog").wijdialog("destroy").remove(); $("#dialog-confirm").wijdialog({ autoOpen: true, resizable: false, height: 180, width: 400, modal: true, buttons: { "削除": function () { $(this).wijdialog("close"); }, キャンセル: function () { $(this).wijdialog("close"); } } }); }); </script>

ソースビュー

コードのコピー

<script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            /$(":wijmo-wijdialog").wijdialog("destroy").remove();
            $("#dialog-confirm").wijdialog({
                autoOpen: true,
                resizable: false,
                height: 180,
                width: 400,
                modal: true,
                buttons: {
                    "削除": function () {
                        $(this).wijdialog("close");
                    },
                    キャンセル: function () {
                        $(this).wijdialog("close");
                    }
                }
            });
        });
    </script>

アプリケーションを実行して確認ウィンドウを表示します。 <p></p> タグの間にあるテキストを変更して確認ダイアログウィンドウをカスタマイズできます。確認ダイアログは、次の図のようになるはずです。