Ajax Animation Extender ile ilgili ilk olan fakat Ajax kontrolleri hakkında yazılarıma yukarıdaki Ajax Logosuyla veya sayfanın en üstündeki menülerden ulaşabilirsin.
Nelerde kullanılır ?
Bu tür bir eklentiyi web siteleri genelde sayfa merkezlerinde sayfa ilk açıldığında bir kampanya veya yenilik haberi için kullandıkları pencerelerde kullanabilirler.Bazı web uygulamalarında ise sayfa sağ veya sol kısımlardaki uyarı mesajlarını kullanıcılar tarafından kapatılmasını sağlayabilirler.Bu blogta bizde Ajax Animation Extender ile bu tür bir özellik hazırlayacağız.
Her blog yazılarındaki örneklerimi anlattığım gibi, bu örneğide adımlayarak yazıyorum.Buyrun...
Asp.Net Visual Studio 2010 ve yeni bir Web Form açın
ilk 2 adım klasik ve her ajax işleminde yaptığımız işlemler...
1- <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
2- Script Manager form tag içine alın.
3-İçerisinde bilgiler yer alacak bir alan yapalım.
<div id="Window" style="border: thin solid #C0C0C0; width: 250px; height: 150px;">
<!-- İlk 5 Tasarım adımı burada gerçeklecek -->
</div>
250x150 px ve kenarları solid border ile çizilen ve kapatılacak alanımız bu olacak, şimdi bu alan içinde Close Button (kapatma düğmesi) ni konumlandıralım.
4-Close Button (kapatma düğmesi) konumlandır.
<div align="right" style="background-color: #3366CC">
<asp:ImageButton ID="Close" runat="server" OnClientClick="return false;" ImageUrl="close.png" ToolTip="Kapat" />
</div>
Window kapatılacak pencerenin sağında bulunacak close.png isimli resmim asp:ImageButton ve Close=ID
ile tanımlıyorum.Sıra kapatılacak metin veya resim ile ilgili kısımda.Ben şunları yazdım fakat işin bu kısmı size ait dilediğiniz bir görsellik yapabilirsin.
5- Kapatılacak alanın içine metin veya resim ile dilediğiniz içeriği tasarla.
<div>
<b>Merhaba</b><br />
http://sistemdestekuzmani.blogspot.com<br />
Ajax Animation Extender ile Close Button yaptık.<br /><br /><br />
Serkan Şenyüz
</div>
Şu aşamada işin tasarım kısmı bitmiş oldu artık kapatılmaya hazır bir penceremiz var.Ajax Animation Extender yapılandırması burada başlıyor.Öncelikle ne elde ettik bakalım
Sağdaki resimdeki alanımız yukarıdaki adımları doğru olarak yerine getirdiğinizde alacağınız ekran çıktısıdır.
Şimdi kapatma işine sıra geldi.
6 Ajax Animation Extender pencere kapatma işlemi için yapılandır.
Çözümünüze Ajax Extender aracını soldaki Toolkit penceresinden sürükleyerek bırakabilirsiniz.Fakat yinede animasyon özelliği katmak için yazmanız gerekir.Close Button için yapılandırma şu şekilde olacaktır.Önce resmini gönderip sonra kod içeriğini anlatacağım...
Kod blogunda dikkat etmeniz gerekenler AnımationTarget- TargetControlID pencerenizin arkaya doğru paralel şekilde gizlenmesi için gerekli önemlidir.
Ajax Animation Extender aracının5 farklı animasyon referansı(Action) ve 20 farklı animation özelliği vardır bu örnekte 4 Action 2 Animasyon kullandık.İlerleyen Ajax uygulamalarında yeni Ajax Extender Animation bloglarında görüşmek üzere şimdilik bu kadar.
Bu Yazının Sponsorları
Yorumlar
Yorum Gönder