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 >

最终效果：