Accordion(可折叠控件)控件使用
利用Accordion可以实现类似QQ的联系人归类的效果，它的常用属性如下：
声明Accordion控件时的常用属性标签
|
属性标签名 |
描 述 |
|
SelectedIndex |
该控件初次加载时展开的AccordionPane面板的索引值 |
|
HeaderCssClass |
该Accordion中包含的所有AccordionPane面板的标题区域所应用的CSS Class |
|
ContentCssClass |
该Accordion中包含的所有AccordionPane面板的内容区域所应用的CSS Class |
|
AutoSize |
在展开具有不同高度的AccordionPane面板时，该Accordion的总高度的变化方式。可选如下3个值： r None：该Accordion将随着当前展开的AccordionPane面板的高度自由伸长/缩短 r Limit：该Accordion将随着当前展开的AccordionPane面板的高度自由伸长/缩短，不过最高不会超过Accordion的Height属性设定值。若是其内容高度超过了Height属性设定值，则将自动显示滚动条 r 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面板时，该标签内将定义每个面板的正文区域中的内容模板 |
<Panes>标签中包含的若干个<ajaxToolkit:AccordionPane>标签，声明AccordionPane控件时所常用的属性标签如表10-3所示。
声明AccordionPane控件时的常用属性标签
|
属性标签名 |
描 述 |
|
HeaderCssClass |
该AccordionPane面板的标题区域所应用的CSS Class，将覆盖声明在Accordion中的同名属性 |
|
ContentCssClass |
该AccordionPane面板的内容区域所应用的CSS Class，将覆盖声明在Accordion中的同名属性 |
|
<Header> |
该标签内将定义此AccordionPane标题区域中的内容 |
|
<Content> |
该标签内将定义此AccordionPane正文区域中的内容 |
若是采用了数据绑定方式动态生成AccordionPane面板，则<HeaderTemplate>和<ContentTemplate>中应该指定相应的绑定模板，举例如下：
<html xmlns="http://www.w3.org/1999/xhtml" >2
<head runat="server">3
<title>无标题页</title>4
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />5
</head>6
<body>7
<form id="form1" runat="server">8
<div>9
<asp:ScriptManager ID="ScriptManager1" runat="server">10
</asp:ScriptManager>11
<ajaxToolkit:Accordion ID="Accordion1" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent" FadeTransitions="true" FramesPerSecond="40" TransitionDuration="250" AutoSize="None" DataSourceID="SqlDataSource1">12
<HeaderTemplate>13
<asp:Label ID="lbAuthor" Text='<%# Eval("t_Id") %>' runat="server"></asp:Label>14
</HeaderTemplate>15
<ContentTemplate>16
<asp:Label ID="lbAuthor" Text='<%# Eval("t_Content") %>' runat="server"></asp:Label>17
</ContentTemplate>18
</ajaxToolkit:Accordion>19
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TestConnectionString %>"20
SelectCommand="SELECT * FROM [test]"></asp:SqlDataSource>21
<br />22
<br />23
24
25
</div>26
</form>27
</body>28
</html>这样便可以实现与数据库的绑定。
