通过 JavaScript 折叠和展开面板 (VB)

作者 :Christian Wenz

下载 PDF

ASP.NET AJAX 控件工具包中的 CollapsiblePanel 控件扩展了一个面板,并为其提供折叠其内容并再次展开它的功能。 也可以从自定义 JavaScript 代码触发这两个操作。

概述

ASP.NET AJAX 控件工具包中的 CollapsiblePanel 控件扩展了一个面板,并为其提供折叠其内容并再次展开它的功能。 也可以从自定义 JavaScript 代码触发这两个操作。

步骤

首先,创建一个新的 ASP.NET 页,并在 ScriptManager 一个 <form> 元素中包含 。 这会加载 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();" />

在以) 开头 <script type="text/javascript"> (客户端 JavaScript 代码中 $find() ,需要使用 方法来访问 CollapsiblePanelExtender$find("cpe") 将返回对它的引用。 从那里开始,特定方法将解决手头的任务。

打开 (展开) 面板的方法称为 _doOpen();以下代码实现 doOpen() 在单击第一个按钮时调用的函数:

function doOpen() 
{
 $find("cpe")._doOpen();
}

若要关闭或折叠面板, _doClose() 需要执行 方法。 因此,当用户单击第二个按钮时,将调用以下 JavaScript 代码:

function doClose() 
{
 $find("cpe")._doClose();
}

第三个按钮切换面板的状态:从折叠到展开,反之亦然。 公开 CollapsiblePanelExtender 方法, toggle() 该方法完全可以:反转面板的状态。 但是,还有另一种方法 (方法) 在内部使用 toggle()get_Collapsed() 的 方法 CollapsiblePanelExtender() 告诉我们面板是否折叠。 根据此函数的返回值,面板随后会展开 (_doOpen() 方法) 或折叠 (_doClose()) 方法:

function doToggle() 
{
 var cpe = $find("cpe");
 //cpe._toggle();
 if (cpe.get_Collapsed()) {
 cpe._doOpen();
 } else {
 cpe._doClose();
 }
}

第三个按钮更改面板的状态:从折叠到展开后退

第三个按钮更改面板的状态:从折叠到展开并返回 (单击以查看全尺寸图像)