第十一篇: Ajax Control Toolkit 控件包--1. Accordion (多层折叠效果）
1. 新建 Web窗体：Accordion.aspx
2. 添加一个 ScriptManager 控件
3. 添加一个 Accordion 控件 (注意：拖动 Accordion 控件到窗体中时，窗体是什么也显示的，只在源码里增加代码）
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<br />
<cc1:Accordion ID="Accordion1" runat="server">
</cc1:Accordion>
<br />
<br />
</div>
</form>
</body>
4. 在 <cc1:Accordion ID="Accordion1" runat="server"></cc1:Accordion> 中添加 <Panes></Panes>
5. 在 <Panes></Panes> 中拖几个AccordionPane进去（你需要几层就拖几个）
<cc1:Accordion ID="Accordion1" runat="server">
<Panes>
<cc1:AccordionPane ID="AccordionPane1" runat="server">
</cc1:AccordionPane>
<cc1:AccordionPane ID="AccordionPane2" runat="server">
</cc1:AccordionPane>
<cc1:AccordionPane ID="AccordionPane3" runat="server">
</cc1:AccordionPane>
</Panes>
</cc1:Accordion>
6. 给 AccordionPanel 添加代码:
<cc1:Accordion ID="Accordion1" runat="server">
<Panes>
<cc1:AccordionPane ID="AccordionPane1" runat="server">
<Header>这里是标题1</Header>
<Content>这里是标题1 的内容</Content>
</cc1:AccordionPane>
<cc1:AccordionPane ID="AccordionPane2" runat="server">
<Header>这里是标题2</Header>
<Content>
这里是标题2 的内容
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane ID="AccordionPane3" runat="server">
<Header>这里是标题3 </Header>
<Content>这里是标题3 的内容</Content>
</cc1:AccordionPane>
</Panes>
</cc1:Accordion>
7. OK,运行，已经可以用了，只是没有边框和顔色。
8. 现在要做的就是给标题加上边框的顔色。
① 打开 Accordion1 属性面板,设置大小, Height(300px) , Width(200px)
② 设置标题样式, HeaderCssClass(accordionHeader)
③ 设置内容样式, ContentCssClass(accordionContant)
8. 新建样式。
<style type="text/css">
.accordionHeader
{
color: #FFFF00;
background-color: #3399FF;
border: 1px solid #FF6600;
padding: 1px;
margin: 1px;
cursor: pointer;
}
.accordionContent
{
background-color: #FF9933;
padding: 1px;
margin: 1px;
}
</style>
9. OK,试试看吧 ！！！
10.常用属性解释
1、设置大小, Height(300px) , Width(200px)
2、设置标题样式, HeaderCssClass(accordionHeader)
3、设置内容样式, ContentCssClass(accordionContant)
4、设置淡出淡入,FadeTransitions="true/false"
5、选择索引,SelectedIndex="0/1/2/3/4"
6、自动大小(滚动条),AutoSize
7、TransitionDuration: 展开或者折叠一个AccordionPane的时间,以毫秒为单位计算。
8、FramesPerSecond: 展开或者折叠一个AccordionPane每秒钟的帧数。
9、Accordion的显示和排版方式。
Accordion 支持以下三种显示和排版方式：
None - Accordion 在其展开或者折叠过程中，将根据它内部显示的内容自动尺寸的变化，不受到任何的条件限制。 如果将 AutoSize 属性设置为 None 它将可能造成页面上的其它元素跟随 Accordion 的尺寸变化产生向上或者向下的移动。
Limit - 它将使得 Accordion 控件永远不能将它的尺寸扩展到规定的高度（Height）属性之外， 如果将 AutoSize 属性设置为 Limit，可能会造成在某种情况下，它里面的内容需要通过滚动条来滚动。
Fill - 它将使得 Accordion 控件永远都保持在其高度（Height）属性规定的高度。
10、RequireOpenedPane: 如果设置为true,如果展开一个accordionPane,它就不再会被折叠。
11、SupporessHeaderPostbakcs: 如果设置为True,那么可以避免当点击某个Pane时页面会发生提交事件,也就是是否显示页面整个刷新。
12、HeaderTemplate/ContentTemplate, DataSource ,DataSourceID, DataMember.这几个都是数据绑定时用到的,这篇文章不会涉及到。
浙公网安备 33010602011771号