Unidad 26. Controles Spry Avanzados (V)

26.5. Panel con Contracción

Para terminar con los controles avanzados veremos el panel que puede contraerse de Spry. Puedes ver un ejemplo aquí:

Mi panel (haz clic)

Este es un panel que se puede contraer.

De esta forma podrás esconder el contenido con un sólo clic.

Pruébalo pulsando sobre la cabecera.

 

Verás que realmente, funciona como un acordeón con una sola ficha.

Para insertar un panel de este tipo sólo tienes que hacer clic en Insertar → Spry → Panel que puede contraerse de Spry.

En el panel Propiedades podrás ver sus opciones de configuración:

Desactivando la opción Activar animación eliminarás la animación que se produce al contraer el panel. Esta opción sólo afecta al comportamiento de apertura o cierre y no tiene mucha más trascendencia, así que simplemente dependerá de tu gusto y lo que se adapte mejor al diseño de tu página web.

Puedes decidir si el panel se muestra inicialmente abierto o cerrado en la página seleccionando el estado en el desplegable Estado predeterminado. Del mismo modo, si mientras trabajas en vista de Diseño te molesta que esté abierto puedes cerrarlo haciendo clic en el desplegable Mostrar y seleccionando Cerrado.

Esto último también puedes hacerlo pulsando sobre el icono del ojo que aparecerá en la cabecera del panel si sitúas el ratón sobre ella:

Para modificar este panel simplemente edita su contenido como en el resto de controles que hemos visto, Nada más fácil.

26.6. Cambiar Estilos CSS

Al principio de la unidad dijimos que era posible modificar el aspecto de los controles Spry.

Esto es muy sencillo de conseguir. Cada vez que insertamos un control de este tipo se crean dos nuevos archivos en la carpeta llamada SpryAssets en nuestro sitio. Uno de ellos es un archivo JavaScript que contiene el código necesario para el buen funcionamiento del control, nunca modifiques este código, salvo que realmente entiendas qué estás haciendo.

El otro, un archivo CSS, es el que contiene las reglas de estilo que se aplican sobre el control. Encontrarás una hoja de estilo por cada control.

Para modificar el estilo de alguno de tus controles sólo tendrás que modificar dicho archivo CSS para adaptarlo a tus necesidades. Para ello puedes emplear el panel Estilos CSS, el Inspector de propiedades CSS, etc...

Si ves el código fuente del Spry, o la barra de estado, verás que normalmente están formados por etiquetas div, que tienen asociada una clase ya existiese. No tendrás más que personalizar esa clase.

 

Recuerda que si necesitas ayuda con los estilos en cascada puedes visitar de nuevo el tema de Estilos CSS Avanzados.

• Ejercicio propuesto de la Unidad 26 • Prueba evaluativa de la Unidad 26
Pág. 26.5

Atrás  Inicio