Bir Listeden Animasyon Seçme (VB)

  • Makale

Christian Wenz tarafından

PDF’yi İndir

ASP.NET AJAX Denetim Araç Seti'ndeki Animasyon denetimi yalnızca bir denetim değil, bir denetime animasyon eklemek için bir çerçevenin tamamıdır. Çerçeve ayrıca programcının bazı JavaScript kodlarının değerlendirmesine bağlı olarak animasyon listesinden bir animasyon seçmesine de olanak tanır.

Genel Bakış

ASP.NET AJAX Denetim Araç Seti'ndeki Animasyon denetimi yalnızca bir denetim değil, bir denetime animasyon eklemek için bir çerçevenin tamamıdır. Çerçeve ayrıca programcının bazı JavaScript kodlarının değerlendirmesine bağlı olarak animasyon listesinden bir animasyon seçmesine de olanak tanır.

Adımlar

Her şeyden önce, sayfaya öğesini ScriptManager ekleyin; ardından ASP.NET AJAX kitaplığı yüklenerek Denetim Araç Seti'nin kullanılması mümkün olur:

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

Animasyon, aşağıdakine benzer bir metin paneline uygulanır:

<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>

Panelin ilişkili CSS sınıfında güzel bir arka plan rengi tanımlayın ve panel için sabit bir genişlik ayarlayın:

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

Ardından , özniteliğini ve zorunlu olan öğesini sağlayarak IDTargetControlID sayfasına ekleyin AnimationExtenderrunat="server":

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

Düğüm içinde <Animations> , sayfa tamamen yüklendikten sonra animasyonları çalıştırmak için kullanın <OnLoad> . Öğe, <Case> normal animasyonlardan biri yerine devreye girer. SelectScript özniteliğinin değeri değerlendirilir; dönüş değeri sayısal olmalıdır. Bu sayıya bağlı olarak, Case> içindeki <alt ifadelerden biri yürütülür. Örneğin, SelectScript 2 olarak değerlendirilirse, Denetim Araç Seti Büyük/Küçük Harf> içinde <üçüncü animasyonu çalıştırır (sayım 0'da başlar).

Aşağıdaki işaretleme üç alt gösterimi tanımlar: Genişliği yeniden boyutlandırma, yüksekliği yeniden boyutlandırma ve soluklaşma. Ardından JavaScript kodu (Math.floor(3 * Math.random())) 0 ile 2 arasında bir sayı seçip üç animasyondan birinin çalıştırılmasını sağlar:

<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>

Olası üç animasyondan biri: Panel genişler

Olası üç animasyondan biri: Panel genişler (Tam boyutlu görüntüyü görüntülemek için tıklayın)

ÖncekiSonraki