martes, 7 de febrero de 2012

Paleta de colores (colorpicker) con jQuery

En alguna ocasión puede que necesitemos en nuestros desarrollos Web el uso de una paleta de colores o colorpicker. Hoy os muestro el uso de del plugin jQuery jquery.colorpicker, muy sencillo de utilizar e integrar en nuestros desarrollos.


Primero el código del ejemplo y a continuación su explicación:

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="jquery.colorpicker.css" type="text/css"/>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="jquery.colorpicker.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#picker').colorpicker({
                size: 20,
                label: 'Color: ',
                hide: false
            });
        });
    </script>
</head>
<body>
<label>Selecciona el color:</label>
<select id="picker">
    <option value="FFFFFF">FFFFFF</option>
    <option value="FFDFDF">FFDFDF</option>
    <option value="FFBFBF">FFBFBF</option>
    <option value="FF9F9F">FF9F9F</option>
    <option value="FF7F7F">FF7F7F</option>
    <option value="FF5F5F">FF5F5F</option>
    <option value="FF3F3F">FF3F3F</option>
    <option value="FF1F1F">FF1F1F</option>
    <option value="FF0000">FF0000</option>
    <option value="DF1F00">DF1F00</option>
    <option value="C33B00">C33B00</option>
    <option value="A75700">A75700</option>
    <option value="8B7300">8B7300</option>
    <option value="6F8F00">6F8F00</option>
    <option value="53AB00">53AB00</option>
    <option value="37C700">37C700</option>
    <option value="1BE300">1BE300</option>
    <option value="00FF00" selected="selected">00FF00</option>
    <option value="00DF1F">00DF1F</option>
    <option value="00C33B">00C33B</option>
    <option value="00A757">00A757</option>
    <option value="008B73">008B73</option>
    <option value="006F8F">006F8F</option>
    <option value="0053AB">0053AB</option>
    <option value="0037C7">0037C7</option>
    <option value="001BE3">001BE3</option>
    <option value="0000FF">0000FF</option>
    <option value="0000df">0000df</option>
    <option value="0000c3">0000c3</option>
    <option value="0000a7">0000a7</option>
    <option value="00008b">00008b</option>
    <option value="00006f">00006f</option>
    <option value="000053">000053</option>
    <option value="000037">000037</option>
    <option value="00001b">00001b</option>
    <option value="000000">000000</option>
</select>
</body>
</html>


Lo primero, como siempre, el fichero jquery.js. A continuación el fichero del plugin jquery.colorpicker.js y la hoja de estilos de la paleta de colores jquery.colorpicker.css.

Seguidamente, aplicamos el plugin a nuestro elemento select con id picker, estableciendo como valores de configuración del plugin su tamaño, el texto de la etiqueta que va a mostrar y si se muestra o no el select original. Las opciones de configuración del plugin son:


Parámetro Descripción Ejemplo
size Tamaño en pixeles 20
scount Colores a mostrar por fila 6
label Etiqueta del picker Color:
hide Dede ocultarse el select original? false

Tras esto únicamente tenemos que agregar a nuestra página el select con id picker y las distintos valores/option de colores que se van a mostrar.

El ejemplo en funcionamiento:

Puedes descargar los archivos desde aqui: jquery.colorpicker.js jquery.colorpicker.css



No hay comentarios :

Publicar un comentario