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