アニメーション中のアクションを無効にする (C#)

  • [アーティクル]

作成者: Christian Wenz

PDF のダウンロード

ASP.NET AJAX Control Toolkit の Animation コントロールは、単なるコントロールではなく、コントロールにアニメーションを追加するためのフレームワーク全体です。 また、マウスクリックなどのアクションもサポートしています。 ただし、マウス クリックでアニメーションが開始される場合は、アニメーション中にマウスクリックを無効にすることが望ましいです。

概要

ASP.NET AJAX Control Toolkit の Animation コントロールは、単なるコントロールではなく、コントロールにアニメーションを追加するためのフレームワーク全体です。 また、マウスクリックなどのアクションもサポートしています。 ただし、マウス クリックでアニメーションが開始される場合は、アニメーション中にマウスクリックを無効にすることが望ましいです。

手順

まず、ページに を ScriptManager 含めます。次に、ASP.NET AJAX ライブラリが読み込まれ、Control Toolkit を使用できるようになります。

<asp:ScriptManager ID="asm" runat="server" />

アニメーションは、次のような HTML ボタンに適用されます。

<input type="button" ID="Button1" runat="server" Value="Launch Animation" />

ボタンでポストバックを作成したくないので、Web コントロールの代わりに HTML コントロールが使用されることに注意してください。クライアント側のアニメーションを起動するだけです。

次に、 をページに追加AnimationExtenderし、 属性と必須runat="server"の を指定IDTargetControlIDします。

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Button1">

ノード内では <Animations> 、 <OnClick> はマウスクリックを処理する適切な要素です。 ただし、アニメーション中にボタンをクリックすることもできます。 要素は <EnableAction> 、その処理を行うことができます。 設定 Enabled="false" すると、アニメーションの一部としてボタンが無効になります。 複数の個別のアニメーション (ボタンと実際のアニメーションを無効にする) <Parallel> を使用しているため、要素は単一のアニメーションを 1 つに接着するために必要です。 の完全なマークアップを次に AnimationExtender示します。

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Button1">
 <Animations>
 <OnClick>
 <Parallel>
 <EnableAction Enabled="false" />
 <FadeOut Duration="1.5" Fps="24" />
 <Resize Width="1000" Height="150" Unit="px" />
 </Parallel>
 </OnClick>
 </Animations>
</ajaxToolkit:AnimationExtender>

また、リストの末尾にある次の XML 要素を使用して、アニメーションの後にボタンを再び有効にすることもできます。

<EnableAction Enabled="true" />

ただし、特定のシナリオでは、ボタンがフェードアウトし、アニメーションの最後に表示されないため、これは役に立ちません。

アニメーションが実行されるとすぐにボタンが無効になる

アニメーションが実行されるとすぐにボタンが無効になります (クリックするとフルサイズの画像が表示されます)

前へ次へ