Control Toolkit với Accordion

Mô tả Accordion : 

Accordion là một điều khiển web cho phép bạn cung cấp nhiều ô và hiển thị chúng một lần. Nó giống như có một vài CollapsiblePanels hợp chỉ có một có thể được mở rộng tại một thời điểm. Accordion được thực hiện như một điều khiển web có chứa các điều khiển web AccordionPane. Mỗi kiểm soát AccordionPane có một khuôn mẫu cho Header của nó và nội dung của nó. Chúng tôi theo dõi các cửa sổ lựa chọn do đó, nó vẫn sẽ hiện trên postbacks.

 

Nó cũng hỗ trợ ba chế độ AutoSize để nó có thể phù hợp trong một loạt các bố cục.

 

Các Accordion được viết bằng cách sử dụng một bộ mở rộng giống như hầu hết các độn khác trong AJAX Control Toolkit. mở rộng dự kiến đầu vào của nó trong một hệ thống phân cấp rất cụ thể của các yếu tố container (như divs), do đó, Accordion và các điều khiển web AccordionPane được sử dụng để tạo ra các đầu vào dự kiến mở rộng này. mở rộng cũng có thể được sử dụng ngày của riêng mình nếu bạn cung cấp cho nó thích hợp đầu vào.

 

Các Accordion cũng có thể được databound. Đơn giản chỉ cần xác định một nguồn dữ liệu thông qua các thuộc tính DataSource hoặc DataSourceID và sau đó cài đặt các mục dữ liệu của bạn trong các thuộc tính HeaderTemplate và ContentTemplate. 

 

Accordion Properties:

Việc kiểm soát trên được khởi tạo với mã này. Các thuộc tính nghiêng là tùy chọn:

<ajaxToolkit:Accordion
      ID="MyAccordion"
      runat="Server"
      SelectedIndex="0"
      HeaderCssClass="accordionHeader"
      HeaderSelectedCssClass="accordionHeaderSelected"
      ContentCssClass="accordionContent"
      AutoSize="None"
      FadeTransitions="true"
      TransitionDuration="250"
      FramesPerSecond="40"
      RequireOpenedPane="false"
      SuppressHeaderPostbacks="true">
      <Panes>
           <ajaxToolkit:AccordionPane
                   HeaderCssClass="accordionHeader"
                   HeaderSelectedCssClass="accordionHeaderSelected"
                   ContentCssClass="accordionContent">
                  <Header> . . . </Header>
                  <Content> . . . </Content>
           </ajaxToolkit:AccordionPane> 
            .
            .
            .
       </Panes> 
       <HeaderTemplate>...</HeaderTemplate>
       <ContentTemplate>...</ContentTemplate>
</ajaxToolkit:Accordion>