一覧からアニメーションを 1 つ選択する (VB)

作成者: Christian Wenz

PDF のダウンロード

ASP.NET AJAX Control Toolkit のアニメーション コントロールは、単なるコントロールではなく、コントロールにアニメーションを追加するためのフレームワーク全体です。 フレームワークを使用すると、プログラマは、一部の JavaScript コードの評価に応じて、アニメーションの一覧から 1 つのアニメーションを選択することもできます。

概要

ASP.NET AJAX Control Toolkit のアニメーション コントロールは、単なるコントロールではなく、コントロールにアニメーションを追加するためのフレームワーク全体です。 フレームワークを使用すると、プログラマは、一部の JavaScript コードの評価に応じて、アニメーションの一覧から 1 つのアニメーションを選択することもできます。

手順

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

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

アニメーションは、次のようなテキストのパネルに適用されます。

<asp:Panel ID="panelShadow" runat="server" CssClass="panelClass">
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
</asp:Panel>

パネルに関連付けられている CSS クラスで、適切な背景色を定義し、パネルの固定幅も設定します。

<style type="text/css">    
 .panelClass {background-color: lime; width: 300px;}
</style>

次に AnimationExtender をページに追加し、ID、TargetControlID の属性、必須の runat="server": を追加します

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

<Animations> ノード内で、ページが完全に読み込まれたらアニメーションを実行するように <OnLoad> を使用します。 通常のアニメーションの 1 つではなく、<Case> 要素が再生されます。 その SelectScript 属性の値が評価されます。戻り値は数値でなければなりません。 この数値に応じて、<Case> 内のサブアニメーションの 1 つが実行されます。 たとえば、SelectScript が 2 と評価された場合、Control Toolkit は <Case> 内の 3 番目のアニメーションを実行します (カウントは 0 から始まります)。

以下のマークアップでは、幅のサイズ変更、高さのサイズ変更、フェードアウトの 3 つのサブアニメーションを定義します。JavaScript コード (Math.floor(3 * Math.random())) により 0 から 2 の数値が選択されて、3 つのアニメーションのいずれかが実行されるようにします。

<ajaxToolkit:AnimationExtender ID="ae" runat="server"
 TargetControlID="Panel1">
 <Animations>
 <OnLoad>
 <Case SelectScript="Math.floor(3 * Math.random())">
 <Resize Width="1000" Unit="px" />
 <Resize Height="150" Unit="px" />
 <FadeOut Duration="1.5" Fps="24" />
 </Case>
 </OnLoad>
 </Animations>
</ajaxToolkit:AnimationExtender>

可能性がある 3 つのアニメーションの 1 つ: パネルの幅が広くなります (クリックするとフルサイズの画像が表示されます)

前へ次へ