Accordion控件

Accordion 是一个可以让你的页面显示多个Panel面板，用户方便地展开或者关闭一系列页面Panel。它有点类似多个 CollapsiblePanels 控件的组合。但是在同一时间内，只能展开其中的一个Panel，每一个 Accordion 控件包括若干个 AccordionPane 控件，AccordionPane 控件可以象 Panel 控件一样，用来作为其显示内容的载体。

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

Accordion 控件具有保持其选中状态的功能，当页面发生提交的过程后，Accordion 保留其提交前选中的页面。

属性标签名	描　　述
SelectedIndex	该控件初次加载时展开的AccordionPane面板的索引值
HeaderCssClass	该Accordion中包含的所有AccordionPane面板的标题区域所应用的CSS Class
ContentCssClass	该Accordion中包含的所有AccordionPane面板的内容区域所应用的CSS Class
AutoSize	在展开具有不同高度的AccordionPane面板时，该Accordion的总高度的变化方式。可选如下3个值： None：该Accordion将随着当前展开的AccordionPane面板的高度自由伸长/缩短 Limit：该Accordion将随着当前展开的AccordionPane面板的高度自由伸长/缩短，不过最高不会超过Accordion的Height属性设定值。若是其内容高度超过了Height属性设定值，则将自动显示滚动条 Fill：该Accordion的高度将固定为Height属性的设定值，不随当前展开的不同高度的AccordionPane面板而变化。若是某个AccordionPane的内容高度超过了Height属性设定值，则将自动显示滚动条
FadeTransitions	若该属性值设置为true，则在切换当前展开的AccordionPane面板时，将带有淡入淡出效果
TransitionDuration	展开/折叠一个AccordionPane面板的过程所花费的时间，单位为毫秒
FramesPerSecond	播放展开/折叠AccordionPane面板动画的每秒钟帧数
DataSourceID	页面中某个DataSource控件的ID，用于通过数据绑定自动生成AccordionPane面板
Panes	该标签内将包含一系列的<ajaxToolkit:AccordionPane>标签，即Accordion- Pane的声明，用来表示Accordion中包含的面板
HeaderTemplate	在使用数据绑定功能自动生成AccordionPane面板时，该标签内将定义每个面板的标题区域中的内容模板
ContentTemplate	在使用数据绑定功能自动生成AccordionPane面板时，该标签内将定义每个面板的正文区域中的内容模板

AutoSize支持以下三种显示和排版方式：

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

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

注意：

在 IE 6 和 IE 7 中 AutoSize 属性的 Limit 和 Fill 将呈现相同的形式，因为他们都不支持 max-height 属性。如果你将 Accordion 放在一个 Html的表格元素中，并设置 FadeTransitions 为 True 它将造成空白区域的出现。上面的例子在 IE 6 的浏览器中，如果客户端采用了 1600 x 1200 或者 1280 x 1024 的分辨率将可能会造成它展开或者折叠时候的速度变慢。

代码一：

1.新建Accordion.aspx。

2.双击工具箱中的“ScriptManager”在Accordion.aspx中添加ScriptManager。

3.添加Accordion控件。

Accordion.aspx代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Accordion.aspx.cs" Inherits="Accordion" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

.accordionContent

{

background-color: #D3DEEF;

border: 1px dashed #2F4F4F;

border-top: none;

padding: 5px;

padding-top: 10px;

}

</style>

</head>

<body>

<div>

<asp:ScriptManager ID="ScriptManager1" runat="server" />

</div>

<cc1:Accordion ID="Accordion1" runat="server" EnableViewState="false"

FadeTransitions="True" TransitionDuration="200" ContentCssClass="accordionContent" FramesPerSecond="30" AutoSize="None">

<Panes>

<cc1:AccordionPane runat="server">

<Header><a href="" onclick="return false;">Accordion介绍</a></Header>

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

Accordion 控件具有保持其选中状态的功能，当页面发生提交的过程后，Accordion 保留其提交前选中的页面。

</Content>

</cc1:AccordionPane>

<cc1:AccordionPane runat="server">

<Header><a href="" onclick="return false;">AutoSize 属性设置</a></Header>

AutoSize 属性可以用来控制 Accordion 控件的显示和排版的方式，它支持以下三种方式：<br />

None - Accordion 在其展开或者折叠过程中，将根据它内部显示的内容自动尺寸的变化，不受到任何的条件限制。如果将 AutoSize 属性设置为 None 它将可能造成页面上的其它元素跟随 Accordion 的尺寸变化产生向上或者向下的移动。<br />

Limit - 它将使得 Accordion 控件永远不能将它的尺寸扩展到规定的高度（Height）属性之外，如果将 AutoSize 属性设置为 Limit，可能会造成在某种情况下，它里面的内容需要通过滚动条来滚动。 <br />

Fill - 它将使得 Accordion 控件永远都保持在其高度（Height）属性规定的高度

</Content>

</cc1:AccordionPane>

<cc1:AccordionPane runat="server">

<Header><a href="" onclick="return false;">Accordion 存在的问题</a> </Header>

</Content>

</cc1:AccordionPane>

</Panes>

</cc1:Accordion>

</form>

</body>

</html>

按F5测试运行

代码二：