Unidad 23. Widgets de jQuery (III)


La sección Animate tiene dos controles. La primera es una lista desplegable de todos los efectos de animación por los que se despliega u oculta el acordeón que son posibles. El segundo control nos permite establecer el tiempo en milisegundos que va a durar la animación. Un efecto de un segundo tendrá un valor de 1000.

Con la sección Icons, simplemente podemos modificar el tipo de iconos que aparecerán en el título de las secciones cuando está desplegado o colapsado.

Finalmente, como muchos otros elementos de una página web, el widget tiene una propiedad ID que también podemos ver en el Inspector de propiedades. De forma predeterminada, Dreamweaver establece esta propiedad como Accordion1, un segundo widget del mismo tipo en la página será Accordion2, etcétera. Obviamente, podemos personalizar la propiedad ID con el identificador que deseemos, pero lo más importante es que podemos aprovechar esta propiedad para modificar sus atributos CSS. Por ejemplo, sus propiedades de diseño, como el ancho y el alto (width y height, respectivamente), si va a ser un elemento flotante, etcétera.

Ahora es tu turno, vamos a practicar el uso del widget de jQuery Accordion, para ello vamos a utilizar una de las páginas que hemos creado en capítulos anteriores.

Para practicar realiza el ejercicio paso a paso Uso del widget de jQuery Accordion.

 

23.3. Tabs

Con el widget Tabs obtenemos un área organizada por fichas, cada una con su propio contenido. Como en el siguiente ejemplo.

 

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

De modo similar al widget anterior, podemos editar el contenido de cada ficha haciendo clic en Contenido e insertando el texto, imágenes o elementos que deseemos. Pasando el cursor sobre otra ficha, aparece el icono para cambiar a ella y, de nueva cuenta, continuar con la edición. En la vista En vivo, podemos editar el widget y ver su funcionamiento al mismo tiempo, del mismo modo que en el caso anterior.

El Inspector de propiedades muestra las siguientes opciones cuando el widget Tab está seleccionado.

En realidad, son muy similares a las de Accordion: Paneles permite aumentar o disminuir el número de fichas, así como reorganizarlas. Active permite establecer la ficha activa. Event determina si funciona con un clic o pasando el cursor sobre la ficha para que muestre su contenido. Height Style determina cómo debe ajustar su tamaño de acuerdo a su contenido. Las casilla Disabled desactiva su funcionamiento. Hide y Show permiten configurar la animación con la que va a aparecer u ocultarse el contenido de cada ficha y el tiempo de cada efecto.

La diferencia está en el control Orientation, ya que las fichas pueden aparecer horizontal o verticalmente.

 

Para practicar realiza el ejercicio paso a paso Uso del Widget de jQuery Tab.

 


Marzo-2015
Pág. 23.3
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.