AJAX ControlToolkitAccordion 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>

原文地址:https://www.cnblogs.com/bobofsj11/p/1514644.html