Contraer y expandir un panel desde JavaScript (VB)

por Christian Wenz

Descargar código o Descargar PDF

El control CollapsiblePanel en el kit de herramientas de control de AJAX de ASP.NET amplía un panel y le proporciona la capacidad de contraer su contenido y expandirlo de nuevo. Estas dos acciones también se pueden desencadenar desde el código JavaScript personalizado.

Información general

El control CollapsiblePanel en el kit de herramientas de control de AJAX de ASP.NET amplía un panel y le proporciona la capacidad de contraer su contenido y expandirlo de nuevo. Estas dos acciones también se pueden desencadenar desde el código JavaScript personalizado.

Pasos

En primer lugar, cree una nueva página de ASP.NET e incluya el ScriptManager en el elemento <form>. Esto carga la biblioteca de ASP.NET AJAX necesaria para el control Toolkit:

<asp:ScriptManager ID="asm" runat="server" />

A continuación, cree un panel con texto para que se pueda visualizar el efecto de contraer o expandir:

<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>

Como puede ver, el panel hace referencia a una clase CSS que se muestra aquí (y básicamente define un color de fondo y el ancho del panel):

<style type="text/css">
 .panelClass {background-color: lime; width: 300px;}
</style>

El control CollapsiblePanelExtender requiere el atributo TargetControlID para que el kit de herramientas sepa qué panel se va a contraer o expandir según lo solicitado:

<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="server"
 TargetControlID="Panel1" />

Desafortunadamente, el extensor no expone actualmente una API específica para contraer o expandir el panel, pero sí algunos métodos no documentados. En primer lugar, agregue tres botones HTML a la página que desencadenarán el JavaScript del lado cliente para contraer o expandir el contenido del panel:

<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();" />

En el código de JavaScript del lado cliente (iniciado con <script type="text/javascript">), debe usarse el método $find() para tener acceso al CollapsiblePanelExtender. $find("cpe") devolverá una referencia a él. Desde allí, los métodos específicos resolverán la tarea a mano.

El método para abrir (expandir) el panel se denomina _doOpen(); el código siguiente implementa la función de doOpen() llamada cuando se hace clic en el primer botón:

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

Para cerrar o contraer el panel, es necesario ejecutar el método _doClose(). Por tanto, cuando el usuario hace clic en el segundo botón, se llama al siguiente código JavaScript:

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

El tercer botón alterna el estado del panel: de contraído a expandido y viceversa. El CollapsiblePanelExtender expone el método de toggle() que hace exactamente esto: invierte el estado del panel. Sin embargo, también hay otro enfoque (que usa internamente el método toggle()): el método get_Collapsed() de la CollapsiblePanelExtender() nos indica si el panel está contraído o no. En función del valor devuelto de esta función, el panel se expande (método_doOpen()) o contraído (_doClose()):

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

el tercer botón cambia el estado del panel: de contraído a expandido y atrás

El tercer botón cambia el estado del panel: de contraído a expandido y hacia atrás (haga clic para ver la imagen de tamaño completo)