jTouch

Para los que se hayan sumado a la moda del iPhone/iPod Touch añado jTouch a la lista de chuletas de jQuery.

Robot animado con jQuery

jQuery + un poco de imaginación = un robot animado como este (http://css-tricks.com/jquery-robot/):

Ya me gustaría a mi tener tiempo para dedicarme a este tipo de cosas.

Visto en: smashingmagazine.com

Chuletas de jQuery

Normalmente como guía de referencia rápida de jQuery uso Visual jQuery. Algunas alternativas interesantes son:

• remysharp.com: Búsqueda por palabras clave con autocompletion. También existente en versión stand-alone (Adobe Air).
• bassistance.de: Browser de documentación organizadada de forma arborescente.

Y si prefieres el papel:

http://refcardz.dzone.com/refcardz/jquery-selectors

http://yensdesign.com/2008/12/useful-jquery-cheatsheet/

Calabaza jQuery

Yo no celebro Halloween pero me molan las calabazas que se curra la gente. Esta me ha llamado especialmente la atención 😉

Visto en http://jquery.com/blog/2008/10/28/jquery-pumpkin/

jQuery Quicksearch

Me atrevería a decir que ya hay miles de plugins de jQuery. Entre ellos jQuery Quicksearch me ha parecido especialmente útil. Permite el filtrado por texto de filas de tablas, items de listas o parráfos.

Su uso es muy sencillo. Por ejemplo, el siguiente snippet añadiría un input sobre la tabla especificada para poder filtrar filas a partir del texto introducido en dicho input.

$('table#table_example tbody tr').quicksearch({
	position: 'before',
	attached: 'table#table_example',
	stripeRowClass: ['odd', 'even'],
	labelText: 'Search the table',
	delay: 100
});

Visto en http://encosia.com/2008/10/19/7-of-my-favorite-jquery-plugins-for-use-with-aspnet/

Visual jQuery actualizado

La última vez que visité visualjquery.com, hace ya un par de meses, estaba «deprecated». No se cuando lo habrán hecho, pero la guía ha sido actualizada a la versión 1.2.6 de jQuery.

Por fin vuelve a ser últil esta excelente guía de referencia rápida de jQuery 🙂

Selector de hora experimental con jQuery

Así como siempre utilizo un selector de fechas para los campos de dicho tipo, nunca me he planteando usar un selector de tiempo. Normalmente dejo que los usuarios introduzcan las horas y los minutos a mano y luego hago la validación. Creo que, gracias a el plugin de jQuery jquery.timepickr.js, voy a cambiar de filosofía.

Espectacular expositor de imágenes en JS

Existen multitud de expositores de imágenes en javascript. Pero no he visto ninguno que me haya gustado tanto como CrossSlide. Además es un plugin de mi «idolatrado» jQuery y se distribuye con licencia GPL. Bueno, bonito y barato ¿Qué más se le puede pedir? 😉

Una vez más, agradecer a el/los autore/s que hayan compartido su excelente trabajo.

Envío de formularios de forma asíncrona

jQuery Form Plugin es, como su nombre indica, un plugin de jQuery que permite de modo sencillo y no intrusivo actualizar formularios HTML para usar AJAX. Aplicado a un formulario se consigue que al hacer submit sobre el, se envien sus datos de forma asíncrona sin necesidad de refrescar toda la página.

Está muy bien documentado con ejemplos así que en este caso no haré ningúno.

jQuery Sparklines

jQuery Sparklines es un plugin de JQuery para la construcción de sparklines o lo que es lo mismo, gráficas tamaño texto de este tipo –> .

Un ejemplo:

Quiero graficar estos valores en un sparline [1,2,3,4,5,4,3,2,1].

Escribo este html:

<span class="sparklines">1,2,3,4,5,4,3,2,1</span>

y le aplico el plugin indicando que coja los valores del html que contiene la etiqueta span…

$('.sparklines').sparkline('html');

…con lo que obtendría esto:

Si quisiera pasar la ristra de valores desde js pues haría esto…

$('.sparklines').sparkline([1,2,3,4,5,4,3,2,1]);

…y obtendría lo mismo:

Los tipos de chart y sus propiedades son personalizables. Si por ejemplo quisiera representar los mismos datos en un gráfico de barras de color verde bastaría con esto:

$('.sparklines').sparkline('html', { type:'bar', barColor:'green' });

y el plugin pintaría este otro sparkline: