Índice

Las pestañas

1. El uso del componente

El componente Tabs, pestañas en español, también permite mostrar mucha información (textos, imágenes, etc.) en poco espacio. Toda la información aparece en paneles que podemos mostrar u ocultar simplemente haciendo clic en cada panel.

2. Insertar el componente

Sitúe el punto de inserción allá donde quiera insertar el componente.

En el menú Insertar, o en el panel Insertar, seleccione jQuery UI y Tabs.

El componente se inserta en la página:

images/20OWT-17.PNG

Seleccione el componente en la página haciendo clic en su pestaña azul jQuery Tabs: Tabs1.

En el panel Propiedades, campo ID, verá que el identificativo del componente es Tabs1.

images/20OWT-18.PNG

3. Modificar el título y agregar contenido a los paneles

Procederemos de la misma manera que antes para introducir el título de las pestañas y agregar contenido a las pestañas.

Seleccione el primer título Ficha 1 e introduzca el texto deseado.

Seleccione el primer Contenido 1 e introduzca el contenido deseado.

Proceda del mismo modo con todas las pestañas.

images/20OWT-19.PNG

4. Guardar la página

Cuando guarde la página, Dreamweaver le pedirá de nuevo que guarde los archivos JavaScript y CSS vinculados al componente. Si ya ha usado otros componentes, es posible que deba guardar menos archivos ya que algunos archivos CSS o JS son comunes a varios componentes.

5. Añadir, eliminar y ordenar los paneles

Para añadir y/o eliminar paneles, usaremos ...