今天自己要踏上開始學習AJAX ControlToolkit的旅程了。它提供了對許多已經封裝好的可以直接使用的控制項。今天自己學習了Accordion控制項，它是一個可摺疊的控制項。
(1)
Accordion控制項重要屬性介紹
a )
RequireOpenedPane:當單擊控制項的Pane中的header時，是否關閉開啟的Pane。當值為True時，則不關閉該Pane;當值為False時，則關閉該Pane。
b )
SuppressHeaderPostBacks:當在用戶端單擊控制項的Pane中的header中的元素時，是否阻止其進行回傳。當值為True時，則阻止其回傳；當值為False時，則不阻止其回傳。
c )
FadeTransitions:當值為True時，則使用淡入淡出的轉化效果；當值為False時，則使用標準的轉化效果。
d )
TransitionDuration:設定轉換的時間(或速度)。數值越小，轉換越快；數值越大，轉換越慢。
e )
FramesPerSecond:每秒的幀數。
f )
SelectedIndex:設定頁面初始匯入時顯示的Pane。值為0，為第一個；值為1，為第二個。
g )
HeaderCssClass:設定Pane中header的css樣式。
h )
ContentCssClass:設定Pane中Content的css樣式。
(2)Accordion控制項的使用
a )檔案－建立－項目，在建立項目對話方塊中，建立一個ASP.NET AJAX-Enabled Web Project。
b )在Default.aspx頁面上，拖放一個ScriptManager控制項(若不存在ScriptManager)。
c )在頁面中拖放一個Accordion。它會在頁面的"源"中添加這麼兩句話。
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1"%> //用於註冊該控制項包
//建立一個Accordion
<cc1:Accordion ID="Accordion1" runat="server">
</cc1:Accordion>
d)在Accordion中添加Pane。在Accordion中先添加一個Panes標記。然後可以拖放一個AccordionPane到Panes中或者直接在Panes中添加AccordionPane。得如下代碼：
<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>
e )在Accordion中添加css樣式，設定一些屬性值。最終代碼如下：
1 <cc1:Accordion ID="Accordion1" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent" SuppressHeaderPostbacks="true" RequireOpenedPane="false" runat="server">
2 <Panes>
3 <cc1:AccordionPane ID="AccordionPane1" runat="server">
4 <Header>ASP.NET AJAX</Header>
5 <Content>
6 ASP.NET AJAX 學習ASP.NET AJAX 學習ASP.NET AJAX 學習ASP.NET AJAX ASP.NET AJAX 學習
7 學習ASP.NET AJAX 學習ASP.NET AJAX 學習ASP.NET AJAX 學習ASP.NET AJAX 學習ASP.NET AJAX 學習
8 ASP.NET AJAX 學習ASP.NET AJAX 學習ASP.NET AJAX 學習
9 </Content>
10 </cc1:AccordionPane>
11 <cc1:AccordionPane ID="AccordionPane2" runat="server">
12 <Header>Accordion</Header>
13 <Content>
14 Accordion 學習Accordion 學習Accordion 學習Accordion 學習Accordion 學習
15 Accordion 學習Accordion 學習Accordion 學習Accordion 學習Accordion 學習
16 Accordion 學習Accordion 學習Accordion 學習Accordion 學習Accordion 學習
17 </Content>
18 </cc1:AccordionPane>
19 </Panes>
20 </cc1:Accordion>
最終效果：
