wijdialog ウィジェットでは、ファイルの削除やごみ箱を空にするなどのイベントを確認する確認ダイアログを作成 できます。 Web サイト（http://demo.componentone.com/ASPNET/MVCExplorer/dialog/ModalConfirmation）
にアクセスし、コントロールエクスプローラの Dialog > Confirm Dialog サンプルのライブデモをご覧ください。
1. ASP.NET MVC Wijmo アプリケーションを作成します。
2. ソリューションエクスプローラで、Views → Shared フォルダをクリックし、_Layout.cshtml ファイルをダブ ルクリックしてそれを開きます。
3. ソリューションエクスプローラで、Views → Home フォルダをクリックし、Index.cshtml ファイルをダブルク リックしてそれを開きます。
4. 以下のマークアップを追加して、ボタン付きのダイアログウィンドウを作成します。
<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>
5. 以下のスクリプトを挿入して、ウィジェットを初期化します。
<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>
6. アプリケーションを実行して確認ウィンドウを表示します。 <p></p> タグの間にあるテキストを変更して確認 ダイアログウィンドウをカスタマイズできます。 確認ダイアログは、次の図のようになるはずです。
wijdialog のアニメーション化
wijdialog ウィジェットはアニメーションをサポートします。 Web サイト
（http://demo.componentone.com/ASPNET/MVCExplorer/dialog/Animation）にアクセスし、コントロールエ クスプローラの Dialog > Animation サンプルのライブデモをご覧ください。
1. ASP.NET MVC 3 Wijmo アプリケーションを作成します。
2. ソリューションエクスプローラで、Views → Shared フォルダを展開し、_Layout.cshtml をダブルクリックし てファイルを開きます。
3. 以下のマークアップをページの <body> タグ内に追加します。
<div>
<div id="dialog" title="ダイアログ">
<p>
ほら、すごいでしょう!</p>
</div>
</div>
4. 以下のスクリプトを追加して、ウィジェットを初期化し、アニメーションを追加します。
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
// $(":wijmo-wijdialog").wijdialog("destroy").remove();
$('#dialog').wijdialog({
autoOpen: true, show: 'blind', hide: 'explode',
collapsingAnimation: { animated: "puff", duration: 300, easing: "easeOutExpo" }, expandingAnimation: { animated: "bounce", duration: 300, easing: "easeOutExpo" }, width: 500
});
$('#expandEffectTypes').change(function () {
var ee = $("#expandEffectTypes option:selected").val();
$("#dialog").wijdialog("option", "expandingAnimation", { effect: ee, duration: 500 });
});
$('#collapseEffectTypes').change(function () {
var ce = $("#collapseEffectTypes option:selected").val();
$("#dialog").wijdialog("option", "collapsingAnimation", { effect: ce, duration: 500 });
})
$('#showEffectTypes').change(function () {
var ee = $("#showEffectTypes option:selected").val();
$("#dialog").wijdialog("option", "show", ee);
});
$('#hideEffectTypes').change(function () {
var ce = $("#hideEffectTypes option:selected").val();
$("#dialog").wijdialog("option", "hide", ce);
}) });
</script>
5. アプリケーションを実行してアニメーション効果を表示します。
Wijeditor
wijeditor ウィジェットを使用すると、任意の Web ページ上の HTML コンテンツをオーサリングおよび管理でき ます。この直感的な Microsoft Word スタイルのエディタでは、デザイン、ソースコード、または分割ビューの希望 するスタイルで編集できます。wijeditor ウィジェットは、jquery.wijmo.wijeditor.js ライブラリによって作成さ れます。
エディタを表示するビューの .cshtml ファイルを開きます。次のマークアップのように、<textarea> 要素を追加 します。
<textarea id="wijeditor" style="width: 756px; height: 475px;">
<h1>ComponentOne Studio でできること</h1>
<h2>あらゆるプラットフォーム要件に応えたい</h2>
<p>ComponentOne Studio は Windows フォーム、ASP.NET、WPF、Silverlight、Windows Phone の各プラットフォーム向けのコンポーネントを収録しています。どのプラットフォームにも業務アプリケーション で要求される機能を満たすコンポーネントをバランスよく揃えているので、デスクトップアプリケーションから Web アプリケーション、さらにモバイル開発まで高度な機能を持った業務アプリケーションを開発できます。
</p>
</textarea>
ここで、wijeditor ウィジェットを初期化する必要があります。これを行うには、次のスクリプトを .cshtml ファ イルに追加できます。
<script id="scriptInit" type="text/javascript">
$(document).ready(function () { $("#wijeditor").wijeditor();
});
</script>
プロジェクトを実行すると、エディタはこのような表示になります。
関連項目：
wijeditor の詳細については、次の外部リンクの１つをクリックして、Wijmo wiki マニュアルをご覧ください。
Wijeditor 依存関係
Wijeditor オプション
Wijeditor イベント
Wijeditor チュートリアル
以下のチュートリアルでは、エディタや編集するテキストを含む MVC 3 Wijmo プロジェクトの作成手順について 説明します。
このトピックでは、ASP.NET MVC 3 Wijmo アプリケーションを作成済みであることが前提となります。作成して いない場合は、「MVC Classic プロジェクトの作成」を参照してください。
手順 1：ビューの設定
この手順では、マークアップを追加し、ページをレンダリングして、エディタ内に表示されるテキストを追加します。
以下を実行します。
1. ソリューションエクスプローラで、Views | Shared フォルダを展開し、_Layout.cshtml をダブルクリックし て、ファイルを開きます。
2. 以下のマークアップをページの <body> タグ内に追加します。このマークアップはエディタのコンテンツを追加 します。
<div class="page">
<div id="header">
<div id="title">
<h2>概要</h2>
<div class="main demo">
<!-- デモマークアップの開始 -->
<textarea id="wijeditor" style="width: 756px; height: 475px;">
<h1>ComponentOne Studio でできること</h1>
<h2>あらゆるプラットフォーム要件に応えたい</h2>
<p>
ComponentOne Studio は Windows フォーム、ASP.NET、WPF、Silverlight、Windows Phone の 各プラットフォーム向けのコンポーネントを収録しています。どのプラットフォームにも業務アプリケーションで 要求される機能を満たすコンポーネントをバランスよく揃えているので、デスクトップアプリケーションから Web アプリケーション、さらにモバイル開発まで高度な機能を持った業務アプリケーションを開発できます。
</p>
</textarea>
<!-- デモマークアップの終了 -->
</div>
</div>
</div>
手順 2：ウィジェットの初期化
前の手順では、マークアップを追加し、エディタに表示されるコンテンツを追加しました。ここでは、jQuery スク リプトを追加し、wijeditor ウィジェットを使用して、テキストを表示および編集できます。
前の手順で追加した終了の </div> タグの後に、次の jQuery スクリプトを入力して、wijeditor ウィジェットを初 期化します。
<script id="scriptInit" type="text/javascript">
$(document).ready(function () { $("#wijeditor").wijeditor();
});
</script>
手順 3：プロジェクトの実行
［F5］を押して、アプリケーションを実行します。追加したテキストが wijeditor に表示されます。
何かテキストを選択し、エディタリボンにあるボタンをクリックしてフォーマットします。この例では、フォントが 変更され、背景色が追加されて、箇条書きリストが作成されました。