crayonsA veces necesitamos ofrecer unos cuantos colores predefinidos a un usuario para que pueda seleccionar cual de todos prefiere para pintar un objeto o dejar como color predeterminado de una parte de nuestra pagina.

Jquery nos ayuda mucho en esto así que he terminado de ayudarnos haciendo una función propia de jquery llamada colorselect().

PLAIN TEXT
JavaScript:
  1. $.fn.colorselect = function(colores, campo, tamanio) {
  2.     if(tamanio==''){    tamanio = 20;        }
  3.     if(campo==''){    campo = 'color';   }
  4.     var o = '<input type="hidden" value="" name="campo" id="color_'+campo+'"/>';
  5.     for(i=0;i<colores.length;i++){
  6.         o += '<div style="height:'+tamanio+'px;width:'+tamanio+'px;margin:2px;float:left;background:'+colores[i]+'" onclick="'+
  7.              '$(\'.color_selector\').css({\'border\':\'0px solid transparent\', \'magin\':\'2px\'}); '+
  8.              '$(\'#color_'+campo+'\').attr({value: \''+colores[i]+'\'}); '+
  9.              '$(this).css({\'border\':\'2px solid '+colores[i]+'\', \'magin\':\'0px\'});'+
  10.              '" class="color_selector"> </div>\n';
  11.     }
  12.     $(this).html(o);
  13. };



Esta función no se diferencia mucho de las que solemos ver en PHP, también tiene varios valores opcionales.
El primer valor es un array con los nombres de los colores en tipo css (nombres predeterminados como "black" o "red" y nombres en hexadecimales como "#000"), el segundo el nombre del campo que almacenará el color seleccionado y el tercero el tamaño del cubo de selección.

Ejemplo para el ID "color_select":

PLAIN TEXT
JavaScript:
  1. 
  2. $(document).ready(function(){
  3.     $("#color_select").colorselect(Array('black', 'green', 'yellow', 'orange', 'red', 'blue'), 'color', 20);
  4. });



A continuación dejo un ejemplo de una pequeña pagina para probarlo..

PLAIN TEXT
HTML:
  2.     <head>
  3.         <title>LiveCuadricula</title>
  4.         <script src="http://code.jquery.com/jquery.js"                type="text/javascript"></script>
  5.         <script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"  type="text/javascript"></script>
  6.         <script type="text/javascript">
  7. $.fn.colorselect = function(colores, campo, tamanio) {
  8.     if(tamanio==''){    tamanio = 20;        }
  9.     if(campo==''){    campo = 'color';   }
  10.     var o = '<input type="hidden" value="" name="campo" id="color_'+campo+'"/>';
  11.     for(i=0;i<colores.length;i++){
  12.         o += '<div style="height:'+tamanio+'px;width:'+tamanio+'px;margin:2px;float:left;background:'+colores[i]+'" onclick="'+
  13.              '$(\'.color_selector\').css({\'border\':\'0px solid transparent\', \'magin\':\'2px\'}); '+
  14.              '$(\'#color_'+campo+'\').attr({value: \''+colores[i]+'\'}); '+
  15.              '$(this).css({\'border\':\'2px solid '+colores[i]+'\', \'magin\':\'0px\'});'+
  16.              '" class="color_selector"> </div>\n';
  17.     }
  18.     $(this).html(o);
  19. };
  20. $(document).ready(function(){
  21.     $("#color_select").colorselect(Array('black', 'green', 'yellow', 'orange', 'red', 'blue'), 'color', 20);
  22. });
  23.         </script>
  24.     </head>
  25.     <body>
  26.         <div id="color_select">contenido por si el Javascript está desactivado</div>
  27.     </body>
  28. </html>