从 JavaScript折叠和展开面板

2021-10-20

Christian Wenz

本文档是Visual Basic 教程（转至 Visual C# 教程）

ASP.NET AJAX Control Toolkit 中的 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();
     }
}

第三个按钮改变面板的状态：从折叠到展开，然后再返回到折叠状态

下一篇教程

通过

从 JavaScript折叠和展开面板

概述

步骤

其他资源