Not
Bu sayfaya erişim yetkilendirme gerektiriyor. Oturum açmayı veya dizinleri değiştirmeyi deneyebilirsiniz.
Bu sayfaya erişim yetkilendirme gerektiriyor. Dizinleri değiştirmeyi deneyebilirsiniz.
Christian Wenz tarafından
ASP.NET AJAX Denetim Araç Seti'ndeki Animasyon denetimi yalnızca bir denetim değil, denetime animasyon eklemek için bir çerçevenin tamamıdır. Animasyonun çalıştırılıp çalıştırılmayacağı, javascript kodu biçimindeki bir koşula da bağlı olabilir.
Genel Bakış
ASP.NET AJAX Denetim Araç Seti'ndeki Animasyon denetimi yalnızca bir denetim değil, denetime animasyon eklemek için bir çerçevenin tamamıdır. Animasyonun çalıştırılıp çalıştırılmayacağı, javascript kodu biçimindeki bir koşula da bağlı olabilir.
Adımlar
Her şeyden önce, sayfasına öğesini ScriptManager ekleyin; ardından ASP.NET AJAX kitaplığı yüklenerek Denetim Araç Seti'nin kullanılmasını mümkün hale getirir:
<asp:ScriptManager ID="asm" runat="server" />
Animasyon, aşağıdaki gibi görünen 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 ayrıca 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 zorunluluğu sağlayarak IDTargetControlID öğesini sayfaya 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, <Condition> normal animasyonlardan biri yerine devreye girer. Özniteliğin değeri ConditionScript olarak sağlanan JavaScript kodu çalışma zamanında yürütülür. True olarak değerlendirilirse animasyon yürütülür, aksi takdirde yürütülür. Aşağıdaki işaretleme, her biri rastgele olarak vakaların %50'sinde yürütülen iki animasyon sağlar. içinde <OnLoad>yalnızca bir animasyon olabileceğinden, iki <Condition> animasyon öğesi kullanılarak <Sequence> birleştirilir:
<ajaxToolkit:AnimationExtender ID="ae" runat="server"
TargetControlID="Panel1">
<Animations>
<OnLoad>
<Sequence>
<Condition ConditionScript="Math.random() 0.5">
<Resize Width="1000" Height="150" Unit="px" />
</Condition>
<Condition ConditionScript="Math.random() 0.5">
<FadeOut Duration="1.5" Fps="24" />
</Condition>
</Sequence>
</OnLoad>
</Animations>
</ajaxToolkit:AnimationExtender>
Öznitelikteki küçüktür işaretinin ConditionScript ()< kaçış işareti () olması gerektiğini unutmayın. Bu betiği çalıştırdığınızda, animasyon çalıştırılmaz ya da iki betiklerden biri çalıştırılmaz ya da her ikisi de çalışır.
Panel yeniden boyutlandırılmadan soluklaştırılıyor, bu nedenle ikinci animasyon çalışıyor, ilki çalışmıyor (Tam boyutlu görüntüyü görüntülemek için tıklayın)
