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>中应该指定相应的绑定模板，举例如下：

 1 < 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          &nbsp; < 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 >

这样便可以实现与数据库的绑定。