Cómo crear paneles en fichas con jquery en dreamweaver
La opción de interfaz de usuario jQuery Tab en Dreamweaver hace que sea fácil de añadir una serie de paneles que deben mostrarse o contenido ocultar correspondientes a una serie de pestañas. Al igual que en los paneles plegables, esta función jQuery UI le permite mostrar más información en menos espacio dentro de una ventana del navegador.
Video: BARRA DE MENÚS SPRY Y PANELES EN FICHAS SPRY
Al igual que en los paneles de acordeón, con pestañas de los paneles se pueden utilizar para mostrar el texto, imágenes y multimedia.
Al crear paneles en fichas con el widget jQuery UI en Dreamweaver, puede especificar el orden de las pestañas, el control efectivo de lo que parece el contenido cuando se carga por primera vez la página.
Siga estos pasos para crear un grupo de paneles con pestañas:
Coloca el cursor en una página en la que desea que aparezca el panel de pestañas.
Seleccione Insertar → → jQuery UI aquí, o haga clic en las pestañas de elemento en el panel jQuery UI Insertar.
Un panel de pestañas se inserta en la página y los archivos CSS correspondientes aparecen en el panel CSS Diseñador de origen.
En el espacio de trabajo principal, seleccione el Tab1, Sep2, y pestaña 3 texto, a su vez, y luego vuelva a colocar cada ficha rúbrica con el texto que desea que aparezca en el área de la ficha del panel.
Puede editar el contenido de las pestañas sólo en el espacio de trabajo, no en el inspector de propiedades. Por defecto, el texto en el área Tab es audaz y negro, pero se puede cambiar el formato que mediante la alteración de la regla CSS correspondiente.
Para ajustar el tamaño de cada ficha, seleccione la ficha y luego usar la configuración de ancho y la altura del inspector de propiedades.
Con una pestaña seleccionada, el inspector de propiedades muestra la configuración de esa pestaña en concreto.
Para añadir contenido, seleccione la palabra Contenido en la zona principal de cualquier panel de la pestaña seleccionada y luego introducir texto, imágenes o multimedia.
Puede copiar texto en un panel de pegándola mismo modo que se pega 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: Seleccione Insertar → Imagen → Imagen y luego seleccione el formato GIF, JPEG o PNG que desea visualizar. También puede agregar multimedia o archivos de Photoshop si desea utilizar Dreamweaver para optimizar sus imágenes.
Para cambiar la apariencia de una pestaña o un panel, tales como el tipo de fuente o el color, modificar la regla CSS correspondiente.
Video: Tutorial: Crear un sitio web con JQuery Mobile en Dreamweaver
Por ejemplo, para editar el color del texto o de la fuente en las pestañas, seleccione la caja alrededor de la lengüeta y la caja alrededor estilo se selecciona automáticamente en el panel de selección diseñador CSS.
Para editar el número o el orden de los paneles con pestañas, haga clic en la pestaña azul jQuery aquí en la parte superior del panel situado en el área de diseño.
Video: Integracion de JQuery UI en Dreamweaver CC
Al hacer clic en la pestaña azul, los ajustes del panel aparecen en el inspector de propiedades. Haga clic fuera del área de caja azul, y el inspector de propiedades vuelve a su configuración predeterminada.
Para añadir pestañas, haga clic en el icono de signo más (+) del inspector de propiedades.
Las nuevas pestañas aparecen en el espacio de trabajo.
Para cambiar el orden de las fichas, seleccione el nombre de la ficha del inspector de propiedades y luego usar las flechas en el campo de los paneles para mover el panel.
Video: Crear un Slider con JQUERY en HTML y Ejemplos con JQUERY FancyBox2
nombres del panel se mueven arriba y abajo del menú, tal como se cambia el orden. Paneles y sus correspondientes pestañas aparecen en la página web en el orden en el que aparecen en el inspector de propiedades.
Seleccione el panel en los paneles de la lista desplegable que desea mostrar cuando la página se carga en un navegador web.
La lista desplegable se corresponde con los nombres que asigne a cada pestaña en el espacio de trabajo.
Seleccione Archivo → Guardar para guardar la página- cuando aparezca el cuadro de diálogo Copiar archivos dependientes, haga clic en OK para generar automáticamente todos los archivos relacionados.
Para la interfaz de usuario jQuery ofrece para trabajar, debe subir estos archivos a su servidor web cuando se carga la página web.
Haga clic en el icono del globo en la parte superior del espacio de trabajo y seleccione un navegador para previsualizar su trabajo en un navegador.
Dependiendo de su navegador web, puede que tenga que permitir que los controles ActiveX para previsualizar la página en su ordenador.