CollapsiblePanel(从 JavaScript 折叠和展开面板)
概述
ASP.NET AJAX Control Toolkit 中的 CollapsiblePanel 控件扩展了面板功能，能将其内容折叠后再展开。
也可以从自定义JavaScript 代码触发这两项操作。
步骤
首先，创建一个新的ASP.NET 页面，在一个<form> 元素中包含ScriptManager。这将加载Control Toolkit 需要的ASP.NET AJAX 库：
<asp:ScriptManager ID="asm" runat="server" />
接下来，创建带有文本的面板，使折叠/展开效果可见：
<asp:Panel ID="Panel1" CssClass="panelClass" runat="server">
ASP.NET AJAX is a free framework for quickly creating a new generation of
more efficient,
more interactive and highly-personalized Web experiences that work
across all the most popular browsers.<br />
ASP.NET AJAX is a free framework for quickly creating a new generation of
more efficient,
more interactive and highly-personalized Web experiences that work
across all the most popular browsers.<br />
ASP.NET AJAX is a free framework for quickly creating a new generation of
more efficient,
more interactive and highly-personalized Web experiences that work
across all the most popular browsers.<br />
</asp:Panel>
正如您看到的那样，面板引用一个在此显示的CSS 类（通常用来定义背景色和面板的宽度）：
<style type="text/css">
.panelClass {background-color: lime; width: 300px;}
</style>
CollapsiblePanelExtender控件要求提供TargetControlID属性，这样工具包才能从请求中了解要折叠或展开哪个面板：
<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="server"
TargetControlID="Panel1" />
遗憾的是，目前扩展器还无法显示要折叠或展开面板的具体API。不过有些未记录的方法可以做到这一点。首先，向页面添加三个HTML 按钮，这将触发客户端JavaScript 来折叠或展开面板的内容：
<input type="button" id="Button1" runat="server" value="Open"
onclick="doOpen();" />
<input type="button" id="Button2" runat="server" value="Close"
onclick="doClose();" />
<input type="button" id="Button3" runat="server" value="Toggle"
onclick="doToggle();" />
在客户端JavaScript 代码（以<script type="text/javascript"> 开始）中，需要使用$find()方法来访问CollapsiblePanelExtender。$find("cpe") 将返回该控件的一个引用。之后，将由具体方法解决手头的任务。
用于打开（展开）面板的方法是_doOpen()；以下代码实现doOpen()函数，该函数在第一次单击按钮时调用：
function doOpen()
{
$find("cpe")._doOpen();
}
如果要关闭或折叠面板，需要执行_doClose()方法。因此，当用户单击第二个按钮时，将调用以下JavaScript 代码：
function doClose()
{
$find("cpe")._doClose();
}
第三个按钮用来切换面板的状态：从折叠到展开，或反之。CollapsiblePanelExtender提供了toggle()方法，该方法恰好是用于：
来回转换面板的状态。不过还有另外一种方法（供toggle()方法内部使用）：
CollapsiblePanelExtender()的get_Collapsed() 方法告诉我们面板是否处于折叠状态。
由该函数的返回值决定面板是展开（_doOpen()方法）还是折叠（_doClose()方法）：
function doToggle()
{
var cpe = $find("cpe");
//cpe._toggle();
if (cpe.get_Collapsed()) {
cpe._doOpen();
} else {
cpe._doClose();
}
}
------------------------------------------------------------------------------
<script type="text/javascript">
function doOpen()
{
$find("cpe")._doOpen();
}
function doClose()
{
$find("cpe")._doClose();
}
function doToggle()
{
var cpe = $find("cpe");
//cpe._toggle();
if (cpe.get_Collapsed()) {
cpe._doOpen();
} else {
cpe._doClose();
}
}
</script>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<input id="Button1" type="button" runat="server" value="open" onclick="doOpen()" /> <input id="Button2" type="button" runat="server" value="close" onclick="doClose()" /> <input id="Button3" runat="server" type="button" value="toggle" onclick="doToggle()" />
<asp:Panel ID="Panel1" CssClass="panelClass" runat="server">
ASP.NET AJAX is a free framework for quickly creating a new generation of
more efficient,
more interactive and highly-personalized Web experiences that work
across all the most popular browsers.<br />
ASP.NET AJAX is a free framework for quickly creating a new generation of
more efficient,
more interactive and highly-personalized Web experiences that work
across all the most popular browsers.<br />
ASP.NET AJAX is a free framework for quickly creating a new generation of
more efficient,
more interactive and highly-personalized Web experiences that work
across all the most popular browsers.<br />
</asp:Panel>
<cc1:CollapsiblePanelExtender ID="cpe" TargetControlID="Panel1" runat="server">
</cc1:CollapsiblePanelExtender>
