Asociar un Color Picker a un elemento HTML mediante jQuery

Llamamos Color Picker es un widget gráfico que se suele utilizar para que el usuario pueda escoger colores. El usuario puede seleccionar y ajustar los valores hasta encontrar un color específico. El valor seleccionado en el color picker se verterá en un campo de texto. En este tutorial, te mostraremos cómo añadir un color picker a un campo input de un sitio web.

El Color Picker de jQuery es un plugin sencillo que asocia un color picker a un elemento web. Este tipo de widget ayuda al usuario a seleccionar un color de la misma forma que se hace en programas como Adobe Photoshop. Con el plugin Color Picker de jQuery, puede incrustar el componente del color picker en flat mode o asociar el color picker a DOMElement.

jQuery y la librería color picker

Para asociar un color picker a un elemento HTML en una página web, debes incluir jQuery y el plugin del color picker.

<!-- jquery library -->
<script type="text/javascript" src="js/jquery.min.js"></script>

<!-- colorpicker library -->
<link rel="stylesheet" href="css/colorpicker.css" type="text/css" />
<script type="text/javascript" src="js/colorpicker.js"></script>

Widget de Color Picker

La función ColorPicker() inicializa el plugin Color Picker. Debes seleccionar el elemento y llamar al método ColorPicker() para asociar el widget del color picker.

$('input').ColorPicker(options);

El codigo de a continuación muestra 3 tipos de color picker distintos que puedes utilizar en tu página web.

Color Picker en flat mode

Con el flat mode, el color picker se asocia a un elemento HTML sin necesidad de ejecutar ningún evento.

Codigo Javascript

$(function() {
    $('#colorpickerHolder').ColorPicker({flat: true});
});

Código HTML

<p id="colorpickerHolder"></p>

Asociar un color picker a un elemento DOM

El siguiente ejemplo asocia un color picker a un elemento DOM y utiliza una función callback para mostrar una previsualización de color.

Código Javascript

$(function() {
    $('#colorSelector').ColorPicker({
        color: '#0000ff',
        onShow: function (colpkr) {
            $(colpkr).fadeIn(500);
            return false;
        },
        onHide: function (colpkr) {
            $(colpkr).fadeOut(500);
            return false;
        },
        onChange: function (hsb, hex, rgb) {
            $('#colorSelector div').css('backgroundColor', '#' + hex);
        }
    });
});

Código HTML

<div id="colorSelector"><div style="background-color: #0000ff"></div></div>

Código CSS

#colorSelector {
    position: relative;
    width: 36px;
    height: 36px;
    background: url(images/select.png);
}
#colorSelector div {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 30px;
    height: 30px;
    background: url(images/select.png) center;
}

Asociar un color picker a un campo input

El siguiente ejemplo asocia un color picker a un campo input y utiliza una función callback para adjuntar el valor del color picker al campo.

Codigo Javascript

$(function() {
    $('#colorpickerField').ColorPicker({
        onSubmit: function(hsb, hex, rgb, el) {
            $(el).val(hex);
            $(el).ColorPickerHide();
        },
        onBeforeShow: function () {
            $(this).ColorPickerSetColor(this.value);
        }
    })
    .bind('keyup', function(){
        $(this).ColorPickerSetColor(this.value);
    });
});

Código HTML

<input type="text" maxlength="6" size="6" id="colorpickerField" value="40ff00" />