【IT168技术文档】

  本章主要介绍CollapsiblePanelExtender的使用方法。CollapsiblePanelExtender和上一章的 Accordion有些类似，也是可以控制指定区域的缩放。但Accordion是管理一个区域群，群中每个区域之间能够产生互动，关闭一个能打开另一个，而CollapsiblePanelExtender主要是控制单个区域的缩放。

  第一步：建立AJAX Control Toolkit Website

  在这个例子里我们主要需要两个Panel控件和一个CollapsiblePanelExtender组件，另外还有一些辅助控件，这里就不一一列出了。如下所示：

<asp:Panel ID="Panel1" runat="server" CssClass="collapsePanelHeader">
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/expand.jpg" />&nbsp;&nbsp;
<asp:Label ID="Label1" runat="server">显示内容……</asp:Label>
</asp:Panel>

  以上是Panel1的代码，Panel1是控制区域，它负责控制Panel2的状态。在Panel1里我们定义了一个Image控件和一个Label控件。这两个控件能根据Panel2的状态显示不同的图片和文字。

  注意：这里一定要用服务器控件，否则CollapsiblePanelExtender会找不到相关控件。

  Panel2的内容只要一篇文章就可以了，这里就不再列出。

  附上相关CSS样式：

.collapsePanel {
background-color:white;
overflow:hidden;
}
.collapsePanelHeader{
width:100%;
height:30px;
background:#666;
color:#FFF;
font-weight:bold;
}

  注意：上面的CSS样式中，collapsePanel是Panel2使用的样式，在这个样式中我们不能指定高度，否则Panel2就不能正常显示和隐藏了，大家可以自行测试。

  第二步：设置CollapsiblePanelExtender

  由于要设置的属性太多，请参考如下代码：

<ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"
CollapseControlID="Panel1"
ExpandControlID="Panel1"
TargetControlID="Panel2"
ImageControlID="Image1"
TextLabelID="Label1"
CollapsedText="显示内容……"
ExpandedText="隐藏内容……"
ExpandedImage="~/images/collapse.jpg"
CollapsedImage="~/images/expand.jpg">
</ajaxToolkit:CollapsiblePanelExtender>