CollapsiblePanel控件使用方法介绍

ASP.NET的AjaxToolKit提供的这个collapsiblePanel是个非常灵活的可以让你轻松实现为你的web页面的任何一部分添加一个可折叠的按钮。开发人员需要作的，只是指定一个页面上的 Panel 控件为需要折叠展开功能的 Panel 为其TargetID， 同时还可以指定页面上的某一个控件是触发折叠展开功能的开关，或者指定当鼠标移动到某一区域的时候触发这项功能。

其相关属性如下：

TargetControlID       要实现折叠的Panel的ID

CollapsedSize         Panel折叠后的尺寸

ExpandedSize         Panel伸展后的迟寸

Collapsed               默认加载页面时，此Panel是否处于折叠状态

ExpandControlID  激发伸展效果的控件，主要是通过控件的Click事件实现伸展效果

CollapseControlID 激发折叠效果的控件，主要是通过控件的Click事件实现折叠效果

AutoCollapse           当Panel失去焦点时是否自动折叠

AutoExpand              当Panel失去焦点时是否自动伸展

ScrollContents         是否在Panel内显示滚动条

TextLableID              显示折叠状态的目标控件

CollapsedText         折叠状态时目标控件显示的信息

ExpandedText          伸展状态时目标控件显示的信息

ImageControlID      折叠和伸展方式为图片方式时，显示该图像的控件ID

ExpandedImage    伸展时使用的图像路径

CollapsedImage    折叠时使用的图像路径

ExpandDirection    Panel伸展方向，伸展方向有水平和垂直两种

下面用一个例子来说明：

<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server"
TargetControlID="Panel1"
CollapsedSize="0"
ExpandedSize="300"
Collapsed="True"
ExpandControlID="LinkButton1"
CollapseControlID="LinkButton1"
AutoCollapse="False"
AutoExpand="False"
ScrollContents="True"
TextLabelID="Label1"
CollapsedText="Show Details..."
ExpandedText="Hide Details"
ImageControlID="Image1"
ExpandedImage="~/images/collapse.jpg"
CollapsedImage="~/images/expand.jpg"
ExpandDirection="Vertical" />