アニメーション中のアクションを無効にする (VB)
作成者: Christian Wenz
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
をページに追加し、ID
、TargetControlID
属性、必須の runat="server"
を追加します。
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Button1">
<Animations>
ノード内では、<OnClick>
はマウス クリックを処理するための適切な要素です。 ただし、アニメーション中にボタンをクリックすることもできます。 <EnableAction>
要素でそれを処理できます。 Enabled="false"
を設定すると、アニメーションの一部としてボタンが無効になります。 (ボタンと実際のアニメーションを無効にする) 複数の個別のアニメーションを使用しているため、単一のアニメーションを 1 つに結合するには <Parallel>
要素が必要です。 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" />
ただし、特定のシナリオでは、ボタンがフェードアウトし、アニメーションの最後に表示されないため、これは役に立ちません。
アニメーションが実行されるとすぐにボタンが無効になります (クリックしてフルサイズの画像を表示します