第十一篇: Ajax Control Toolkit 控件包--1. Accordion (多层折叠效果）-CSDN博客

1. 新建 Web窗体：Accordion.aspx
2. 添加一个 ScriptManager 控件
3. 添加一个 Accordion 控件 (注意：拖动 Accordion 控件到窗体中时，窗体是什么也显示的，只在源码里增加代码）

Code
<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进去（你需要几层就拖几个）

Code
        <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 添加代码:

Code
        <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. 新建样式。

Code
    <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.这几个都是数据绑定时用到的,这篇文章不会涉及到。

转载于:https://www.cnblogs.com/net123/archive/2010/01/27/1657710.html