Merhaba arkadaşlar bu yazımızda Accordion kontrolünün kullanımını göreceğiz.
Accordion kontrolü, içerisinde istediğimiz kadar AccordionPane bulunan ve bu Accordionpane ler arasında geçiş yapan bir kontroldür. Genel olarak kullanımı aşağıdaki şekildedir.
<!--AccordionPaneler Panes Tagının arasında tanımlanır. -->
<cc1:Accordion ID="Accordion1" runat="server">
<Panes>
<cc1:AccordionPane ID="Pane1" runat="server">
<Header>
<!--Başlık Header Tagları arasında tanımlanır-->
Asp.Net Kategorisi
</Header>
<Content>
<!--İçerik Content Tagları arasında tanımlanır-->
Asp.Net Kategorisiyle ilgili içerikler (İçerik)
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane ID="Pane2" runat="server">
<Header><!--Başlık Header Tagları arasında tanımlanır-->
C# Kategorisi
</Header>
<Content><!--İçerik Content Tagları arasında tanımlanır-->
C# Kategorisiyle ilgili içerikler (İçerik)
</Content>
</cc1:AccordionPane>
</Panes>
</cc1:Accordion>
Yukarıdaki örnekte gördüğünüz gibi Accordion1 kontrolümüzün içerisine 2 tane AccordionPane tanımlanmıştır. Bu tanımlama Panes Tagları içerisinde yapılmıştır. Ve her panenin Header ve Content özellikleri kendi taglarında belirtilmiştir.
Accordion kontrolünün birtakım özellikleri mevcut. Bunlara şöyle bir göz atalım.
Accordion kontrolü içerisinde hangi Pane nin görünmesini istiyorsak SelectedIndex özelliğine index numarasını belirliyoruz.
Panedeki tüm başlıkların aynı özellikte(renk,font vs..) olmasını istiyorsanız HeaderCssClass özelliğine Css sınıfını tanımlayabilirsiniz.
Panedeki tüm içeriklerin aynı özellikte(renk,font vs..) olmasını istiyorsanız ContentCssClass özelliğine Css sınıfını tanımlayabilirsiniz.
Panelerdeki geçişler arasında bir şeffaflık etkisi vermek istiyorsanız FadeTransitions özelliğini true yapabilirsiniz.
Geçiş efektlerinin hızını FramesPerSecond dan ayarlayabilirsiniz.
Çalıştırdığımız yukarıda gördüğünüz gibi başlıklar ve hangisi tıklanmışsa altında içeriği görünecektir.
Kolay Gelsin