カスタム HTML コンテンツの作成

wijdialog ウィジェットはカスタム HTML コンテンツをサポートします。

ASP.NET MVC 5 Wijmo アプリケーションを作成します。
ソリューションエクスプローラで、Views → Shared フォルダを展開し、_Layout.cshtml をダブルクリックしてファイルを開きます。
依存関係をチェックして、プロジェクトが Wijmo の最新バージョンを参照していることを確認します。これらはページの <head> タグ内に配置されている必要があります。 Wijmo の最新バージョンの依存関係は http://wijmo.c1.grapecity.com/download/#wijmo-cdn で確認できます。

以下のマークアップをページの <body> タグ内に追加します。

ソースビュー	コードのコピー
<div> <div id="dialog" title="Custom HTML"> <h2>HTML コンテンツ</h2><p> カスタムの HTML コンテンツを追加することができます。 <br /> ここにテキストを入力します。 <input type="text" id="input1" /> <br/> 以下のボタンをクリックします。 <input type="button" value="Show" onclick="alert(document.getElementById('input1').value)" /> </div> </div>

ソースビュー

コードのコピー

<div>
        <div id="dialog" title="Custom HTML">
       <h2>HTML コンテンツ</h2><p> カスタムの HTML コンテンツを追加することができます。
    <br /> ここにテキストを入力します。 <input type="text" id="input1" />
    <br/> 以下のボタンをクリックします。 <input type="button" value="Show" onclick="alert(document.getElementById('input1').value)" />
        </div>
    </div>

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

ソースビュー	コードのコピー
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { // デバッガ // $(":wijmo-wijdialog").wijdialog("destroy").remove(); $('#dialog').wijdialog({ autoOpen: true, captionButtons: { refresh: { visible: false } } }); }); </script>

ソースビュー

コードのコピー

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        // デバッガ
        // $(":wijmo-wijdialog").wijdialog("destroy").remove();
        $('#dialog').wijdialog({
            autoOpen: true,
            captionButtons: {
                refresh: { visible: false }
            }
        });
    });
    </script>

アプリケーションを実行します。テキストを入力して〈表示〉をクリックします。ポップアップは、次の図のようになります。