バージョン

igDialog のアニメーション

トピックの概要

目的

このトピックでは、オープンまたはクローズ時に、Ignite UI for MVC Dialog をアニメーション化する方法を示します。

前提条件

このトピックを理解するために、以下のトピックを参照することをお勧めします。

  • igDialog の概要: このトピックでは、igDialog コントロールの主な機能を紹介します。

  • igDialog の追加: このトピックでは、igDialog コントロールを Web ページに追加する方法について説明します。

このトピックの内容

このトピックは、以下のセクションで構成されます。

コントロールの構成の概要

igDialog を閉じるまたは開くときにアニメーション化するよう構成する必要があるプロパティ。

igDialog アニメーションの構成

ユーザー インターフェイスのエクスペリエンスを向上させるため、ダイアログを開くまたは閉じるときにアニメーションを作成できます。アニメーション プロパティの値は jQuery UI show()/hide() メソッドの任意のパラメーターが考えられます。パラメーターの詳細については、jQuery ドキュメントをご覧ください。

プロパティ設定

以下の表では、目的のアニメーション機能をプロパティ設定にマップしています。

目的: 使用するプロパティ: 設定の選択肢:
開くときに igDialog アニメーション化する openAnimation slide
閉じるときに igDialog アニメーション化する closeAnimation explode

jQuery の例

以下のコードは、jQuery で igDialog アニメーションを設定する方法を示しています。

JavaScript の場合:

$("#dialog").igDialog({
    openAnimation: “slide”
    closeAnimation: "explode"
});

MVC の例

以下のコードは、Dialog ラッパーを使用して igDialog アニメーションを設定する方法を示しています。

C# の場合:

<%= Html.Infragistics()
    .Dialog()
    .ContentID("dialog")
    .OpenAnimation("slide")
    .CloseAnimation("explode")
    .Render()
%>

関連コンテンツ

トピック

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

  • igDialog の概要: このトピックでは、igDialog コントロールの主な機能を紹介します。

  • igDialog の追加: このトピックでは、igDialog コントロールを Web ページに追加する方法について説明します。

オンラインで表示: GitHub