このトピックでは、オープンまたはクローズ時に、Ignite UI for MVC Dialog をアニメーション化する方法を示します。
このトピックを理解するために、以下のトピックを参照することをお勧めします。
igDialog の概要: このトピックでは、igDialog
コントロールの主な機能を紹介します。
igDialog の追加: このトピックでは、igDialog
コントロールを Web ページに追加する方法について説明します。
このトピックは、以下のセクションで構成されます。
igDialog
を閉じるまたは開くときにアニメーション化するよう構成する必要があるプロパティ。
ユーザー インターフェイスのエクスペリエンスを向上させるため、ダイアログを開くまたは閉じるときにアニメーションを作成できます。アニメーション プロパティの値は jQuery UI show()
/hide()
メソッドの任意のパラメーターが考えられます。パラメーターの詳細については、jQuery ドキュメントをご覧ください。
以下の表では、目的のアニメーション機能をプロパティ設定にマップしています。
目的: | 使用するプロパティ: | 設定の選択肢: |
---|---|---|
開くときに igDialog アニメーション化する | openAnimation | slide |
閉じるときに igDialog アニメーション化する | closeAnimation | explode |
以下のコードは、jQuery で igDialog
アニメーションを設定する方法を示しています。
JavaScript の場合:
$("#dialog").igDialog({
openAnimation: “slide”
closeAnimation: "explode"
});
以下のコードは、Dialog ラッパーを使用して igDialog
アニメーションを設定する方法を示しています。
C# の場合:
<%= Html.Infragistics()
.Dialog()
.ContentID("dialog")
.OpenAnimation("slide")
.CloseAnimation("explode")
.Render()
%>
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
igDialog の概要: このトピックでは、igDialog
コントロールの主な機能を紹介します。
igDialog の追加: このトピックでは、igDialog
コントロールを Web ページに追加する方法について説明します。
オンラインで表示: GitHub