İstemci Tarafı Kod Kullanarak Bir Animasyonu Değiştirme (C#)

Christian Wenz tarafından

PDF’yi İndir

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. Animasyon, özel istemci tarafı JavaScript kodu kullanılarak da değiştirilebilir.

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. Animasyon, özel istemci tarafı JavaScript kodu kullanılarak da değiştirilebilir.

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>

Gerçek animasyon bir HTML düğmesiyle başlatılır:

<input type="button" id="Button1" runat="server" value="Launch Animation" />

Ardından , özniteliğini ve zorunluyu runat="server"sağlayarak IDTargetControlID öğesini sayfaya ekleyinAnimationExtender:

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

Denetim içinde AnimationExtender düğüm olmadığını <Animations> unutmayın. Özel JavaScript kodu, denetimle kullanılacak animasyonları sağlamak için kullanılır.

sunucusu API'sinde AnimationExtenderolduğu gibi, henüz genişleticiye animasyon atamanın kolay bir yolu yoktur. Ancak genişletici, çeşitli olaylarla (OnClick, OnLoadvb.) kaydedilen animasyonları okumak ve yazmak için çeşitli yöntemleri kullanıma sunar. İşte bazı örnekler:

• get_OnClick()
• set_OnClick()
• get_OnLoad()
• set_OnLoad()
• ...

İşlevlerin dönüş değerinin get_*() biçimi ve işlevlerin bağımsız değişkeninin set_*() biçimi, XML işaretlemesinin ne olacağının nesne gösterimini sağlayan bir JSON dizesidir. Şu anda, bir nesneyi geçirmenin bir yolu yoktur, ancak belirli bir animasyondan nesne okumak mümkündür (get_OnXXXBehavior() yöntemler).

Düğme tarafından tetiklenen bir animasyonu temsil eden ancak paneli yeniden boyutlandırarak ve aynı anda soluklaştırarak animasyonu gösteren bir JSON dizesi (sınırlandırma tırnak işaretleri olmadan ve düzgün biçimlendirilmeden) aşağıdadır:

{
 "AnimationName":"Sequence",
 "AnimationChildren":[
 {
 "AnimationName":"EnableAction",
 "Enabled":"false",
 "AnimationChildren":[]
 },
 {
 "AnimationName":"Parallel",
 "AnimationChildren":[
 {
 "AnimationName":"FadeOut",
 "Duration":"1.5",
 "Fps":"24",
 "AnimationTarget":"Panel1",
 "AnimationChildren":[]
 },
 {
 "AnimationName":"Resize",
 "Width":"1000",
 "Height":"150",
 "Unit":"px",
 "AnimationTarget":"Panel1",
 "AnimationChildren":[]
 }]
 }]
}

Aşağıdaki JavaScript kodu, geçerli genişleticinin OnClick animasyonu için bu JSON tanımlayıcısını atar ve çalıştırır:

<script type="text/javascript">
 function pageLoad() 
 {
 var ae = $find("ae");
 var animation = '{"AnimationName":"Sequence","AnimationChildren":[{"AnimationName":"EnableAction","Enabled":"false","AnimationChildren":[]},{"AnimationName":"Parallel","AnimationChildren":[{"AnimationName":"FadeOut","Duration":"1.5","Fps":"24","AnimationTarget":"Panel1","AnimationChildren":[]},{"AnimationName":"Resize","Width":"1000","Height":"150","Unit":"px","AnimationTarget":"Panel1","AnimationChildren":[]}]}]}';
 ae.set_OnClick(animation);
 ae.OnClick();
 }
</script>

Animasyon, fare tıklaması olmadan (ve çok az işaretlemeyle) hemen çalışır (Tam boyutlu görüntüyü görüntülemek için tıklayın)

ÖncekiSonraki