Accordion birden fazla panelin her seferinde bir tanesini göstermemize izin veren bir web kontrolüdür. CollapsiblePanel kontrolüne benzer bir yapısı vardır. Aynı anda sadece bir panelin genişlemesine izin verilir. Accordion, AccordionPane kontrolleri için geliştirilmiştir. Her bir AccordionPane kontrolü başlık ve içerik bilgileri için template(şablon) bulundururlar.
AutoSize:
3 çeşit AutoSize modunu destekler.
- None - Accordion kısıtlama olmadan büyüyüp küçülebilir.
- Limit - Accoridion belirtilen yükseklik limitinin üzerinde büyüyemez. Eğer içeriğin boyutu yükseklikten fazla ise bu durumda bir scroll bar(kayan çubuk) aracılığıyla içeriği görebilmek mümkündür.
- Fill - Accordion her zaman aynı yüksekliğinde kalır.
- SelectedIndex - Başlangıçta hangi AccordionPane gösterileceğini belirtir.
- HeaderCssClass - Başlık için hangi css sınıfının kullanılacağını belirtir. Bütün AccordionPane elemanları için tek bir css sınıfı belirtilebileceği gibi ayrı ayrı da belirlenebilir.
- HeaderSelectedCssClass - Seçili olan başlığın css sınıfı değeri girilir. Bütün AccordionPane elemanları için tek bir css sınıfı belirtilebileceği gibi ayrı ayrı da belirlenebilir.
- ContentCssClass - İçerik için kullanılacak css sınıfıdır. Bütün AccordionPane elemanları için tek bir css sınıfı belirtilebileceği gibi ayrı ayrı da belirlenebilir.
- FadeTransitions - Bool değer alır. True değerini alırsa geçişler arasında efekt uygular. False değerinde ise normal geçiş uygular. Varsayılan(default) eğeri false.
- TransitionDuration - Geçişler arasındaki süreyi belirtir. Milisaniye cinsinden değer alır. Varsayılan(default) değeri 500(yani 0,5 saniye).
- FramesPerSecond - Geçiş animasyonlarında saniye başına ne kadar frame düşeceğini belirtir. Varsayılan(default) değeri 15.
- RequireOpenedPane - Açık olan AccordionPane elemanına tıklandığında kapanıp kapanmayacağını belirliyor. Varsayılan(default) değeri true. True değeri alınca açık olan AccordionPane elemanının başlığına tıklanınca kapatmıyor fakat false olunca kapatıyor.
- SuppressHeaderPostbacks - Eğer başlığınızda bir bağlantı(link) varsa bu değer true olduğunda bağlantının çalışmasını önler. Varsayılan olarak false değerine sahiptir.
- Panes - AccordionPane kolleksiyonun bulunduğu kısımdır. AccordionPane elemanları ve özellikleri üzerindeki birtakım değişiklikler bu alan üzerinden yapılabilinir.
<style type="text/css">
.accordion {
width: 400px;
}
.accordionHeader {
border: 1px solid #2F4F4F;
color: white;
background-color: #2E4d7B;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
margin-top: 5px;
cursor: pointer;
}
.accordionHeaderSelected {
border: 1px solid #2F4F4F;
color: white;
background-color: #5078B3;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
margin-top: 5px;
cursor: pointer;
}
.accordionContent {
background-color: #D3DEEF;
border: 1px dashed #2F4F4F;
border-top: none;
padding: 5px;
padding-top: 10px;
}
</style>
<asp:Accordion ID="Accordion1" runat="server" ContentCssClass="accordionContent"
EnableTheming="False" FadeTransitions="True" FramesPerSecond="0" HeaderCssClass="accordionHeader"
HeaderSelectedCssClass="accordionHeaderSelected" Height="200px" Width="500px"
AutoSize="Limit" RequireOpenedPane="False" SuppressHeaderPostbacks="True">
<Panes>
<asp:AccordionPane ID="AccordionPane1" runat="server" ContentCssClass="" HeaderCssClass=""
BackColor="#99FFCC" BorderColor="#CC33FF" BorderStyle="Double" BorderWidth="2px"
Font-Bold="True" Font-Italic="True" Font-Names="AngsanaUPC" Font-Size="Medium"
ForeColor="Blue">
<Header>
Başlık1</Header>
<Content>
İçerik1</Content>
</asp:AccordionPane>
<asp:AccordionPane ID="AccordionPane2" runat="server" ContentCssClass="" HeaderCssClass="">
<Header>
Başlık2</Header>
<Content>
İçerik2</Content>
</asp:AccordionPane>
<asp:AccordionPane ID="AccordionPane3" runat="server" ContentCssClass="" HeaderCssClass="">
<Header>
Başlık3</Header>
<Content>
İçerik3</Content>
</asp:AccordionPane>
</Panes>
</asp:Accordion>
