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.
Bu Makale Gerçekten Çok Yararlı Oldu.Teşekkür Ederim.Emeğinize Sağlık.
Sizden Bir Makale Yayınlamanızı istiyorum mümkünse rica edebilirmiyim?
Bende bir problem var…
DataBase imde alt kategoriler ve anaKategoriler için iki farklı tablodo kayıt tutuyorum.
bunları accordion panel içerisinde göstermeye çalıştım ama olmadı iç içe repeater datalis kullandım kullanmadıgım sey kalmadı kendı bılgı dagarcıgım cercevesınde ama yapamadım..
header ı ana kategorıden kayıt ve content o ana kategorının alt kategorılerını gostermek ıstıyorum ama yapamadım…
linq to sql ile yapmaya calısıyorum sihirbazıda kullandım yapamadım..yardımcı olabilirmisiniz?Eğer Olabilirseniz çok makbule geçer…
Teşekkür ederim.
Bu bahsettiğiniz içiçe yapıyı ben de zamanında yapmaya çalışmış ama başaramamıştım. Hatta o zamanlar internette çok derinlemesine bir araştırma yapmış yine bulamamıştım. Zaten Accordion kontrolünün yapısı itibariyle bu tarz içiçe accordion uyarlaması pek mümkün değil gibi. Tavsiyem internette iyice bir araştırmanız olur, belki birileri bir yolunu bulmuştur
İlginize Teşekkür Ederim…
Standart Olarak Kullandım…
Ne yazıkki bulamadım bende…
Merhaba. Makaleniz için Teşekkürler.
Bendede bir problem var. Yardımcı olursanız çok mutlu olurum.
Acordion’u databaseden doldurdum. Anakategori ve alt kategoriler var. Anakategoriler başlık kısmında alt kategoriler ise içerik kısmında dataliste doluyorlardı.Çok güzel ve çok şık bir yapı oluştu. Yani Ali Süleyman Topuz beyin yukarıda yapmaya çalıştığı şeyi yapmıştım.
Ancak İnternet Explorerdan başka operatörlerde tam olarak çalışmadı. Sadece başlık kısmı geliyor. İçerik kısmı yüklenmiyor. Dolayısıyla alt kategoriler ortada yok. Sinir edici bi durum. Şu anda onun yerine treeview kullanıyorum. Update panel koydum. Aynı şekilde oldu ancak açılıp kapanma efektini kaybettim.
Sorum şu. İçerik kısmının Explorerda dolupta diğer operatörlerde dolmama sebebi nedir? Ne olabilir?
Yardım ederseniz çok memnun olurum…
Selamlar,
Accordion kontrolü iç içe yapıyı desteklemiyor diye düşündüm. Bugüne kadar ne yapanı duydum, ne de bu konu ile ilgili makale, forum postu vs. görebildim. Bu sevdadan vazgeçmek lazım sanırsam
Accordion sadece içiçe olmayan klasik yapıdaki verilerin listelenmesini sağlıyor gibi.
Teşekkür ederim. Uzun süre önce açıklama satırı olarak bi kenarda beklettiğim kodların üzerinde tekrar çalıştım. Sorunun Css’ den kaynaklandığını anladım ve birkaç denemeden sonra Accordion kategori yapısını sorunsuz tüm browserlarda çalıştırabiliyorum.
Sanırım bu konuda bir makale yazmam gerekecek
Ancak bu kadar güzel anlatılabilirdi.Teşekkürler…
@Aynur Teşekkürler