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>中应该指定相应的绑定模板,举例如下:
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
18
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
19
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
20
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
21
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
22
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
23
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
24
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
25
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
26
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
27
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
28
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
这样便可以实现与数据库的绑定。