Entradas Etiquetadas jQuery

Envolviendo el código – jQuery Wrap()

Hace unos días tuve un reto con un layout en html, quería meter un div dentro de otro para posicionar unos elementos en forma de grid, lo cual es totalmente posible, no podía modificar la estructura html de ese grid, pero si podía insertar código javascript.

Lo primero que pensé fué usar el metodo clone de jquery, crear el wrapper e insertar el objeto clonado ahí.

Pero investigué un poco más y conocí el wrap que se encarga de hacer justamente lo que necesitaba.

Otras idéas – Pie de foto

Tienes una colección de imágenes en en el html, todas tienen su debida descripción en el atributo alt.

Primero envuelves cada una de las imágenes en un div que vas a usar como el contenedor de la imagen y el pie de foto.

Puedes verlo funcionando en este ejemplo (ver código  fuente)

Comparte
  • Print
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Bitacoras.com
  • MySpace
  • Netvibes
  • Ping.fm
  • Posterous
  • Reddit
  • RSS
  • Technorati
  • Tumblr
  • Twitter
  • Add to favorites

Mejores FAQ’s con jQuery

Una forma de mostrar un FAQ o las preguntas frecuentes sin la necesidad de muchos divs y otras cosas superfluas. (Ver código fuente)

Ejemplo

Comparte
  • Print
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Bitacoras.com
  • MySpace
  • Netvibes
  • Ping.fm
  • Posterous
  • Reddit
  • RSS
  • Technorati
  • Tumblr
  • Twitter
  • Add to favorites

Loops en jQuery con .each()

Viendo ejemplos de jQuery ultimamente, he visto que muchos programadores usan loops con while() o for() en sus scripts. No hay nada de malo en eso, pero debemos saber que .each() también puede hacer loop sobre arrays y objetos.

Comparte
  • Print
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Bitacoras.com
  • MySpace
  • Netvibes
  • Ping.fm
  • Posterous
  • Reddit
  • RSS
  • Technorati
  • Tumblr
  • Twitter
  • Add to favorites

Mensajes, avisos, flashdata…

Las aplicaciones web están basadas en acciones, links, e interacción humana totalmente, lo que nos hace entender que si queremos guiar a los usuarios, debemos informarles de los resultados de sus acciones.

CodeIgniter cuenta con flashdata, que es un tipo de variable de sesión que se borra automáticamente después del siguiente request HTTP. Este tipo de variables es perfecto para mostrar mensajes de error, mensajes de éxito y notificar algo al usuario. Continua leyendo el resto de esta entrada …

Comparte
  • Print
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Bitacoras.com
  • MySpace
  • Netvibes
  • Ping.fm
  • Posterous
  • Reddit
  • RSS
  • Technorati
  • Tumblr
  • Twitter
  • Add to favorites

jQuery 101 (introducción)

jQuery es una librería que nos ayuda a simplificar la programación en javascript y AJAX. A diferencia de otras librerías de javascript, jQuery nos permite expresar un código muy complejo de la forma más sencilla y corta posible.

La metodología es simple: Encuentra cosas, y actúa sobre ellas. Encontramos los elementos con el objeto jQuery $(), que funciona básicamente como document.getElementById, excepto que no solo soporta ids sino también selectores de CSS y xPath, en vez de retornar solo un elemento, puede retornar un array de elementos.

Aquí una pequeña muestra del impacto que jQuery puede tener en tu código. Para una tarea sencilla como añadir un evento al click en los links de una región en una página, usarías javascript y métodos del DOM asi:

Con jQuery vamos directo al punto y nos ahorramos tener que hacer un loop sobre todos los elementos, no hay necesidad de usar múltiples métodos del DOM, solo con un pequeño string tenemos lo que necesitamos.

Cuando este listo … $(document).ready()

Es lo primero que hay que aprender de jQuery. Si quieres que un evento funcione en la página hay que llamarlo dentro de $(document).ready(), todo lo que este dentro de esta llamada, será ejecutado justo cuando el DOM este listo y antes de que el contenido de la página se cargue.

La ventaja de $(document).ready() es que se pueden tener tantos llamados a este método como sea necesario, aparte de que se ejecuta antes de que el contenido de la página este disponible, permitiendo que una cantidad de efectos de esconder, mostrar y otros, estén listas inmediatamente cuando el usuario ve por primera vez los elementos de la página.

Añadiendo contenido

Con jQuery tenemos acceso de forma pragmática al Dom, navegar el documento, tomar y modificar los atributos de los elementos y podemos quitar e insertar contenido.

Este fragmento aparte de mostrar la facilidad para insertar contenido al DOM, un efecto fadeIn, y aplicarle un estilo CSS al nuevo elemento, es un ejemplo de otra de las ventajas de jQuery, el encadenamiento de los llamados a los métodos.

Cada vez que se llama un método de jQuery, esta retorna el mismo objecto jQuery, lo que nos permite volverlo a utilizar sin tener que repetir el selector.

Efectos

jQuery cuenta con un grupo importante de efectos como show(“speed”), hide(“speed”), fadeIn(), fadeOut(), slideUp(), slideDown(), aparte de algunos efectos que sirven para cambiar el estado visible o invisible de un elemento dependiendo de su estado actual toggle().

Cuando son llamados sin el parametro de velocidad los metodos show() y hide(), muestran o esconden inmediatamente el elemento en cuestion. Todos el resto de este grupo de metodos llamados sin parametro de velocidad, usan la velocidad por defecto 400ms.

… Despues de jQuery …

Solo hé tratado una minúscula introducción sobre lo que es posible con jQuery. jQuery es divertido, porque siempre se aprenden nuevos trucos que resultan increíblemente naturales. jQuery simplifica tu código javascript desde la primera vez que lo usas, cada vez que aprendes algo tu código es un poco más simple.

Algunos links importantes:

Comparte
  • Print
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Bitacoras.com
  • MySpace
  • Netvibes
  • Ping.fm
  • Posterous
  • Reddit
  • RSS
  • Technorati
  • Tumblr
  • Twitter
  • Add to favorites

Menús Dropdown con jQuery

Una forma sencilla para lograr rápidamente esos menús con jQuery…

… Una lista sencilla en HTML , un poco de jQuery y CSS

un ejemplo.

Comparte
  • Print
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Bitacoras.com
  • MySpace
  • Netvibes
  • Ping.fm
  • Posterous
  • Reddit
  • RSS
  • Technorati
  • Tumblr
  • Twitter
  • Add to favorites