Cómo crear paneles plegables con jquery en dreamweaver

El widget de acordeón jQuery UI en Dreamweaver hace que sea fácil agregar paneles plegables que los visitantes del sitio pueden abrir y cerrar sin actualizar la página web. Esta característica jQuery le permite hacer un mejor uso del espacio en una página mostrando más información en menos espacio en una ventana del navegador.

Se puede ver cómo los paneles plegables de acordeón contienen las preferencias nombre, foto y hábitat de cada pájaro cantante en este sitio web naturaleza. El resultado es que se puede ver fácilmente los nombres de todas las aves en una sola página. Para ver la descripción de cualquier ave, un usuario sólo tiene que hacer clic en la pestaña en la parte superior del panel (donde aparece el nombre del ave), y el panel se abre al instante.

La foto y descripción de la OREOTHLYPIS CELATA está abierta mientras que los otros en la página están cerrados. La belleza de jQuery es que la página no tiene que ser recargada para los paneles para abrir o cerrar. Haga clic una vez en una pestaña y un panel se abre al instante. Haga clic en otra pestaña, y que el panel se abre como el panel previamente abierta se cierra.

paneles plegables se pueden usar para mostrar texto e imágenes, así como archivos multimedia, como audio, vídeo y archivos Flash.

Para ver un panel de acordeón (o muchas otras características avanzadas en Dreamweaver) tal y como aparecerá en un navegador web, es necesario hacer clic en el botón Vista en vivo en la parte superior izquierda del espacio de trabajo de Dreamweaver.

Después de crear un conjunto de paneles de acordeón con el menú jQuery UI en Dreamweaver, puede cambiar una serie de ajustes del panel utilizando el inspector de propiedades, como se muestra en las instrucciones que siguen.

Siga estos pasos para crear un conjunto de paneles de acordeón:

1. Coloca el cursor en una página en la que desea que aparezcan los paneles de acordeón.

2. Seleccione Insertar → → jQuery UI acordeón, o haga clic en el elemento del acordeón en el panel de interfaz de usuario jQuery Insertar.

   Un grupo de paneles acordeón plegable jQuery UI con tres paneles aparece en la página.

   

3. Seleccione la palabra Sección en la parte superior de cada panel, y sustituirlo por el texto que desea que aparezca en el área de la ficha del panel.

   Por defecto, el texto en el área Tab es texto plano, pero se puede cambiar eso mediante la alteración de la regla CSS correspondiente o formatear el texto mediante etiquetas HTML, como las etiquetas de título.

4. Seleccione la palabra Contenido en el área principal de la cada panel, e introducir cualquier texto o imágenes que desea visualizar.

   Puede pegar texto en un panel como era de pegar texto en cualquier otro lugar en la página. Del mismo modo, insertar imágenes en los paneles del mismo modo que cualquier otro lugar en una página: Coloca el cursor en el panel, elija Insertar imagen → → Imagen, y seleccione el archivo GIF, JPEG o PNG que desea visualizar. También puede seleccionar un archivo de Photoshop si desea utilizar Dreamweaver para optimizar las imágenes.

   Al pegar texto en un panel, elija Editar → Pegado especial para elegir la cantidad de formato que desea conservar en el texto se pega en Dreamweaver. Limitar la cantidad de formateo conservado puede reducir los posibles conflictos de estilo.

5. Para cambiar los ajustes del panel, haga clic en la pestaña azul jQuery acordeón en la parte superior de los paneles en el área de diseño.

   Al hacer clic en la pestaña azul, los ajustes del panel aparecen en el inspector de propiedades. (Correctamente, en la ficha azul puede ser complicado, así que asegúrese de hacer clic en el área azul.) Haga clic en cualquier otro lugar de la página, y el inspector vuelve a su configuración predeterminada.

   

6. Añadir o quitar paneles utilizando el campo de los paneles del inspector de propiedades.

   Para añadir un panel, haga clic en el signo más (+) a la derecha del campo de paneles. Para quitar un panel de un conjunto de acordeón, primero seleccione el nombre del panel en la lista desplegable paneles del inspector de propiedades y haga clic en el signo menos (@@ min).

   Puede añadir otro panel haciendo clic en el signo más nuevo.

7. Cambiar la forma de los paneles se abren mediante el menú desplegable Evento.

   Los ajustes de eventos de control si los paneles se abren cuando un usuario hace clic en una pestaña del panel (click) o saca un cursor sobre la pestaña del panel (paso del ratón).

8. Ajustar otras opciones del panel, según se desee.

   Las opciones de acordeón en el inspector de propiedades son opcionales, e incluyen la capacidad de deshabilitar o todos los paneles (Desactivar) y la animación de la forma en que los paneles (lista desplegable Animar) se abren y cierran.

9. Seleccione Archivo → Guardar para guardar la página- cuando aparezca el cuadro de diálogo Copiar archivos dependientes, haga clic en Aceptar para generar todos los archivos relacionados.

   Por las características de Spry para trabajar, debe subir estos archivos a su servidor web cuando se carga la página web.

10. Para cambiar la apariencia del panel, tales como el tipo de fuente o el color del texto, editar la regla CSS correspondiente.

    Nota: No puede editar los estilos correspondientes para un panel de acordeón hasta que la página se ha guardado y Dreamweaver ha generado la archivos javascript CSS correspondiente y.

11. Para ver cómo los paneles aparecerán en un navegador web, haga clic en el icono del globo en la parte superior del espacio de trabajo y seleccione el navegador que desea utilizar para previsualizar la página.

    Cuando usted está utilizando su ordenador para previsualizar una página que tiene una función interactiva que requiere javascript u otra programación, algunos navegadores web, incluyendo Internet Explorer, se mostrará una advertencia que indica que debe permitir que los controles ActiveX para ver la página.

    Esta es una advertencia de seguridad que aparece sólo cuando se abre la página en el mismo equipo donde se guarda la página. Si publica la página en un servidor web y luego ver que a través de una conexión a Internet, este error no aparecerá para usted o sus visitantes del sitio.