Martin Iglesias | Recursos y Descargas

Agregar eventos a jQuery UI datePicker

Wed, 16 May 2012 09:00:02 +0200

Esto es magia en estado puro. Me lo encontré buscando como agregar eventos al jQuery UI datePicker para que, en lugar de seleccionar la fecha indicada, muestre una alerta o siga un vínculo desde cada día del calendario.

Encontré este código que voy a copiar y pegar tal cual... antes que me muerdan, el código no es mío, pero lo que hace, básicamente, es crear un array con los eventos a mostrar y luego capturar el evento de seleccionar la fecha.

No lo he probado aún para saber qué pasa si quisiera seleccionar la misma fecha en la que hay un evento. Entiendo que debería funcionar de todos modos, pero, repito, no lo he probado.

En la demo, para ver los eventos, deben moverse hasta febrero y marzo de 2011 (en la primer línea de este código que pego abajo se ven las fechas).

Recuerda: necesitarás jQuery UI con el plugin datepicker seleccionado si no bajas la librería completa.

jQuery UI Multiselect Widget

Tue, 15 May 2012 14:52:13 +0200

Este plugin o widget como lo llama su autor, se encarga de ponerle un aspecto muy pero muy (y no exagero) a los select multiple de html. Básicamente lo que hace es convertir la lista desplegable en un conjunto de checkboxes con opciones de seleccionar todos a la vez o ir seleccionando uno a uno con un simple click y sin necesidad de utilizar la tecla CTRL en Windows o OPTION (creo) en Mac.

Lo descubrí gracias a mi compañero Antonio -que no tiene ni twitter, ni web ni facebook- y de casualidad -en realidad por estar mirándole el source de una web que está desarrollando- y creí necesario compartirlo en mi web.

Tienes unas demostraciones online para ver de lo que hablo y su descarga también lo tienes en ese enlace.

¿Por qué se llama UI?
Porque necesitarás instalar en tu web, además de la librería jQuery, la librería jQuery UI, que extiende las funcionalidades de jQuery añadiendo elementos tales como, un selector de fechas, poder arrastrar objetos y muchos más, así que ya sabes, no te olvides de descargar la versión adecuada según la versión de jquery que utilices.

Configuración
Es muy configurable, tiene múltiples opciones y efectos que puedes aplicar fácilmente. Es configurable mediante el CSS de jQuery UI y aplicarlo en tu web no te llevará más de 3 o 4 líneas de código ya que en realidad, declararás tu select múltiple del modo habitual que harías, pero el js se encargará de reemplazarlo.

9 excelentes plugins para jQuery que no pueden faltar en tu web

Wed, 25 Apr 2012 09:00:01 +0200

Lo que traigo a continuación es una colección de plugins para nuestra ya archiconocida librería jQuery que me he encontrado dando un paseo por la vieja web de plugins de jQuery.

Si bien la web está semicerrada por rediseño, los usuarios no dejan de publicar sus nuevos desarrollos y hoy, justamente, me encontré un usuario que ha publicado 9 plugins que no están nada nada mal. En realidad fueron 10 plugins, pero uno no me convenció, así que me quedé con los 9 elegidos.

jQuery uLightBox
Un plugin para crear las ya conocidas ventanas del tipo lightbox. Muy fácil de usar y muy personalizable. Cuenta con muchas opciones, ya sea ventanas del tipo modales, ventanas que pueden ser arrastradas, con fondo, sin fondo, etc...

jQuery Loupe
Creo que se entiende de sobra... efecto de lupa para nuestras imágenes, con unas demos realmente impresionantes. Según la propia descripción de la web, agrega zoom a tus imágenes con una sola línea de código.

jQuery Notty
Mini plugin para mostrar notificaciones en pantalla de un modo no intrusivo, vamos, los típicos avisos que salen arriba a la derecha :) Las notificaciones pueden esconderse solas, con un click, etc...

jQuery uQR
Este plugin sirve para crear los muy de moda códigos QR que todos o casi todos ya hemos aplicado a algún proyecto o tarjeta de visita. El script se ocupará de reemplazar una imagen indicada por un código QR según el texto indicado.

jQuery contextMenu
Un plugin diseñado para crear menús contextuales cuando se utiliza el botón derecho del ratón. Muy configurable, inclluso con submenús y basado en listas desordenadas...

jQuery wiggle
Plugin para animar nuestros iconitos, tal como hacen los iPhone cuando lanzas una aplicación. Sinceramente no le veo más funcionalidad que un efecto cuando pulsas un botón o un mouseover.

jQuery uScrollbar
Otro plugin para crear barras de desplazamiento verticales u horizontales personalizas. Muy configurables (con hasta 15 opciones) y funcionan en dispositivos Android e iOS, además de tener soporte para la rueda del ratón.

jQuery uCompare
Un plugin para mostrar de un modo muy bonito el "Antes" y "Después" de nuestras fotografías, simplemente desplazando el ratón de un lado a otro de la foto, el plugin se encargará de mostrarnos la porción de foto que corresponde.

jQuery uSlider
Un plugin para hacer un slide de fotografías que pueden mostrar un texto descriptivo y puede configurarse la duración entre una imagen y otra, si se ejecuta automáticamente y la duración.

Alternar colores en las filas de una tabla con jQuery

Wed, 18 Apr 2012 08:29:43 +0200

Este pequeñísimo código hará que todas las filas de una tabla alternen su color de fondo automáticamente utilizando la librería jQuery, sin declarar clases ni ningún código en especial.

Hay muchísimas formas de hacer ésto, una es con PHP como nos enseña Webintenta, pero creo que, hoy día, el 99% de los desarrolladores web están utilizando jQuery, Mootools o cualquier otro framework en javascript para sus proyectos. Por esta razón, veo más que útil aplicar una nueva opción visual a tus trabajos con 1 línea de código.

Básicamente, tenemos 2 formas de alternar el color de fondo de nuestras filas con jQuery (seguramente existan más formas), pero me voy a parar en estas 2. La primera, es aplicando una clase a las filas pares o impares y la segunda, es aplicando directamente el color de fondo.

Dicho ésto, debemos recordar que aplicar el CSS directamente, hará que por cada cambio que nos interese hacer, tendremos que escribirlo en una nueva línea, mientras que aplicando clases, podemos definir muchos efectos visuales a la vez (fondos, negritas, etc...)

Ya hablaste demasiado... dame el código.
Es verdad, para poner 2 líneas de código me pasé hablando... pues vamos a ello.

El código 1, te muestra como alternar los colores de fondo de nuestras filas pares o impares aplicando directamente el color de fondo por CSS.

El código 2, declara las clases a utilizar en nuestra hoja CSS para utilizar el método 2, y el código 3, aplica esas clases a nuestras tablas.

Poner links autom�ticamente a los textos con jQuery

Tue, 13 Mar 2012 08:45:01 +0100

El título de este post lo dice todo. Este plugin en jQuery se ocupará de buscar y reemplazar todas las palabras que encuentre en una cadena y convertirla automáticamente en un enlace totalmente funcional y personalizable.

Se pueden agregar tanto clases, targets y rels definiéndolo directamente en una línea... Eso sí, no se pueden aplicar distintas clases ni parámetros a los distintos enlaces del bloque, pero, en combinación con otras funciones escritas para jQuery se puede realizar prácticamente lo que quieras.

Su implementación es excesivamente fácil. Sólo requiere la librería jQuery, el js del plugin y una línea de código indicando el bloque de texto del que quieres convertir sus enlaces en links y listo!

He puesto una minidemo online, en la caja de arriba, verás la cadena de texto tal cual está escrita y en la de abajo el resultado luego de pasarlo por el plugin.

Si te he convencido y te lo quieres descargar, no tienes más que seguir este enlace! Que lo disfrutes...

jQuery Smooth Scrolling plugin

Fri, 24 Feb 2012 20:03:37 +0100

Smooth Scrolling es un plugin desarrollado en jQuery que sirve para crear un sistema de navegación on-page, es decir, las típicas páginas web de 1 sólo html.

Hablando más claro, si tienes una web con poco contenido y quieres desarrollarla solo en un html pero con el contenido bien organizado, este plugin te viene pintado.

Sólo basta con definir un menú de navegación que quedará siempre fijo en pantalla y luego tantos divs o capas como opciones tenga ese menú... el plugin se encargará de hacer el resto.

Lo genial es que agrega tanto la barra de navegación como unas flechas a la derecha de tu pantalla que sirven tanto para bajar el siguiente nivel como para subir al anterior, todo eso, con desplazamiento suave y muy agradable a la vista.

Su implementación es super sencilla, mira los códigos a continuación... no necesitarás nada más.

Lo malo?
Algo tenía que tener... al parecer no funciona en versiones de Internet Explorer anteriores a la 9, pero no desesperemos, que es una beta y, tal vez, lo agreguen en futuras versiones.

Descargarlo
Es un poco arriesgado, piensa que dejarías a todos los millones de usuarios que aun no actualizaron IE a la v9 sin poder ver el efecto y las opciones no son funcionales... pero si te animas, ahí te dejo el enlace. Suerte!

Offtopic
Cómo odio IE... #hedicho

jQuery Organisation Chart, crea organigramas en html con jQuery

Thu, 02 Feb 2012 08:13:53 +0100

Este plugin lo encuentro muy interesante, se trata, básicamente de crear diagramas organizativos sin necesidad de utilizar imágenes... los organigramas de toda la vida, esos que utilizan todas (o casi todas) las empresas.

Básicamente consiste es una lista desordenada del tipo UL muy trabajada, con sublistas para las diferentes cabeceras y, a su vez, más sublistas para los cargos inferiores...

Explicándome mejor, si quieremos un nivel JEFE -> GERENTE -> EMPLEADO, deberíamos crear una lista tal como se muestra en el código 1 más abajo... utilizar este plugin y dedicarnos a personalizar nuestra gráfica mediante CSS.

Aun no he tenido la necesidad de utilizarlo, sé de algunas webs antiguas que he realizado que llevaban de estas gráficas, tal vez algún día las actualice:)

Características principales:

Muy fácil de usar dado que toda la gráfica es una lista desordenada.
Mostrar / ocultar una rama del árbol haciendo clic en el nodo respectivo.
Los nodos pueden contener cualquier cantidad de HTML, excepto
y
- Fácil de personalizar mediante CSS.
Quiero descargarlo
Pues bien, no desesperes, te dejo una demo (la oficial) y el enlace para la descarga desde la web de su autor.