AjaxControltoolkit学习笔记—Accordion使用详解 (asp.net C#)

一．Accordion 是一个可以让你在你的 Web 页面方便地开发类似 Outlook 工具栏的 ASP.Net AJAX 控件。 它可以使得你的页面用户方便地展开或者关闭一系列页面元素的显示。

它有点类似多个 CollapsiblePanels 控件的组合。 但是在一个时间内，它只能限制你的页面用户只能展开其中的一个部分， 每一个 Accordion 控件包括若干个 AccordionPane 控件，AccordionPane 控件可以象 Panel 控件一样，用来作为其显示内容的载体。

另外，每一个 AccordionPane 又具有 Header 和 Content 部分，分别用于表示它的标题和其中的内容。

Accordion 控件具有保持其选中状态的功能，当页面发生提交的过程后，Accordion 保留其提交前选中的页面。
它支持以下三种显示和排版方式：

• None - Accordion 在其展开或者折叠过程中，将根据它内部显示的内容自动尺寸的变化，不受到任何的条件限制。 如果将 AutoSize 属性设置为 None 它将可能造成页面上的其它元素跟随 Accordion 的尺寸变化产生向上或者向下的移动。
• Limit - 它将使得 Accordion 控件永远不能将它的尺寸扩展到规定的高度（Height）属性之外， 如果将 AutoSize 属性设置为 Limit，可能会造成在某种情况下，它里面的内容需要通过滚动条来滚动。
• Fill - 它将使得 Accordion 控件永远都保持在其高度（Height）属性规定的高度。

Accordion控件也能够进行数据绑定，通过DataSource或 DataSourceID属性指定一个数据源，然后设置标题数据字段（HeaderTemplate）和内容数据字段（ContentTemplate）。

Accordion 同样可以象 DataGrid 一样进行数据绑定，它同样可以通过设置 DataSource 属性和 DataSourceID 属性， 并在 HeaderTemplate 和 ContentTemplate 属性中设置其绑定的模板即可将其进行数据绑定。

上面示例的 Accordion 将会被初始化成如下代码。斜体 属性为可选属性：

<ajaxToolkit:Accordion

    ID
="MyAccordion"

    runat="Server"

    SelectedIndex
="0"

    HeaderCssClass
="accordionHeader"

    HeaderSelectedCssClass
="accordionHeaderSelected"

    ContentCssClass
="accordionContent"

    AutoSize
="None"

    FadeTransitions
="true"

    TransitionDuration
="250"

    FramesPerSecond
="40"

    RequireOpenedPane
="false"

    SuppressHeaderPostbacks
="true">

    <Panes>



        <ajaxToolkit:AccordionPane

            HeaderCssClass
="accordionHeader"

            HeaderSelectedCssClass
="accordionHeaderSelected"

            ContentCssClass
="accordionContent">

            <Header> . . . </Header>

            <Content> . . . </Content>

        </ajaxToolkit:AccordionPane>        

        .

        .

        .

    </Panes>

            

    <HeaderTemplate>...</HeaderTemplate>


    <ContentTemplate>...</ContentTemplate>


</ajaxToolkit:Accordion>

• SelectedIndex - 当 Accordion 被初始化的 AccordionPane 页面 ID
• HeaderCssClass - 每一个 AccordionPane 标题的 Css 样式。在开发中，我们可以在这里将每一个 AccordionPane 的标题默认 Css 样式设置与此，另外还可以为每一个 AccordionPane 单独指定其 Css 样式。
• HeaderSelectedCssClass - 当某一个 AccordionPane 被选中的时候，其标题的 Css 样式。在开发中，我们可以在这里将每一个 AccordionPane 的标题默认 Css 样式设置与此，另外还可以为每一个 AccordionPane 单独指定其 Css 样式。
• ContentCssClass - 每一个 AccordionPane 内容的 Css 样式。在开发中，我们可以在这里将每一个 AccordionPane 的标题默认 Css 样式设置与此，另外还可以为每一个 AccordionPane 单独指定其 Css 样式。
• FadeTransitions - 如果设置为 True 那么在其选中的 AccordionPane 变化时将出现渐变的效果。
• TransitionDuration - 用毫秒表示的渐变效果显示的时间。
• AutoSize - 设置 Accordion 的显示和排版方式，你可以在上面的概述中找到它的描述。
• RequireOpenedPane - 如果设置为 True 将可以避免当前展开的 AccordionPane 被折叠。
• SuppressHeaderPostbacks - 如果设置为 True 将可以避免 AccordionPane 的标题部分被点击触发的页面提交事件。
• Panes - AccordionPane 的集合表示
• HeaderTemplate - 当采用数据绑定方式时的标题模板
• ContentTemplate - 当采用数据绑定方式时的内容模板
• DataSource - 数据源
• DataSourceID - 数据源控件 ID

Bound To XML:
    <asp:XmlDataSource ID="xml1" runat="server" DataFile="~/App_Data/CarsService.xml" XPath="/CarsService/make" />
    <ajaxToolkit:Accordion id="xmlBound" runat="server" DataSourceID="xml1" FadeTransitions="true"
        HeaderCssClass="accordionHeader" ContentCssClass="accordionContent">
        <HeaderTemplate>
            Header: <%# Eval("name") %>
        </HeaderTemplate>
        <ContentTemplate>
            Pane: <%# Eval("name") %>
        </ContentTemplate>
    </ajaxToolkit:Accordion>

 

Bound to dictionary:
    <ajaxToolkit:Accordion id="dictionaryBound" runat="server"
        HeaderCssClass="accordionHeader" ContentCssClass="accordionContent">
        <HeaderTemplate>
            Header: <%# Eval("Key") %>
        </HeaderTemplate>
        <ContentTemplate>
            Data: <%# Eval("Value") %>
        </ContentTemplate>
    </ajaxToolkit:Accordion>

最经用的格式

<ajaxToolkit:Accordion runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader"
ContentCssClass="accordionContent" FadeTransitions="false" FramesPerSecond="40"
TransitionDuration="250" AutoSize="None">
<Panes>
<ajaxToolkit:AccordionPane runat="server">
<Header>
<a href="＃" >1. Accordion</a></Header>
<Content>
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>