Un formulario con campos que se esconden con DHTML (2)

El checkbox que servirá para mostrar u ocultar el formulario expandido se llama "expandir". Si nos fijamos, el checkbox tiene definido el evento onclick, que llama a la función javascript que se encargará de mostrar u ocultar parte del formulario. Esta función la veremos más adelante.

Ahora veremos el código CSS de este formulario.

<style type="text/css">
#capaexpansion{
   display:none;
}
</style>

Simplemente hemos definido, para la capaexpansion, el atributo display de CSS con el valor none. Este valor implica que el contenido del con id "capaexpansion" no se va a mostrar. Utilizaremos este atributo para mostrar u ocultar la capa, en vez de visibility porque con este último, aunque la capa no se ve en la página, si que queda el espacio reservado que ocupan los elementos de formulario.

Con el atributo display: none conseguimos que la capa no se vea en la página y además que no ocupe espacio. Luego, pasando el atributo a display:block conseguiremos que los campos se vean en el formulario. Para cambiar el valor del atributo display, las librerías xLibrary disponen de la función xDisplay(), que recibe un string con el identificador de la capa a cambiar el display y el nuevo valor de display que se desea aplicar.

Por último veremos la función javascript que se va a encargar de mostrar u ocultar la capa con la ampliación del formulario. A esta función se le llama cuando se hace clic en el checkbox.

function expandir_formulario(){
if (document.f1.expandir.checked){
   xDisplay('capaexpansion', 'block')
}else{
   xDisplay('capaexpansion', 'none')
}
}

Simplemente evalúa document.f1.expandir.checked (que vale true si el checkbox está activado y false si está desactivado).

Si estaba activado simplemente ponemos el valor "block" al atributo display de la "capaexpansion". Si no estaba activado el checkbox, se vuelve a poner el valor "none" al atributo display de la "capaexpansion".

Conclusión

El ejercicio es sumamente sencillo. Es de los más sencillos que se pueden hacer con DHTML, siempre y cuando se conozca el atributo display y las librerías cross-browser xLibrary. No obstante, los resultados son bastante vistosos y útiles.

Insisto, este ejercicio hace uso de la función xDisplay(), de la librería xLibrary. Al principio del código de este ejemplo se debe incluir la librería como un fichero javascript externo. El código a incluir se puede generar con la herramienta X Library Compiler.

Se puede ver el ejemplo en marcha.

Puedes descargar un ZIP con el HTML y la librería de este ejemplo.

Usuarios que han visto este tema también han visto...

- Reloj DHTML, con Javascript y capas
- Pase de diapositivas con DHTML
- Ventanas que no se comen los navegadores
- Un formulario con campos que se esconden con DHTML
- Efectos de transición

- Versión imprimible de este documento

- Enviar por e-mail este documento