AJAX Control Toolkit ile gelen en kullanışlı kontrollerden birisi Accordion kontrolüdür. Web sayfalarının genellikle Sık Sorulan Sorular veya Yardım
gibi bölümlerinde sıra sıra dizilmiş başlıklar bulunur ve kullanıcı
hangi başlığa tıklarsa dinamik olarak o maddenin altındaki içerik
görünür hale gelir. Diğer başlıkların içerikleri ise saklı durumda
bulunur. Aslında uzun içeriklerin listeleneceği web sayfalarında hem
kaplayacağı az alan açısından hem de görsel olarak sayfamızı daha
kullanışlı hale getirecek bir kontrol Accordion. Başlık ve içerik
olarak iki ana kısımdan oluşan AccordionPane'leri taşıyan Accordion kontrolünü CSS kullanarak zengin ve göze hoş gelen tasarımlar ortaya çıkarabiliriz. Accordion'un HeaderCssClass, HeaderSelectedCssClass ve ContentCssClass
özelliklerinde önceden hazırladığımız CSS sınıfları (class)
tanımlayarak bu işlemleri basit halde gerçekleştirebiliriz.
Hazırladığım basit bir örnekle önce CSS tanımlamalarını, ardından da
sayfamızdaki Accordion kontrolünü nasıl tanımlayacağımıza bakalım.
Projemize ekleyeceğimiz style.css
dosyasında başlık, seçilen maddenin başlığı ve içerik kısımlarının
nasıl görüntüleneceğini belirliyorum. Göze hoş gelmesi için bir grafik
programında hazırladığım gradient geçişleri olan 3 tane gif dosyasını
bu alanların zeminlerinde kullanıyorum.
style.css
.baslik {
font-size: 13px; font-family: Verdana; font-weight: bold; height:18px;
text-indent: 5px; padding: 1px; margin-top: 1px; cursor: pointer;
border-right: #ffcd70 1px solid; border-top: #ffcd70 1px solid;
border-left: #ffcd70 1px solid; border-bottom: #ffcd70 1px solid;
background-image: url(images/baslik_zemin.gif);
background-position: top; background-repeat: repeat-x;
}
.secilenBaslik {
font-size: 13px; font-family: Verdana; font-weight: bold; height:18px;
text-indent: 5px; padding: 1px; margin-top: 1px;
border-right: #ffcd70 1px solid; border-top: #ffcd70 1px solid;
border-left: #ffcd70 1px solid; border-bottom: #ffcd70 1px solid;
background-image: url(images/secilen_baslik_zemin.gif);
background-position: top; background-repeat: repeat-x;
}
.icerik {
font-size: 11px; font-family: Verdana; padding: 5px;
border-right: #ffcd70 1px solid; border-top: none;
border-left: #ffcd70 1px solid; border-bottom: #ffcd70 1px solid;
background-image: url(images/icerik_zemin.gif);
background-position: left; background-repeat: repeat-y;
}
Açık olmayan başlıkların üzerine gelindiğinde farenin simgesini değiştirmek için başlık sınıfında cursor: pointer
tanımlamasını yapmak daha güzel olacaktır. Gelelim sayfamızın
tasarımına. CSS dosyamıza link vereceğimiz bir aspx dosyasında
Accordion'un yukarıda belirttiğimiz özelliklerini CSS dosyasında
tanımladığımız sınıflarla dolduruyoruz. Geriye kalan tek şey ise
AccordionPane'lerin başlık ve içeriklerin doldurmak olacaktır.
Default.aspx
<head runat="server">
<title>Accordion'un CSS ile Etkin Kullanımı</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager ID="ScriptManager1" runat="server" />
<ajaxToolkit:Accordion ID="Accordion1" runat="server" HeaderCssClass="baslik"
HeaderSelectedCssClass="secilenBaslik" ContentCssClass="icerik" Width="185">
<Panes>
<ajaxToolkit:AccordionPane ID="pane1" runat="server">
<Header>Başlık-1</Header>
<Content>İçerik-1</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="pane2" runat="server">
<Header>Başlık-2</Header>
<Content>İçerik-2</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="pane3" runat="server">
<Header>Başlık-3</Header>
<Content>İçerik-3</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>
</form>
</body>
Sayfayı çalıştırdığımızda Accordion kontrolünün görünümü yandaki gibi olacaktır. Burada Accordion panelerinin genişlik ve yüksekliklerine göre zemin resimlerini hazırlamamız görünümün düzgün olmasındaki en önemli etkenlerden biri olacaktır.