AJAX ControlToolkit学习日志－Accordion

　　今天自己要踏上开始学习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>

最终效果：