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

</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

</div>
26

</form>
27

</body>
28

</html>

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

posted @ 2007-06-17 00:42 sunfishlu 阅读(4605) 评论(2) 收藏举报

刷新页面返回顶部

Accordion(可折叠控件)控件使用

公告