Spectrum colorpicker para estandarizar colorPicker en los navegadores

Spectrum colorpicker para estandarizar colorPicker en los navegadores, es un plugin de jquery que sirve para seleccionar un color de una paleta de colores personalizada, este plugin tiene muchas opciones que permiten manipular la paleta de colores para nuestras necesidades, para configurar el plugin tienes muchas opciones que permiten manipular las diferentes opciones como por ejemplo eventos, tipos de datos en los colores y sobre todo permite crear interacción con elementos html mediante jquery, este plugin permite activar y desactivar el selector de colores en diferentes circunstancias .

La forma de usar este plugin tiene mucho que ver con el acceso por medio de los id, clases con jquery, lo primero que tienes que hacer para usar las diferentes modalidades de este plugin es lo siguiente:

1.- Incluir los archivos js y css incluyendo jQuery en el archivo HTML :


<script src="jquery-2.1.4.min.js"></script>
<script src='spectrum.js'></script>
<link rel='stylesheet' href='spectrum.css' /

2.- En el caso de utilizar en input con una clase determinada se coloca el elemento de la siguiente forma:


<input type='text' class="colores" />

3.- Por último puedes crear el script que permite manipular el elemento y convertirlo en un selector de color personalizado:


<script>
        $(".colores").spectrum({
            color: "#f00",
            showPalette: true,
            palette: [
                ['black', 'white', 'blanchedalmond'],
                ['rgb(255, 128, 0);', 'hsv 100 70 50', 'lightyellow']
            ],
            change: function(color) {
                //alert(color.toHexString());
               $('body').css("background-color",color.toHexString());
            }
        });
            </script>

Puedes ver la documentación completa en la siguiente dirección: https://bgrins.github.io/spectrum/#modes-input
puedes ver inclusive los ejemplos finales en jsfiddle: http://jsfiddle.net/bgrins/ctkY3/

Puede interesarte