AJAX ControlToolkit-Accordion 1

 

一、Accordion控制項簡介
Accordion控制項是能夠提供多個顯示面版的Web控制項，它一次只能顯示一個面版的內容。它有多個可摺疊的面版，且一次只能展開一個。Accordion內包含的panes是AccordionPane控制項列表，每個AccordionPane控制項內都有一個模版，模版內都有標題和內容。
Accordion控制項有三種AutoSize模式能適應各種不同的布局：
None：在Accordion控制項展開或收縮時不受限制，這會引起其他元素在頁面中向上或向下移動。
Limit：在Accordion控制項展開時不能超過控制項的最開始設定的高度，如果顯示內容太多則會出現捲軸。
Fill：Accordion控制項始終精確保持和高度設定一樣的尺寸。
Accordion控制項也能夠進行資料繫結，通過DataSource或 DataSourceID屬性指定一個資料來源，然後設定標題資料欄位（HeaderTemplate）和內容資料欄位（ContentTemplate）。

<ajaxToolkit:Accordion ID="MyAccordion" runat="server" SelectedIndex="0"
            HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected"
            ContentCssClass="accordionContent" FadeTransitions="false" FramesPerSecond="40"
            TransitionDuration="250" AutoSize="None" RequireOpenedPane="false" SuppressHeaderPostbacks="true">

SelectedIndex：已伸展開的AccordionPane控制項的索引號。
HeaderCssClass：作用於標題的CSS類名。它也可以指定給Accordion 控制項的HeaderCssClass屬性以此作為所有AccordionPanes控制項的預設屬性，或者直接指定給單獨AccordionPane控制項的HeaderCssClass屬性。
ContentCssClass：用於顯示內容的CSS類名。它也可以指定給Accordion 控制項的ContentCssClass屬性以此作為所有AccordionPanes控制項的預設屬性，或者直接指定給單獨AccordionPane控制項的ContentCssClass屬性。
FadeTransitions：為True時為漸層效果（在伸縮時顏色變淡，伸縮完後顏色恢複正常）,為false時是標準變換。
TransitionDuration：在選擇某一標題後伸展和收縮過渡動畫所持續的時間,單位為毫秒。
FramesPerSecond：用於伸展和收縮過渡動畫每秒所需要的幀數。
AutoSize：用於限制Accordion控制項展開的高度. AutoSize枚舉類型取值在簡介中已作過描述。
Panes：AccordionPane控制項的集合。
HeaderTemplate：標題模版，其中包含的標記用於進行資料繫結來顯示面版標題。
ContentTemplate：內容模版，其中包含的標記用於進行資料綁來顯示面版內容。
DataSource：指定資料來源，必須要調用DataBind()方法進行資料繫結。
DataSourceID：用資料來源的ID來指定一個資料來源。
DataMember：當使用DataSourceID 來指定資料來源時用於綁定的成員

RequireOpenedPane：當單擊面版標題時，是否可以關閉當前已開啟的面版。true不可以關閉當前，false可以關閉當前。

SuppressHeaderPostbacks：是否支援標題的Postback屬性。當你需要在標題中包含超級串連的時候很有用。
   <cc1:Accordion ID="Accordion1" runat="server">
           <Panes>
                <cc1:AccordionPane ID="AccordionPane1" runat="server">
                   <Header>ASP.NET AJAX</Header>
                   <Content>
                       ASP.NET AJAX　學習ASP.NET AJAX　學習ASP.NET AJAX　學習ASP.NET AJAX　ASP.NET AJAX　學習
                       學習ASP.NET AJAX　學習ASP.NET AJAX　學習ASP.NET AJAX　學習ASP.NET AJAX　學習ASP.NET AJAX　學習
                       ASP.NET AJAX　學習ASP.NET AJAX　學習ASP.NET AJAX　學習
                   </Content>
                </cc1:AccordionPane>
              <cc1:AccordionPane ID="AccordionPane2" runat="server">
                   <Header>Accordion</Header>
                   <Content>
                    Accordion　學習Accordion　學習Accordion　學習Accordion　學習Accordion　學習
                   Accordion　學習Accordion　學習Accordion　學習Accordion　學習Accordion　學習
                    Accordion　學習Accordion　學習Accordion　學習Accordion　學習Accordion　學習
                   </Content>
                </cc1:AccordionPane>
           </Panes>
        </cc1:Accordion>