jQuery ColorPicker. Tres plugins que merece la pena tener en cuenta.

Todos alguna vez, hemos necesitado incluír campos de selección de color (colorpicker) cuando realizamos zonas de administración o backOffice.
Está muy pasado de moda y queda demasiado rudimentario incluir campos de texto donde se introduzca el código hexadecimal del color deseado, además, de esta forma es un poco complicado explicar lo qué significa el código #ff0000. Si queremos hacer las cosas fáciles de usar, y proporcionar al usuario algo fácil e intuitivo, hay que incluir una aplicación de selección de color desde donde el usuario seleccione el color deseado de forma visual.

En este artículo mencionamos tres plugins de jQuery para la inclusión de un colorPicker en campos de formularios.

Farbtastic está escrito por Steven Writtens con licencia GPL. Si quieres más información sobre el plugin, pulsa aquí. Es muy fácil de incluir:
1. Incluir los archivos javaScript y CSS en el HTML de tu página web.
  
  

2. Añadir un elemento que sea el contenedor del gráfico y el campo de texto, y asignarles un identificador a cada uno de ellos.
3. Añadir al evento ready() un controlador que inicializa el color picker y lo enlaza con el campo de texto.
<script type="text/javascript">
  $(document).ready(function() {
    $('#colorpicker').farbtastic('#color');
  });
</script>
ColorPicker, está programado por Stefan Petre. Con dos tipos de licencia, MIT y GPL. Puedes ver su página web pulsando aquí.
Si quieres ver la guía rápida de implementación, pulsa aquí. La inclusión en tu página web es muy rápida, cargas los archivos javaScript y CSS necesarios, creas un campo de texto que sea el que incluya el colorPicker y le asignas un identificador, a continuación, en el evento ready(), lo inicializamos asignándoselo al identificador del campo creado.
$('idCampoDeTexto').ColorPicker();
Si queremos activarlo con opciones personalizadas:
$('idCampoDeTexto').ColorPicker({option1:val1,opt2:val2,...});

jPicker es una migración del plugin escrito para Prototype por John Dyers (fantástico plugin). Puedes ver más información sobre el plugin en la página de jPicker.


Comentarios

Comentario de - 15 de Diciembre de 2009 - 10:49
Muy buen artículo en español sobre color pickers. Enhorabuena!
Comentario de syrope - 09 de Agosto de 2010 - 00:35
He probado el tercero en un proyecto propio y me ha parecido un plugin genial. Un gran trabajo de Chris Tillman, le doy mi más sincera enhorabuena.
Ha habido un error en el envío
Comentario enviado. Será revisado por la moderación antes de ser publicado.

Deja tu comentario

Tu nombre:
Tu email:
Tu comentario:
Nuestra página web utiliza cookies propias y de terceros, para realizar el análisis de la navegación de los usuarios y así poder mejorar nuestros servicios. Si continúas navegando, consideramos que aceptas su uso. Puedes cambiar la configuración u obtener más información aquí