AjaxControltoolkit —CollapsiblePanelExtender使用详解（转）

七．CollapsiblePanelExtender

CollapsibePanel 可以使得你的网页用户很方便地折叠或者展开你网页上的任何一个部分，的 ASP.Net AJAX 控件。

它可以很方便地使得任何一个页面上的 ASP.net Panel 控件的具有此项折叠与展开功能， 开发人员需要作的，只是指定一个页面上的 Panel 控件为需要折叠展开功能的 Panel 为其TargetID， 同时还可以指定页面上的某一个控件是触发折叠展开功能的开关，或者指定当鼠标移动到某一区域的时候触发这项功能。

CollapsibePanel 的折叠于展开具有状态保持的效果，当网页被提交的时候，它将自动纪录与恢复其目标控件的折叠或者展开状态。

你也可以指定，当目标 Panel 展开的时候，如果面对其不具有所需要的展开空间时，是否出现滚动条，并且设置该滚动条在高度或者宽度上的数据。

CollapsiblePanel 属性

CollapsiblePanel 控件属性将被初始化如下面的示例代码所示，斜体属性为可选属性。

<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" />
TargetControlID - 具有折叠和展开功能的 Panel 的 ID 
CollapsedSize - 当目标 Panel 处于关闭状态时的尺寸大小，用像素 (px) 表示 
ExpandedSize - 当目标 Panel 处于展开状态时的尺寸大小，用像素 (px) 表示 
Collapsed - 标志该目标 Panel 将被初始化的状态是否为折叠状态，在上面的示例中，我们初始化 Panel 为关闭状态，而且关闭状态时的 Panel 高度为 0 所以在第一次打开这个页面的时候我们看不到 Panel 
AutoCollapse - 如果设置为 True，当鼠标指针移出 Panel 区域的时候 Panel 将自动折叠 
AutoExpand - 如果设置为 True，当鼠标移入到 Panel 区域的时候 Panel 将自动展开 
ScrollContents - 如果设置为 True，当 Panel 的内容大于其本身的大小的情况下，将自动出现相适应的滚动条 
ExpandControlID/CollapseControlID - 控制目标 Panel 的折叠或者展开状态的控件 ID， 当点击该控件的时候，目标 Panel 将呈现展开或者折叠的状态， 如果它们被设置为相同的控件，那么这个控件将根据他当前的状态进行改变，如上面示例所示 
TextLabelID - 用于显示当前目标 Panel 折叠或者展开状态的 Label 控件 ID 
CollapsedText - 折叠状态的描述，该描述将用于 TextLabelID 的 Text 属性，这个文本内容同样将是 ImageControlID (如果设置)的 AlternateText 属性值 
ExpandedText - 展开状态的描述，该描述将用于 TextLabelID 的 Text 属性，这个文本内容同样将是 ImageControlID (如果设置) 的 AlternateText 属性值 
ImageControlID - 用于用图标表示其展开或者折叠状态的 Image 控件 ID，该控件将自动根据其状态替换其图标为 CollapsedImage 属性指向的图片， 和 ExpandedImage 属性指向的图片。如果指定了 CollapsedText 和 ExpandedText 属性，它们将是该图标控件的 AlternateText 属性值 
CollapsedImage - 当目标 Panel 被折叠的时候呈现的图片 
ExpandedImage -当目标 Panel 被展开的时候呈现的图片 
ExpandDirection - 可以设置为 "Vertical" 或者 "Horizontal" 标示目标 Panel 的展开方向 
案例代码

<asp:Panel ID="Panel1" runat="server">
        <div id="Header">Header - <asp:Label ID="TextLabel" runat="server">Initial content</asp:Label></div>
        <div id="panelParent" style="border:2px red outset;">
        <asp:Panel ID="ContentPanel" runat="server">
            <p>This is sample content.<br />It spans a couple of lines.</p>
        </asp:Panel>
        </div>
    </asp:Panel>

<ajaxToolkit:CollapsiblePanelExtender 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"
OpenedText="Hide Details" 
ImageControlID="Image1"
ExpandedImage="~/images/collapse.jpg"
CollapsedImage="~/images/expand.jpg"
ExpandDirection="Height"/>