wmismail Posted August 10, 2008 Share Posted August 10, 2008 Asp.Net - Ajax ResizableControl Kontrolü Merhaba arkadaşlar, Bu yazımda Asp.Net – Ajax da Resizable Kontrolünün kullanımını göreceğiz. Peki bu kontrol ne işe yarar. Adından da anlaşılacağı gibi sayfamızda istediğimiz yerin boyutuyla oynayabileceğiz. Ya biz zaten yapan kişiyiz her türlü oynarız demi J bizim amacımızda zaten ziyaretçiye oynatmak. Sayfamıza bir tane ResizableControl koyalım. İlk özellikleri şu şekilde karşımızda duracaktır. <cc1:ResizableControlExtender ID="ResizableControlExtender1" runat="server"> </cc1:ResizableControlExtender> Gelelim bu kontrolün ne gibi özellikleri var ve ne işe yarıyorlar. TargetControlId = Hangi panelin boyutlanmasını istiyorsak panelin Id adını bu özelliğe yazıyoruz. HandleCssClass = Boyutuyla oynayacağımız nesnenin kenarına koyduğumuz, boyutlandırma için kullanacağımız simgenin css ini yazacağımız sınıf. MinimumWidth ve Height = En düşük boyutlandırma boyutu Maximum Width ve Height = En büyük boyutlandırma boyutu OnClientResizeBegin = Boyutlandırmaya başladığımızda çalışmasını istediğimiz fonksiyon OnClientResizing = Boyutlandırma işlemi yapılırken çalışacak fonksiyon OnClientResize = Boyutlandırma bittiğinde çalışacak fonksiyon Sayfamıza bir adet panel, bir adet ResizableControl ve panelin içerisine bir adet image kontrolü ekleyelim. Image kontrolüne bir resim getirelim ve resmin Width ve Height özelliklerini 100% yapalım ki panelin boyutuna göre resmin genişliği ve yüksekliğide ayarlansın. ResizableControlünün özelliklerini şu şekilde değiştirelim. <cc1:ResizableControlExtender ID="ResizableControlExtender1" runat="server" TargetControlID="Panel1" //Boyutlandırılacak panel HandleCssClass="kose"> //Boyutlandırma işlemini yapacak simgenin durumu </cc1:ResizableControlExtender> Panelimiz ve içerisindeki image kontrolünün kodlarına bakalım. <asp:Panel ID="Panel1" runat="server" EnableTheming="True" Height="276px" Width="281px"> <asp:Image ID="Image1" Width="100%" Height="100%" runat="server" ImageUrl="~/Images/Ademx.jpg" /> </asp:Panel> Şimdi bu boyutlandırma için kullanacağımız simgenin özelikleri için bir style oluşturalım ve aşağıdakileri yazalım. <head runat="server"> <title>Adem AKTEPE</title> <style type="text/css"> .kose { width:15px; height:15px; background-image:url(kose.png); overflow:hidden; cursor:se-resize; } </style> </head> Sayfayı çalıştırdığımızda yukarıdaki gibi resmimiz panelimizin içinde açılacak ve sağ alt tarafına kose clasında tanımladığımız kose.png resmi gelecek. Mouse ile sürüklediğimizde panel genişleyecek ve haliyle resmimizde büyüyecektir. Kolay Gelsin. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.