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>