En este tutorial construiremos un conjunto maestro/detalle utilizando un único documento que realice ambas acciones: Mostrar el listado de registros y a su vez ser capaz de mostrar/ocultar dinámicamente los detalles de uno (o varios) de ellos a partir de la selección del usuario.

Para ello utilizaremos algo de Javascript (de hecho será el único código que escribamos), mezclado con código de servidor (que escribirá directamente Dreamweaver) para conseguir un efecto original: Mostraremos un listado de empleados y, al pulsar sobre el nombre, se nos mostrará/ocultará bajo el mismo un bloque en el que aparecerán sus datos personales, todo ello sin recargar la página. Podéis ver el ejemplo aquí.

Como hemos dicho, todo el código del lado servidor será escrito por Dreamweaver por lo que, aunque en el tutorial se vea código PHP, los pasos son idénticos para todos los modelos de servidor.

Este aspecto de que la página no sea recargada en cada acción implica que toda la información de todos los usuarios deba encontrarse en el documento una vez cargado en el navegador. ¡Mucha atención por tanto al utilizarlo con un número alto de registros o con detalles muy extensos para cada registro!

Comencemos: Ya hemos creado una tabla de empleados y un Recordset en el que los listamos por orden alfabético:

El primer paso será insertar los campos nombre y apellidos en el documento, utilizando para ello una etiqueta

(hemos aplicado un estilo, llamado “nombre” para darle algo de formato).

A continuación insertaremos debajo otra etiqueta

, dentro de la cual colocaremos los campos restantes. Uno de ellos incluye una imagen del empleado. Para insertarla, solo es necesario seleccionar “Insert->Image”, activar el botón de radio “Select from Data Sources” y seleccionar el campo que contiene la ruta a la imagen (en nuestro caso, “foto”):

Para finalizar esta primera fase, envolvemos todo con un ‘Repetir Región’.

Ahora nos centraremos en el div que contiene los datos detalle: Para comenzar lo ocultaremos utilizando CSS, de manera que editaremos la etiqueta (bien directamente en el código o utilizando el inspector de etiquetas) para nos quede así:

Hasta ahora no hemos hecho nada extraño: simplemente hemos creado dos bloques div, en uno hemos colocado el nombre del empleado y en el otro sus datos personales para terminar envolviendo ambos en una región repetida y ocultando el segundo de ellos.

Paginas: 1 2

Puedes seguir las respuestas a este post mediante nuestro RSS 2.0 feed. Puedes dejar una respuesta, o un trackback desde tu sitio.
subscribete a los comentarios en formato RSS
Hay 1 comentario en este post.
  1. oblo dice:
    20/01/2007 a las 10:06 pm

    ¡¡ Muy bueno !! enhorabuena… ¿Para cuando nuevos tutos?, porque aunque no aparezcan comentarios muy a menudo seguro que somos muchos los que los leemos.
    A seguir así ¡¡¡

Anímate a comentar algo

campo obligatorio
campo obligatorio
Algunos campos son de caracter obligatorio