Píldoras jQuery III – Acordeón Vertical

Vamos con la tercera entrega de píldoras jQuery. Esta vez vamos a ver como hacer un acordeón vertical. El objetivo es conseguir algo similar a la imagen que podemos ver más abajo, de tal manera que cuando hacemos click en el título de una sección esa sección se despliega y el resto de las secciones se contrae:

vertical_accordion

El código completo se puede descargar aquí.

El HTML es muy sencillo:

El árbol DOM correspondiente, que nos ayuda a entender luego cómo usamos jQuery es:

dom_accordion

Los estilos iniciales de la página son los siguientes:

Y ahora la parte importante el script que nos permite definir el comportamiento del acordeón:

Y esto es todo, nos vemos en la siguiente píldora, un menú anidado de tres niveles con jQuery.

 

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Píldoras jQuery II – Barra lateral deslizante

Seguimos con la segunda entrega de las pequeñas píldoras jQuery. En esta entrega vamos a crear una barra lateral deslizante. El código completo del ejemplo puede ser descargado aquí.

El HTML, ya que el resto de la página está vacía es muy sencillo.

El posicionamiento de esa barra, los bordes y los colores lo haremos con CSS. Es también una hoja de estilos muy sencilla.

Una vez ya tenemos todo colacado y con la apariencia que queremos podemos empezar a utilizar jQuery para modificar y hacer la página web y el DOM interactivo. El script que vamos a necesitar lo colocaremos justo antes de cerrar la etiqueta body y será el siguiente:

Y esto es todo. En el próximo capítulo veremos como hacer el típico efecto “acordeón” con varios contenidos en una misma página.

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Píldoras jQuery I – Descripción de una imagen

Me encanta jQuery, es potente, es fácil y sobre todo tiene muchos selectores en común con CSS lo que te permite avanzar muy rápidamente si controlas un poquito de HTML y CSS.

Por eso mismo lo incluyo en mi curso de Lenguaje de Marcas. Con poca explicación y usando la referencia jQuery vamos directos al grano buscando siempre hacer ejemplos lo más prácticos posible.

Con este post inauguro la publicación de dichos ejemplos prácticos en la web. Siempre parto de una plantilla con jQuery bien referenciado e instalado que podéis encontrar aquí.

Partiendo de esa plantilla vamos realizar un ejemplo que cuando pasemos el ratón sobre una imagen nos muestre un texto largo descriptivo de la misma superpuesto en parte inferior de la imagen.

El ejemplo completo lo podéis descargar aquí y consta de los siguiente ficheros:

  • index.html :  El archivo principal, la página web en la que vamos a usar jQuery
  • styles. css: La hoja de estilos de la página web que usaremos para posicionar los distintos elementos (la imagen y la descripción que va a ser un párrafo dentro de un div)
  • js/jquery-3.1.1.min.js: Que es la libería jQuery que hemos puesto dentro de la carpeta js
  • img/image.pn: La imagen sobre la cual tendré que pasar el ratón para obtener la descripción

El html es muy básico ya que es un ejemplo para demostrar como se usa jQuery. Por un lado en la cabecera tendremos que decir que vamos a usar jQuery en nuestra página.

Dentro del cuerpo (<body>) tendremos el contenido HTML

La hoja de estilos que usaremos es muy simple:

Y por último justo antes de cerrar la etiqueta body añadiremos el script que usará jQuery:

Y ya está…efecto común y muy sencillo de hacer. Seguiremos con otro. El próximo una barra lateral que podamos ocultar o mostrar en la pantalla.

 

 

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS