轻松掌握Ajax.net系列教程十：使用CollapsiblePanelExtender

本章主要介绍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>

CollapseControlID是指控制隐藏的控件ID，ExpandControlID是指控制显示的控件ID，由于本例子只有一个控制区域，因此它们的值都是Panel1。如果大家有两个控制区域，可以分别指定它们的值。TagetControlID是指需要控制的目标控件ID，这里是Panel2。ImageControlID是指显示状态图片的控件ID，这里是Image1，如果没有可以不指定。TextLabelID是指显示状态文字的控件ID，这里是Label1，如果没有也可以不指定。接下来的CollapsedText、ExpandedText、CollapsedImage和ExpandedImage就是指定不同状态下所显示的文字和图片了，大家根据实际情况设置。

设置完毕，运行！效果如下图：

点击“隐藏内容”后下面的文章就隐藏起来了。

结束：

本章主要介绍了CollapsiblePanelExtender的使用方法。CollapsiblePanelExtender和Accordion有些类似，但相比Accordion，CollapsiblePanelExtender的效果有点单调，但使用比Accordion简单，能通过设置显示不同状态的图片和文字，大家在选择的时候一定要从实际出发，选择合适的组件。