Microsoft AjaxToolkits之10. CollapSibePanel控件-CSDN博客

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>