CollapSibePanel

CollapSibePanel控件是多个折叠面板的组合，实现一个Panel的显示和隐藏并定义一些样式。提供两种方式：一种是按钮方式，一种是图片方式。

属性列表：
TargetControlID : 该属性指定一个Panel，该Panel就是CollapsiblePanel要扩展显示或折叠的内容面板。
CollapsedSize/ ExpandedSize :该属性指定控制折叠/扩展的控件大小。
Collapsed : 默认是否折叠
AutoCollapse/ AutoExpand : 鼠标移上/移出时候是否自动显示(不点击)
ScrollContents : 是否显示滚动条
ExpandControlID/CollapseControlID : 该属性指定控制折叠/扩展的控件ID。
TextLabelID : 指定一个控件，可以在扩展或折叠Panel时显示CollapsedText/ExpandedText中的内容。
CollapsedText/ ExpandedText :Panel折叠/扩展时的文本。
ImageControlID : 指定一个控件，在扩展时显示ExpandedImage中的图像;在折叠时显示CollapsedImage中的图像。
CollapsedImage/ ExpandedImage :在扩展/折叠时显示不同的图像。
ExpandDirection ：指定Panel的扩展方向。

实例解析一、使用按钮控制折叠面板
1.UI界面
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
   
    </div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Panel ID="Panel1" runat="server" Height="26px" Width="316px">
                    <asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton></asp:Panel>
                <asp:Panel ID="Panel2" runat="server" Height="142px" Width="315px" BorderWidth="1">面板内容
                </asp:Panel>
                <cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" TargetControlID="Panel2" CollapsedSize="0"
                 Collapsed="false" ExpandControlID="LinkButton1" CollapseControlID="LinkButton1" AutoCollapse="false" ScrollContents="false" TextLabelID="LinkButton1" CollapsedText="显示面板"
                  ExpandedText="隐藏面板" ExpandDirection="Horizontal">
                </cc1:CollapsiblePanelExtender>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
2.后台

实例解析二、使用图片控制折叠面板
1.UI界面
    <form id="form1" runat="server">
       
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>   
    </div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Panel ID="Panel1" runat="server" Height="26px" Width="316px">
                    <asp:Image ID="Image1" runat="server" /> </asp:Panel>
                <asp:Panel ID="Panel2" runat="server" Height="142px" Width="315px" BorderWidth="1">面板内容
                </asp:Panel>
                <cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" TargetControlID="Panel2" CollapsedSize="0"
                 Collapsed="false" ExpandControlID="Image1" CollapseControlID="Image1" AutoCollapse="false" ScrollContents="false" ImageControlID="Image1" CollapsedText="显示面板"
                  ExpandedText="隐藏面板" ExpandDirection="Horizontal" CollapsedImage="user_32.gif" ExpandedImage="user_32.gif">
                </cc1:CollapsiblePanelExtender>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>

转载于:https://www.cnblogs.com/astar/archive/2007/11/12/956228.html