yazgelistir.com

doruk.net

Ana Sayfa

Hakkımızda

tumblr visitor stats

Kategoriler

	ASP.NET
	C# & VB.Net
	Visual Studio ve Araçlar
	Sharepoint
	.NET Framework
	SQL Server
	Mobil Teknolojileri
	Dynamics
	Silverlight
	İş Zekası
	Windows Mobile Embedded
	.Net Architect Advisor

0


	Çıkış Yap
	Üyelik Bilgilerimi Güncelle
	Seminerlerim
	Favorilerim
	Ajanım

Yazgeliştir


	Yazar olmak ister misiniz?
	Forumlar
	Kitap Önerileri
	Haberler
	Yazarlar
	İpuçları
	Görüşleriniz
	Hakkımızda

İstatistikler

		En son kayıt olan üye: onemsiz222 Şuanki online üyeler ( 3 ) : bcayan , alkanreklam , denizs

DorukNet

Ineta

YazilimciyizBiz


ASP.NET Kategorisi » Ajax Control Toolkit Kullanarak Açılır Kapanır Paneller Yapmak

Ajax Control Toolkit Kullanarak Açılır Kapanır Paneller Yapmak

Print Versiyonu

Yazar: Mehmet Ali ECER

Tarih:10.11.2007

Puan:3,25 (Oy Kullanan:8)

Okuma Sayısı:2170

Makaleyi İşaretle

Makale Özeti
Bu makelemizde Ajax Control Toolkit içerisindeki CollapsiblePanel kontrolünü kullanarak açılır kapanır panelleri oluşturmayı derinlemesine inceleyeceğiz.

Makale
Ajax Control Toolkit Kullanarak Açılır Kapanır Paneller Yapmak Bu makelemizde Ajax Control Toolkit içerisindeki CollapsiblePanel kontrolünü kullanarak açılır kapanır panelleri oluşturmayı derinlemesine inceleyeceğiz. Ajax Control Toolkit ile oluşturacağımız web uygularının içerisine açılır kapanır panelleri oluşturabiliriz. CollapsiblePanel kontrolünü kullanmak için öncelikle ASP.NET AJAX-Enabled Web Site oluşturmalıyız. Sayfa içerisinde açılır kapanır paneller kullanmak hem sayfanın şık görünmesini sağlayacak hem de kullanıcıların özellikle metin ağırlıklı sitelerde daha rahat sayfayı okuyabilmelerini sağlayacaktır. CollapsiblePanel özellikleri TargetControlID - Açılıp kapanmasını istediğiniz panel kontrolünü tutar. Aşağıdaki örnekte Panel1(içerisinde yazı ve resimin bulunduğu panel) TargetControlId özelliğine verilir. CollapsedSize - Kapanacak panelin pixel cinsinden ne kadarının kapanacağını-açılacağını tutar eğer hiç bir değer verilmezse panel size'ı otomatik olarak alınır. ExpandedSize - Kapanacak panelin pixel cinsinden ne kadarının açılıp-kapanacağını tutar eğer hiç bir değer verilmezse panel size'ı otomatik olarak alınır. Collapsed - Panel ilk oluşturulduğunda açıkmı kapanıkmı olduğunu tutar. True ise panel kapalı, False olduğunda panel açık olarak ekrana çıkar. AutoCollapse - Fare ile panel üzerine gelindiğinde otomatik olarak panelin kapanmasını sağlar. AutoExpand - Fare ile panel üzerine gelindiğinde otomatik olarak panelin açılmasını sağlar. ScrollContents - Panel içeriği panel den daha büyük ise otomatik olarak scroll bar konulmasını sağlar. ExpandControlID/CollapseControlID - Açılıp kapanacak olan paneli tutarlar. TextLabelID - Panelde özellik gösteren html kontrolünu tutar. Aşağıdaki örnekte Label1 (Show Details...)'dır CollapsedText - Panel kapalı olduğunda TextLabelId'nın metininin ne olacağını söyler. ExpandedText - Panel açık olduğunda TextLabelId'nın metininin ne olacağını söyler. ImageControlID - Panel başlığında panelin açılıp kapandığında değişecek olan imajı tutar. CollapsedImage - Panel kapalı olduğunda ImageControlId'nin hangi imaj olacağını söyler. ExpandedImage - Panel açık olduğunda ImageControlId'nin hangi imaj olacağını söyler. ExpandDirection - Açılış ve kapanışın yönünü belirti aşağı yukarı ya da sağdan sola şeklinde panel açılıp kapanabilir.. Aşağıda açılır kapanır panellerin bulunduğu bir sayfa gösterilmiştir: Statik olarak yani önceden yukarıdaki panellerin içeriğini bilerek yukarıdaki sayfaları yapmak sayfa kodumuz aşağıdaki gibi olmalıdır. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Collapsible.aspx.cs" Inherits="Collapsible" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> <link type="text/css" rel="stylesheet" href="AnimatedCollapsiblePanel.css" /> </head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:Panel ID="Panel2" runat="server" CssClass="collapsePanelHeader" Height="30px"> <div style="padding: 5px; cursor: pointer; vertical-align: middle;"> <div style="float: left;"> What is ASP.NET AJAX?</div> <div style="float: left; margin-left: 20px;"> <asp:Label ID="Label1" runat="server">(Show Details...)</asp:Label> </div> <div style="float: right; vertical-align: middle;"> <asp:ImageButton ID="Image1" runat="server" ImageUrl="~/images/expand_blue.jpg" AlternateText="(Show Details...)" /> </div> </div> </asp:Panel> <asp:Panel ID="Panel1" runat="server" CssClass="collapsePanel" Height="0"> <br /> <p> <asp:ImageButton ID="Image2" runat="server" ImageUrl="~/images/AJAX.gif" AlternateText="ASP.NET AJAX" ImageAlign="right" /> ASP.NET AJAX is a free framework for building a new generation of richer, more interactive, highly personalized cross-browser web applications. This new web development technology from Microsoft integrates cross-browser client script libraries with the ASP.NET 2.0 server-based development framework. In addition, ASP.NET AJAX offers you the same type of development platform for client-based web pages that ASP.NET offers for server-based pages. And because ASP.NET AJAX is an extension of ASP.NET, it is fully integrated with server-based services. ASP.NET AJAX makes it possible to easily take advantage of AJAX techniques on the web and enables you to create ASP.NET pages with a rich, responsive UI and server communication. However, AJAX isn't just for ASP.NET. You can take advantage of the rich client framework to easily build client-centric web applications that integrate with any backend data provider and run on most modern browsers. </p> </asp:Panel> <cc1:CollapsiblePanelExtender ID="cpeDemo" runat="Server" TargetControlID="Panel1" ExpandControlID="Panel2" CollapseControlID="Panel2" Collapsed="True" TextLabelID="Label1" ImageControlID="Image1" ExpandedText="(Hide Details...)" CollapsedText="(Show Details...)" ExpandedImage="~/images/collapse_blue.jpg" CollapsedImage="~/images/expand_blue.jpg" SuppressPostBack="true" SkinID="CollapsiblePanelDemo" /> </div> </form> </body> </html> Dinamik olarak çalışma zamanında da panel oluşturmak ve sayfada göstermek için sayfa içerisinde place holder konularak aşağıdaki kod yazılabilir. Panel p1 = new Panel(); Panel p2 = new Panel(); Literal l2 = new Literal(); Literal l1 = new Literal(); ImageButton image = new ImageButton(); Label lb = new Label(); lb.Text = "(Show Details...)"; lb.ID = "lb"; image.ID = "image"; image.ImageUrl = "~/images/expand_blue.jpg"; image.ImageAlign = ImageAlign.Right; l2.Text = "Panel İçeriği<br><br><br><br><br>"; l1.Text = "Panel Başlığı"; p1.ID = "p1"; p2.ID = "p2"; p1.CssClass = "collapsePanelHeader"; p2.CssClass = "collapsePanel"; p2.Controls.Add(l2); p1.Controls.Add(l1); p1.Controls.Add(lb); p1.Controls.Add(image); PlaceHolder1.Controls.Add(p1); PlaceHolder1.Controls.Add(p2);, AjaxControlToolkit.CollapsiblePanelExtender c = new CollapsiblePanelExtender(); c.TargetControlID = "p2"; c .ExpandControlID = "p1"; c.CollapseControlID = "p1"; c.Collapsed = false; c.SuppressPostBack = true; c.SkinID = "CollapsiblePanelDemo"; c.ImageControlID = "image"; c.ExpandedImage = "~/images/collapse_blue.jpg"; c.CollapsedImage = "~/images/expand_blue.jpg"; c.TextLabelID = "lb"; c.CollapsedText = "(Show Details...)"; c.ExpandedText = "(Hide Details...)"; PlaceHolder1.Controls.Add(c); Makale ya da kodlarda bulunan hatalar ya da sorularınız için mehmetaliecer@gmail.com adresinden bana ulaşabilirsiniz. İyi çalışmalar. Mehmet Ali ECER www.mehmetaliecer.com

Makaleyi nasıl buldunuz?

Makaleyi nasıl buldunuz?
Çok Kötü		Çok Yararlı

Görüşleriniz : (opsiyonel)

v2.4 Geri Bildirim (Feedback)

Site içerisinde yazılan tüm makalelerin yazım ve yayınlama hakkı aksi belirtilmediği sürece sadece yazarlara aittir.

Yazgelistir.Com Ekibi - 2006 - Yazgelistir.com