Seleccione Insertar > Spry > Panel que puede contraerse de Spry.
Última actualización el
3 may. 2021
Nota:
Los widgets de Spry se han sustituido por widgets jQuery en Dreamweaver CC y versiones posteriores. Aunque todavía pueden modificarse los widgets de Spry existentes en la página, no se pueden agregar nuevos widgets de Spry.
Acerca del widget de panel que puede contraerse
Un widget de panel que puede contraerse es un panel que puede almacenar contenido en un espacio reducido. Los usuarios pueden hacer clic en la ficha del widget para mostrar u ocultar el contenido almacenado en el panel que puede contraerse. En el siguiente ejemplo se muestra un widget de panel que puede contraerse, ampliado y contraído:
A. Ampliado B. Contraído
El código HTML del widget de panel que puede contraerse consta de una etiqueta div externa que contiene la etiqueta div de contenido y la etiqueta div de contenedor de ficha. El código HTML del widget de panel que puede contraerse también incluye etiquetas script en el encabezado del documento y detrás del formato HTML del panel que puede contraerse.
Para una explicación detallada sobre el funcionamiento del widget de panel que puede contraerse, incluida una anatomía completa del código del widget de panel que puede contraerse, consulte www.adobe.com/go/learn_dw_sprycollapsiblepanel_es.
Inserción y edición del widget de panel que puede contraerse
Inserción del widget de panel que puede contraerse
Nota:
También puede insertar un widget de panel que puede contraerse a través de la categoría Spry del panel Insertar.
Apertura o cierre del panel que puede contraerse en la vista de Diseño
-
Siga uno de estos procedimientos:
Pase el puntero del ratón por la ficha del panel en la vista de Diseño y, a continuación, haga clic en el icono de ojo que aparece a la derecha de la ficha.
Seleccione un widget de panel que puede contraerse en la ventana de documento y, a continuación, seleccione Abierto o Cerrado en el menú emergente Mostrar del inspector de propiedades (Ventana > Propiedades).
Definición del estado predeterminado de un widget de panel que puede contraerse
Puede definir el estado predeterminado (abierto o cerrado) del widget de panel que puede contraerse cuando se cargue la página Web en un navegador.
-
Seleccione un widget de panel que puede contraerse en la ventana de documento.
-
En el inspector de propiedades (Ventana > Propiedades), seleccione Abierto o Cerrado en el menú Estado predeterminado.
Activación o desactivación de la animación para el widget de panel que puede contraerse
De forma predeterminada, cuando activa la animación para un widget de panel que puede contraerse, el panel se abre y se cierra de forma gradual y suave cuando el visitante del sitio hace clic en la ficha del panel. Si desactiva la animación, el panel se abre y se cierra bruscamente.
-
Seleccione un widget de panel que puede contraerse en la ventana de documento.
-
En el inspector de propiedades (Ventana > Propiedades), active o desactive Activar animación.
Personalización del widget de panel que puede contraerse
Aunque el inspector de propiedades permite realizar cambios simples a un widget de panel que puede contraerse, no admite tareas de estilo personalizadas. Puede modificar las reglas CSS de un widget de panel que puede contraerse y crear un panel con el estilo que desee.
Para realizar una consulta rápida sobre el cambio de los colores del widget de panel que puede contraerse, consulte el artículo de David Powers Quick guide to styling Spry tabbed panels, accordions, and collapsible panels (guía rápida sobre la aplicación de estilo a paneles en ficha, acordeones y paneles que pueden contraerse de Spry).
Para ver una lista detallada de tareas de estilo, consulte www.adobe.com/go/learn_dw_sprycollapsiblepanel_custom_es.
Todas las reglas CSS de los siguientes temas se refieren a las reglas predeterminadas que se encuentran en el archivo SpryCollapsiblePanel.css. Dreamweaver guarda el archivo SpryCollapsiblePanel.css en la carpeta SpryAssets de su sitio cuando crea un widget de panel que puede contraerse de Spry. Este archivo también contiene información comentada de utilidad sobre los distintos estilos que se pueden aplicar al widget.
Nota:
Aunque es fácil editar las reglas para el widget de panel que puede contraerse directamente en el archivo CSS, también puede utilizar el panel Estilos CSS para editar el código CSS del panel que puede contraerse. El panel Estilos CSS resulta útil para ubicar las clases CSS asignadas a partes distintas del widget, en especial si utiliza el modo Actual del panel.
Aplicación de estilo al texto del widget de panel que puede contraerse
Puede aplicar estilo al texto de un widget de panel que puede contraerse estableciendo las propiedades para todo el contenedor del widget de panel que puede contraerse o para los componentes del widget de forma individual.
-
Para modificar el formato del texto de un widget de panel que puede contraerse, utilice la tabla siguiente para ubicar la regla CSS correspondiente y, a continuación, añada sus propiedades y valores de estilo de texto:
Estilo que se va a cambiar
Regla CSS correspondiente
Ejemplo de propiedades y valores a añadir o modificar
Texto en todo el panel que puede contraerse
.CollapsiblePanel font: Arial; font-size:medium;
Solo el texto de la ficha del panel
.CollapsiblePanelTab font: bold 0.7em sans-serif; (Valor predeterminado).
Solo el texto del panel de contenido
.CollapsiblePanelContent font: Arial; font-size:medium;
Cambio de los colores de fondo del widget de panel que puede contraerse
-
Para modificar los colores de fondo de partes distintas de un widget de panel que puede contraerse, utilice la tabla siguiente para ubicar la regla CSS correspondiente y, a continuación, añada sus propiedades y valores de color de fondo:
Color que se va a cambiar
Regla CSS correspondiente
Ejemplo de propiedades y valores que se añaden o modifican
Color de fondo de la ficha del panel
.CollapsiblePanelTab background-color: #DDD; (Valor predeterminado).
Color de fondo del panel de contenido
.CollapsiblePanelContent background-color: #DDD;
Color de fondo de la ficha cuando el panel está abierto
.CollapsiblePanelOpen .CollapsiblePanelTab background-color: #EEE; (Valor predeterminado).
Color de fondo de la ficha del panel abierto al pasar el puntero del ratón
.CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover background-color: #CCC; (Valor predeterminado).
Limitación del ancho de un panel que puede contraerse
De forma predeterminada, el widget de panel que puede contraerse se amplía para llenar el espacio disponible. No obstante, puede limitar el ancho de un widget de panel que puede contraerse estableciendo una propiedad de ancho para el contenedor del panel.
-
Abra el archivo SpryCollapsible Panel.css y localice la regla CSS .CollapsiblePanel. Esta regla define las propiedades del elemento de contenedor principal del widget de panel que puede contraerse.Nota:
También puede seleccionar el widget de panel que puede contraerse y buscar en el panel Estilos CSS (Ventana > Estilos CSS) para localizar la regla. Asegúrese de que el panel está en modo Actual.
-
Añada una propiedad y un valor de ancho a la regla, por ejemplo, width: 300px;.