Accordion

Descripción

El control Web Accordion te permite ubicar múltiples paneles, de modo que únicamente uno será visible en cada momento. Dichos paneles son los AccordionPane, de los que debemos definir la cabecera (Header) y el contenido (Content). El estado del Accordion es guardado, de modo que el AccordionPane activo se mantendrá visible a través de los postbacks.

Propiedades

9 propiedades definen al Accordion:
• SelectedIndex: Define el AccordionPane que estará activo por defecto, donde el primero tiene como índice 0. Es opcional y por defecto vale 0.
• HeaderCssClass / ContentCssClass: Identifica el nombre de la clase CSS utilizada para las cabeceras/contenidos (Header/content). Si se define como atributo del Accordion, la clase se aplicará por defecto a todos los AccordionPane de que esté compuesto. También se puede definir individualmente como atributo de cada AccordionPane.
• FadeTransitions: en caso de ser true se aplicacará un efecto de fading en la transición, en caso de ser false la transición se realizará de modo normal. Es optativo y por defecto vale false.
• TransitionDuration: cantidad de milisegundos que definen la duración de una transición. Se consigue un efecto muy agradeble con transición de unos 200-300 milisegundos.
• FramesPerSecond: número de frames por segundo que se usará en la animación de las transiciones. Suele ser suficiente un número superior a 40.
• AutoSize: define la restricción en la altura del Accordion. Puede tomar tres valores:
o None: No tiene ninguna restricción. La altura del Accordion no tiene límite. Es importante reseñar que esto puede implicar que otros elementos de la misma Web sean movidos.
o Limit: como máximo, el Accordion medirá lo que marque la propiedad Height. Si el Accordion es más alto de lo que marque su Height, al AccordionPane activo se le añadirá un scroll para ajustarse al límite. En caso de ser menor a ese límite el Accordion no sufre cambios.
o Fill: el Accordion siempre medirá lo que marqué su propiedad Height, expandiendo o minimizando el contenido en base a las necesidades.
• Header: es una propiedad del AccordionPane y define el valor de su cabecera.
• Content: es una propiedad del AccordionPane y define el valor de su contenido.
• DataSource: El DataSource a aplicar (totalmente optativo). Para una correcta aplicación hay que llamar a DataBind().
• DataSourceID: – Alternativamente, poder asignar el identificador de nuestra fuente de datos.
• DataMember: el miembro a enlazar cuando se usa el DataSourceID.

Ejemplo

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ACT-Accordion.aspx.cs" Inherits="Accordion_ACT_Accordion" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Accordion</title>
<style>
.accordionCabecera
{
border: 1px solid black;
background-color: #ffd800;
font-family: Arial, Sans-Serif;
font-size: 14px;
font-weight: bold;
padding: 4px;
margin-top: 4px;
cursor: pointer;
}

.accordionContenido
{
font-family: Sans-Serif;
background-color: #fff8ab;
border: 1px solid black;
border-top: none;
font-size: 12px;
padding: 7px;
}
</style>


</head>
<body>
<form id="form1" runat="server">
<div>

<asp:ScriptManager id="ScriptManager" runat="server" />

<ajaxToolkit:Accordion ID="Accordion1" runat="server"
FadeTransitions="True"
FramesPerSecond="50"
Width="250px"
TransitionDuration="200"
HeaderCssClass="accordionCabecera"
ContentCssClass="accordionContenido">
<Panes>
<ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
<Header>Panel 1</Header>
<Content>Contenido 1</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane runat="server">
<Header>Panel 2</Header>
<Content>Contenido 2</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane runat="server">
<Header>Panel 3</Header>
<Content>Contenido 3</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>


</div>
</form>
</body>
</html>











Al tratarse de nuestro primer ejemplo, hemos mostrado todo el código de la página al completo. El motivo es que tengamos en cuenta que al arrastrar el control Accordion desde nuestra caja de herramientas, automáticamente quedará registrado el Assembly correspondiente.

Sin embargo, lo que no se hará automáticamente, y debemos hacerlo nosotros siempre, es incluir una referencia al ScriptManager, lo que no requiere más que otro sencillo arrastre desde nuestra caja de herramientas.

Además, y como es obvio, deberán definirse las clases CSS tanto de la cabecera como del contenido.

En el resto de ejemplos, no mostraremos más que el código específico del control en el que estemos trabajando.