Unidad 26. Controles Spry Avanzados (IV)


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

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.

 

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 este 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 situas 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.

 

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

El otro, un archivo CSS, es el que contiene las reglas de estilo que se aplican sobre el control.

 

Para modificar el estilo de alguno de tus controles sólo tendrás que modificar dicho archivo CSS para adaptarlo a tus necesidades.

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

 

  Ejercicios del Tema 26.

  Prueba evaluativa del Tema 26.




  Ir a la página anterior Índice del curso    

Pág. 26.4

Septiembre - 2007.


Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.