AjaxControlToolkit CollapsiblePanelExtender用法

CollapsiblePanelExtender主要用于实现展开和收缩效果

具体用法如下：

在界面中增加控件，如下图：

源码如下：注意背景为黄色的部分。

<head runat="server">
    <title>无标题页</title>
    <style>
    .collapsePanel {

            background-color:white;
        }

       .collapsePanelHeader{
            width:100%;
            height:30px;
            background:#666;
            color:#11BBBB;
            font-weight:bold;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <br />
            <asp:Panel ID="Panel1" runat="server" Height="0px" Width="125px" CssClass="collapsePanelHeader">
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label></asp:Panel>
            <br />
            <div>
                <asp:Panel ID="Panel2" runat="server" Width="125px" BackColor="AliceBlue">
                    sdfads<br />
                    sdfads<br />
                    sdfads<br />
                    sdfads<br />
                    sdfads<br />
                    sdfads<br />
                </asp:Panel>
            </div>

             测试页面下的内容
            <cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" TargetControlID="Panel2"
                CollapseControlID="Panel1" ExpandControlID="Panel1" ExpandedText="隐藏内容……" CollapsedText="显示内容……"
                AutoExpand="false" AutoCollapse="false" ScrollContents="false" Collapsed="false"
                TextLabelID="Label1" ExpandDirection="Vertical">
            </cc1:CollapsiblePanelExtender>
        </div>
    </form>

这样就ok了，运行时单击Label1试一下效果.

例子下载地址：https://files.cnblogs.com/scottckt/AjaxCPE.rar

说明：

TargetControlID：被控制的panel

CollapsedSize：目标收缩后的大小

ExpandedSize：目标展开后的大小

Collapsed：true时为展开，false时为收缩

Scroll Contents:值为true时，且目标panel的大小小于内容的大小时自动添加滚动条。

ExpandControlID/CollapseControlID：点击这些控件会展开或收缩目标panel。

TextLabelID：指示一个label控件的ID，该label的值会根据目标panel的状态而改变。

CollapsedText：设置当目标panel为收缩时TextLabelID所指示的lable的值。

ExpandedText：设置当目标panel为展开时TextLabelID所指示的lable的值。

ImageControlID：指示一个image控件。该控件会根据目标panel状态的不同而改变图片。

CollapsedImage：指示目标panel为收缩时ImageControlID所指示的image的path。

ExpandedImage：指示目标panel为展开时ImageControlID所指示的image的path。

ExpandDirection：指示目标panel的展开收缩方向，可以是水平或垂直展开收缩。

——宽田著——