ASP.NET Ajax Accordion Control

AJAX Control Toolkit의 Accordion, AccordionPane 컨트롤에 대한 설명입니다. 이 컨트롤에 대한 자세한 설명(영문)은 http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Accordion/Accordion.aspx에서 확인하실 수 있습니다. 이 정보는 해당 웹사이트의 내용을 참조하여 작성되었습니다.

1. 코드 구조 : 각 Accordion의 내용을 직접 입력하실 것이라면 <Panes>태그 내부에 <AccordionPane>을 생성해서 작성해주시면 되고, 만약 Data를 Binding하실 것이라면 <HeaderTemplate>, <ContentTemplate>를 작성하시면됩니다.
   <ajaxToolkit:Accordion ID="accordionID" runat="Server">
       <Panes>
           <ajaxToolkit:AccordionPane ID="accodionPane1" runat="server">
               <Header>제목1</Header>
               <Content>내용1</Content>
           </ajaxToolkit:AccordionPane>
           <ajaxToolkit:AccordionPane ID="accodionPane2" runat="server">
               <Header>제목2</Header>
               <Content>내용2</Content>
           </ajaxToolkit:AccordionPane>
           <ajaxToolkit:AccordionPane ID="accodionPane3" runat="server">
               <Header>제목3</Header>
               <Content>내용3</Content>
           </ajaxToolkit:AccordionPane>
       </Panes>
       <HeaderTemplate>DataBinding으로 Accordion을 사용할 때 구성해야할 제목부분</HeaderTemplate>
       <ContentTemplate>DataBinding으로 Accordion을 사용할 때 구성해야할 내용부분</ContentTemplate>
   </ajaxToolkit:Accordion>
   
2. Property 설명
• SelectedIndex – 시작시 기본적으로 펼쳐보일 패널의 Index번호
• HeaderCssClass – Header 부분에 적용될 CSS
• HeaderSelectedCssClass – 선택된 Header에 적용될 CSS
• ContentCssClass – 내용에 적용될 CSS
• FadeTransitions – Accordion의 내용이 전환될 때, Fade의 적용여부. IE6에서 테이블내부에 위치한 Accordion에 이 속성을 True로 설정하면 AccordionPane 사이의 공간에 영향을 미칠 수 있습니다. 또한 고해상도를 사용하는 시스템의 IE6에서 속도 저하 현상이 발견될 수 있습니다.
• TransitionDuration – 전환 시간(millisecond)
• FramesPerSecond – 전환 애니매이션의 초당 프레임수
• AutoSize – Accordion 컨트롤의 크기
• None – 제한없이 Accordion 컨트롤의 크기가 확장되거나 축소됩니다. 같은 페이지의 다른 컨트롤의 위치에 영향을 미칠 수 있습니다. 기본값으로 사용됩니다.
• Limit – Height 속성에 지정된 높이보다 커지지 않습니다. 이 높이보다 큰 내용이 위치한다면 스크롤이 생깁니다.
• Fill – Height 속성의 높이로 항상 고정합니다.
  * IE6과 7에서는 CSS에서 Max-height 속성을 지원하지 않기 때문에 Limit와 Fill은 동일하게 나타납니다.
• RequireOpenedPane – 모든 패널이 닫히지 않고, 반드시 하나의 패널은 열려있도록 합니다.
• SuppressHeaderPostbacks – True로 설정하면 Header내부에 위치한 모든 링크가 작동하는 것을 막습니다.
• Panes - AccordionPane의 컬렉션입니다.
• HeaderTemplate – Databinding로 Accordio Control을 사용할 때, Header의 내용을 위치하는 곳입니다.
• ContentTemplate - Databinding로 Accordio Control을 사용할 때, Header의 내용을 위치하는 곳입니다.
• DataSource - DataSource입니다.
• DataSourceID - DataSourceControl의 ID를 지정합니다. DataSource Property와 동시에 사용될 수 없습니다..
• DataMember - DataSourceID를 사용할 때 DataMember를 지정합니다. DataSourceID에 있는 List나 Table명이 지정됩니다.