El widget de acordeón de interfaz de usuario de jQuery en Dreamweaver facilita la adición de paneles plegables que los visitantes del sitio pueden abrir y cerrar sin necesidad de actualizar la página web. Esta función de 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.
Puede ver cómo los paneles plegables de acordeón contienen el nombre, la foto y las preferencias de hábitat de cada ave cantora en este sitio web de la naturaleza. El resultado es que usted 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 necesita hacer clic en la pestaña en la parte superior del panel (donde aparece el nombre del ave), y el panel se abre instantáneamente.
La foto y la descripción del curruca de corona naranja están abiertas, mientras que las demás en la página están cerradas. La belleza de jQuery es que la página no tiene que ser recargada para que los paneles se abran o cierren. Haga clic una vez en una pestaña y se abrirá un panel al instante. Haga clic en otra ficha y el panel se abrirá a medida que se cierre el panel abierto anteriormente.
Los paneles plegables se pueden utilizar para mostrar texto e imágenes, así como archivos multimedia como archivos de audio, vídeo y Flash.
Para ver un panel de acordeón (o muchas otras funciones avanzadas de Dreamweaver) tal y como aparecerá en un navegador web, debe hacer clic en el botón Vista en vivo situado 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 de panel utilizando el inspector de propiedades, como se muestra en las instrucciones que siguen.
Coloque el cursor en una página en la que desee que aparezcan los paneles de acordeón.
Elija Insert→jQuery UI→Accordion, o haga clic en el elemento Acordeón en el panel Insertar UI de jQuery Un grupo de paneles de acordeón plegables de jQuery UI con tres paneles aparece en la página.
Seleccione la palabra Sección en la parte superior de cada panel y reemplácela por el texto que desea que aparezca en el área de pestañas del panel. por defecto, el texto en el área de pestañas es texto sin formato, pero puede cambiarlo modificando la regla CSS correspondiente o formateando el texto utilizando etiquetas HTML, como las etiquetas de encabezado.
Seleccione la palabra Contenido en el área principal de cada panel e introduzca el texto o las imágenes que desee mostrar. Del mismo modo, puede insertar imágenes en los paneles como lo haría en cualquier otro lugar de una página: Coloque el cursor en el panel, seleccione Insert→Image→Image y seleccione el archivo GIF, JPEG o PNG que desee mostrar. También puede seleccionar un archivo de Photoshop si desea utilizar Dreamweaver para optimizar las imágenes. cuando pegue texto en un panel, elija Edit→Paste Especial para elegir la cantidad de formato que desea conservar en el texto que pegue en Dreamweaver. Limitar la cantidad de formato preservado puede reducir los posibles conflictos de estilo.
Para cambiar la configuración del panel, haga clic en la pestaña azul de jQuery Accordion en la parte superior de los paneles en el área de diseño, y cuando haga clic en la pestaña azul, la configuración del panel aparecerá en el inspector de propiedades. (Hacer clic correctamente en la pestaña azul puede ser complicado, así que asegúrate de hacer clic en el área azul.) Haga clic en cualquier otro lugar de la página y el inspector volverá a su configuración predeterminada.
Para añadir un panel, haga clic en el signo más (+) a la derecha del campo Paneles. Para eliminar un panel de un conjunto de acordeones, seleccione primero el nombre del panel en la lista desplegable Paneles del inspector de propiedades y, a continuación, haga clic en el signo menos (@@@min).
La configuración del evento controla si los paneles se abren cuando un usuario hace clic en una pestaña del panel (Click) o pasa el cursor por encima de la pestaña del panel (Mouseover).
Las opciones de acordeón en el inspector de propiedades son opcionales, e incluyen la capacidad de desactivar uno o todos los paneles (Desactivar) y animar la forma en que los paneles se abren y se cierran (lista desplegable Animar).
Elija File→Save 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 Para que las funciones de Spry funcionen, debe cargar estos archivos en su servidor web cuando cargue la página web.
Para cambiar la apariencia del panel, como la cara de la fuente o el color del texto, edite la regla CSS correspondiente Nota: No puede editar los estilos correspondientes para un panel de acordeón hasta que la página se haya guardado y Dreamweaver haya generado los archivos CSS y JavaScript correspondientes.
Para ver cómo aparecerán los paneles en un navegador web, haga clic en el icono del globo terráqueo en la parte superior del espacio de trabajo y seleccione el navegador que desea utilizar para obtener una vista previa de la página. cuando utilice el equipo para obtener una vista previa de una página que tenga una función interactiva que requiera JavaScript u otra programación, algunos navegadores web, incluido Internet Explorer, mostrarán una advertencia en la que se indica que debe permitir que los controles ActiveX vean la página. Si publica la página en un servidor web y luego la visualiza a través de una conexión a Internet, este error no aparecerá para usted ni para los visitantes de su sitio.
