Quien me conoce, sabe que soy muy fan de jQuery y la manera en que simplificó el uso de javascript a la vez que aportó grandes funcionalidades y efectos simples y complejos con, muchas veces, pocas líneas de código.

Cientos y cientos de nuevos plugins jQuery se publican cada año. Algunos básicos, ofreciendo funciones simples, otros pueden ser complejos y ofrecer muchas más funcionalidades.

De cualquier manera, ambos tipos de plugins son siempre útiles. En esta lista de 30 plugins jQuery, habrá de las 2 clases, algunos complejos y otros realmente simples..

Otro año más se viene EL evento del año para los amantes de las webs, los juegos, los pica códigos, los diseñadores, los que quieren pasar un buen rato, las novias o novios de todos estos y todo aquel que quiera ir a conocer gente y volver con muchos amigos nuevos.

Subflash ya tiene fecha, lugar, precio y todo preparado. A falta de la confirmación de los talleres (que los iré actualizando en esta mini entrada a medida que se confirmen), pues este año toca la tierra del buen vino riojano... concretamente Ezcaray, bien llamado, el primer municipio turístico de La Rioja.

Yo, este año, no puedo confirmar con tanto tiempo de antelación mi presencia, está condicionada a una serie de acontecimientos, pero, como siempre, haré lo que pueda para poder estar. Pero si tú puedes, no te lo pierdas, hazme caso. El lunes siguiente, me darás la razón..

Volvemos a jQuery y esta vez lo hacemos con un poco de PHP y JSON. Lo que vamos a hacer es rellenar un SELECT (o lista desplegable) con opciones cargadas remotamente mediante JSON.

Para ello, nos vamos a valer de 3 elementos. Un formulario -con un botón para cargar el contenido-, un poco de javascript para hacer la carga de opciones y un PHP que devolverá un array convertido en una cadena JSON.

Tú me dirás, pero a quién se le ocurre cargar las opciones de un select presionando un botón y yo te diré... a nadie, pero la idea es hacer lo que se podría traer automáticamente mediante la interacción de tu click, más que nada, para que veas lo que está pasando..

Siguiendo con mis anteriores post donde hablo de jQuery Validate, esta vez me ha tocado verificar que la fecha ingresada en un campo de texto de mi formulario sea correcta.

Qué quiere decir que una fecha sea correcta... pues que exista. jQuery Validate tiene una opción para validar fechas y otra que llama dateISO, pero según mis pruebas, el primer caso (DATE), sólo verifica que ingreses un número (he probado a poner un 33 y el validador ha pasado de largo)... y el segundo, si bien valida el formato de una fecha (dd-mm-yyyy o yyyy-mm-dd) no verifica que la fecha exista, por lo que si pones 33-33-3333 te deja pasar porque el formato es correcto.

Sin más introducciones, nos metemos de lleno a crear un nuevo método de validación. No hay mucho que explicar, en la documentación de jQuery Validate te explica que este potente plugin permite la creación de métodos propios para validar prácticamente todo, así que a eso vamos..

Como desarrolladores web, a menudo necesitamos mostrar las fechas en nuestro sitio web. Como usuario, no me gusta leer fechas completos como "26 de noviembre 2011 23:30" porque, inconscientemente, me pongo a hacer la cuenta para saber cuánto tiempo pasó hasta el día de hoy.

Prefiero leer fechas inteligentes como "Hace 1 hora" o "hace 6 meses". Por lo tanto, aquí he escrito una función rápida y sencilla en PHP que muestre la diferencia o tiempo transcurrido basándose en un valor de marca de hora determinado tiempo.

Básicamente definí 2 funciones anteriores:.

A raíz de una consulta en Twitter de mi buen amigo @tecnorama y de mi nuevo amigo @opeto82, he preparado una minidemo para dejar fijo el cabecero (o el elemento que nos interese) al hacer scroll y no perderlo de vista.

Seguramente habrás visto miles de webs (incluso la mía) que al desplazarte con las barras de desplazamiento vertical, pierdes el logo, el menú o algún elemento que te haría falta tener a mano si el contenido se hace muy extenso.

Pues bien, este pequeño código de 2 líneas aplicará una clase CSS a nuestro elemento si el scroll supera determinados pixels y se la quitará si el scroll vuelve a su estado original..

Lo que vamos a hacer en este post es agregar dinámicamente un botón para volver a la parte superior de la web si nuestra página tiene scroll vertical.

Básicamente controlaremos la posición vertical de nuestra página y si ésta supera un tamaño especificado en el código javascript, aparecerá un botón con una flecha apuntando hacia arriba en la parte inferior derecha de nuestra pantalla.

Lo curioso de ésto es que, por una vez, lo haremos sin utilizar ninguna clase de plugin y lo haremos de tal manera que no haga falta escribir el botón en todos los html de nuestra web -aunque en lenguajes dinámicos agregarlo en alguno de los includes que utilices evitaría una línea de javascript-..

Si eres de los que usan las tablas para lo que realmente son, es decir, para mostrar datos tabulares y no para maquetación, este plugin te vendrá bien si tus tablas contienen muchas filas y corres el riesgo de perder los cabeceros de las columnas al hacer scroll.

Si usas Excel, sabrás que puedes fijar el contenido de las cabeceras para mantenerlas siempre visibles en la parte superior y así saber siempre qué columna estás viendo. Pues bien, este plugin hace lo mismo pero en una tabla de HTML.

Quien me conoce sabe que odio las tablas y la maquetación con ellas, pero hay que reconocer que cuando el contenido debe ir en forma de tabla, es absolutamente correcto utilizarlas y no simular su apariencia a base de divs o listas desordenadas..

FractionSlider es un slider más en jQuery, como tantos otros que hay por ahí conocidos tales como el NivoSlider (uno de mis preferidos), el Galleria, etc... pero tiene una particularidad que lo hace diferente y es que cada slide puede tener sus propias animaciones, transiciones y efectos.

Es así, cada uno de los slides puede contener diferentes partes y configurar el orden de aparición, efecto y animación junto al tiempo de duración.

Aunque alertan de algún bug en IE, su autor dice que no ha podido reproducirlos y promete, en la nueva versión publicada, que es slider ya es responsive..

Una ventana modal es una ventana secundaria que requiere que los usuarios interactúen con ella antes de que puedan seguir utilizando la aplicación principal. Las ventanas modales son uno de los elementos de la interfaz de usuario más comúnmente usados, y se utilizan, entre otras cosas, para comunicar información importante, o para alertar de error o advertencia.

Zebra_Dialog es un plugin de jQuery pequeño y compacto (un archivo Javascript, sin dependencias distintas de jQuery 1.4.1+) y altamente configurable para la creación de cuadros de diálogo modales, su intención es la de reemplazar el ALERT y CONFIRM nativos de Javascript además de brindar muchas más opciones como abrir páginas en modo iframe, carga de contenido vía ajax, etc...

También se puede utilizar como un widget de notificación (cuando se configura para mostrar sin botones y cerrar de forma automática) para las actualizaciones o errores, sin distraer a los usuarios de su experiencia de navegación por mostrar alertas molestas..

Si habías visto mi antiguo post del plugin jQuery para contar y limitar caracteres dentro de un textarea (que un amigo twittero me avisó que la página original ya no funciona), he buscado una alternativa a ese antiguo post y he dado con el jQuery Textarea Characters Counter Plugin.

Este plugin, muy configurable y con poquitas opciones, y lo que es mejor, un peso de 5kb en versión producción, te permite personalizar la cantidad de caracteres permitidos, contar las palabras y alertar al usuario cuando está llegando al límite indicado.

No tiene mucho más. Te dejo una minidemo con las opciones básicas y el enlace a la web original para descargar el código..

Un plugin interesa para mostrar una imagen destacada que, al pasar el ratón por encima, mueva esa imagen de tal manera que se vea el trozo oculto.

Además de eso, mostrará un pequeño caption que podemos indicar utilizando el title de nuestra imagen.

Vamos a intentar explicarnos, si tenemos una lista de productos con una pequeña foto miniatura, a menudo nos pasa que debemos cortar la foto porque algunas están tomadas en modo paisaje (apaisada) y otras en vertical y, buscar la forma de encajar ambos tipos de imágenes hace que uno de los métodos siempre pierda..

Me ha surgido el problema de tener que validar que un número de cuenta (de un banco español) sea correcto y necesitaba integrar el método con un formulario en HTML que está utilizando jQuery Validate de Bassistance.de.

Como sabrás, este poderoso plugin de validación permite crear métodos propios de validación para agregarlos a los que ya trae por defecto que son campo requerido, número, dirección de email, dígitos, cantidad máxima y mínima de caracteres, número incluido en un rango, etc...

Trae, además, alguna validación de tarjeta de crédito y de código postal, pero no trae cuenta bancaria, por lo que me decidí, ayudado de una fórmula en javascript que encontré googleando, adaptar dicha función a la validación actual de mi formulario..

Nuevamente con los formularios y en este caso con la necesidad de darle un formato específico a un campo de texto en el que sólo queremos números.

Este plugin, nos dará la posibilidad de enmascarar el valor introducido, aplicando la separación de decimales y millares pero enviando por detrás el valor real sin ningún caracter añadido.

Su funcionamiento es muy sencillo, se indica la class de los input a formatear y la cantidad de decimales que queremos que muestre y ya está hecho..

A menudo debemos hacer formularios web donde le solicitamos al usuario que ingrese una fecha. Hasta aquí no hay problema, pero el tema se complica cuando necesitamos que el usuario nos marque una determinada fecha, en un formato específico, o cualquier variante que se nos pueda presentar.

Lo normal sería, si estás usando el framework de jQuery UI, usar su datepicker, pero si no lo estás usando, cargar todos los js, css e imágenes se hace un tanto pesado, incluso, personalizar su apariencia, requiere que crees un tema o te adaptes a lo que trae.

Pero qué pasa si le agregamos la dificultad de necesitar que nuestro calendario selector sea adaptativo? Y qué pasa si necesitamos configurarle opciones como desactivar fechas, que en el UI no es tan sencillo?.

El título lo dice todo. Si tienes un textarea en el que pretendes que el usuario rellene gran cantidad de texto, esta es una opción más que interesante para evitarle tener que moverse con barras de scroll.

Se trata de un plugin que actualiza el tamaño del textarea automáticamente a medida que vas escribiendo en él y puede ser de dos maneras, simple o con un desplazamiento suave.

Su autor, es el mismo que hizo el ya conocido Colorbox, por lo que es garantía de calidad..

Ocasionalmente podemos necesitar reproducir un fichero de audio en nuestra web, ya sea como muestra de una canción o grabación y no queremos depender de algún reproductor en flash.

Si bien HTML5 ya dispone del tag AUDIO para estas labores, debo aclarar que, como siempre, los distintos fabricantes de navegadores no se han puesto de acuerdo en el codec a estandarizar y algunos navegadores soportan el MP3 como audio mientras que otros, como Firefox, usan el formato ogg.

Pues bien, para hacer que funcione el MP3 en todos, o casi, los navegadores, existe Audiojs, un plugin livianito que reemplazará cada tag audio en nuestra página por un bonito reproductor (personalizable mediante el CSS incluido en el .JS) y, según dice su autor, degrada a un reproductor de flash si tu navegador no soportara el tag AUDIO (como en los viejos Internet Explorer)..

Cuantas veces nos ha pasado que tenemos que presentar una lista de opciones (por ejemplo para una eliminación masiva de registros) y queremos agregar la funcionalidad de marcar y desmarcar todos los checkboxes con uno ubicado, generalmente, en el encabezado de nuestra tabla.

Pues bien, hacer esto no requiere mayor sacrificio, pero esta vez, le quise agregar la dificultad de que el checkbox recuerde su estado original.

Supongamos que estamos editando un registro y tenemos que marcarle muchas opciones o, mejor dicho, queremos añadirle todas las opciones que quedaban sin marcar (porque ya teníamos algunas opciones señaladas anteriormente), y cuando seleccionamos todos los checkboxes nos damos cuenta que nos equivocamos y queremos volver a empezar dejando únicamente marcados aquellos checks que ya estaban marcados..

A veces me gusta darme una vuelta por la sección de plugins de jQuery.com y ver qué hay de nuevo. Muchas veces encuentro plugins que valdría la pena compartir pero que no tienen descripción ni información como para escribir un post entero y, para no terminar en post de 2 parrafitos, esta vez recopilo 6 miniposts en uno.

La minicolección de 6 plugins que dejo a continuación están bien, unos mejor que otros, unos mucho más funcionales que otros pero el que se lleva el premio es el de la marquesina, que, seguramente, alguna web todavía tendrá de estos odiosos textos caminando :)

Al grano...
Ahí va mi pequeña recopilación, dejando título, para qué sirve, enlace a la web y enlace a la demo si lo hubiera..

A menudo te puede pasar de crear un DIV para poner únicamente una imagen (pensemos en una estructura header y 2 columnas) y no sabemos el alto que debe tener cada sección. Lo que tenemos claro es que no queremos que haya separación entre el header y las columnas.

Pues bien, lo que debería ser un simple trámite, de crear un div y meter la imagen dentro se complica por la aparición de un extraño espacio a mayores a base de margen o padding que sólo notarás si juntas las capas, ya sea con distintos fondos o (como en mi ejemplo, poniendo un borde y un fondo dorado).

Si ves el css más abajo o en la demo, verás que estoy usando un RESET brusco, para quitar todos los márgenes o paddings a los elementos, por lo que descarto los valores iniciales que tenga cada buscador en esta materia..

Ya comenté varias veces distintos plugins para personalizar las barras de scroll de tu navegador, div o elemento mediante jQuery. Lo que traigo es otro más, que se suma a la gran lista de plugins para scrollbars y Jquery que encontré aquí.

Perfect Scrollbar es muy pequeño pero potente plugin para personalizar nuestras barras de desplazamientos y pequeño, en todo sentido, ya que cuenta con un CSS de 4 líneas en la versión min y el .js sin comprimir no supera los 8 kb.

Es totalmente personalizable mediante CSS y contiene varias opciones que, acompañado del plugin jQuery Mousewheel nos dará scroll utilizando la rueda del ratón..

Toolbar te permite crear rápidamente un tooltip con estilo barras de herramientas para su uso en aplicaciones web y para cualquier cosa que necesite un submenú con más opciones y no dispongas de lugar para mostrarlo. La barra de herramientas se puede personalizar fácilmente usando los iconos de Bootstrap de Twitter.

Lo veo como una opción muy interesante para aquellos gestores de contenido o intranets donde hay que mostrar perfiles de usuarios con opciones diferentes como modificar datos, avatar, y más opciones y no quieres mostrar todos los enlaces a la vez.

Aunque aun no lo he probado, debo reconocer que me agrada mucho la idea de hacer un menú contextual que no sea con el botón derecho porque no soy muy amigo de modificarle al usuario las opciones que le da el navegador, por lo que veo muy buena alternativa esta clase de submenús..

Si ya conocías el antiguo calendario multieventos en PHP y te gustaba, lo que te dejo ahora te debería gustar aún más. Viendo que muchos comentarios me pedían funcionalidades para el antiguo calendario y, empujado, por la necesidad de hacer un calendario que no refrescara la página con el cambio de mes, he reescrito el código para modernizarlo.

Este nuevo calendario, que puedes ver la demo online haciendo click en el botón superior, es multieventos, pero para no ensuciar la tabla del mes, mostrará como enlace los días en los que existas eventos, abriendo una modal window o ventana modal para la gestión de esos eventos.

También, permitirá agregar cuantos eventos quieras a un día pero sólo al día actual y próximos, pero permitir eventos en días pasados es tan sencillo como comentar una línea..

Lo que traigo aquí es una alternativa al ya conocido jQuery Columnizer, que servía para separar contenidos en columnas de un modo muy fácil. Easy list splitter cumple la misma función, aunque sólo se encarga de separar en columnas elementos LI de nuestras listas, ya sean de tipo ordenadas (OL) o desordenadas (UL).

El plugin obtendrá la lista, que está dentro de un div contenedor y generará tantas listas como el número de columnas que requieren, dividiendo a partes iguales los elementos de la lista original.

Easy List Splitter mantiene el HTML al mínimo. No hay elementos innecesarios o estilos en línea que se añadan al código. Podrás seleccionar si deseas ordenar los elementos de la lista en vertical o en horizontal..