Colorpicker

ColorPicker es un plugin de Jquery que permite mostrar una paleta de colores y escoger un color en especial.

En este artículo vamos a ilustrar un ejemplo en el que utilizamos esta paleta de colores para cambiar el color de fondo de la página de forma dinámica.


El uso es muy sencillo tan solo debemos agregar la librería jQuery necesaria, el plugin y los estilos necesarios en el <head> de vuestra página:

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

Después en nuestro <body> podriamos tener un campo de texto donde recogeremos el código hexadecimal del color seleccionado y un botón para abrir el selector o paleta de colores.

Los estilos necesarios y el plugin los puedes descargar.

<input type="text" id="hex_color">
<input type="button" id="colorSelector" value="Color">

Y finalmente solo nos falta la clave del asunto, la llamada al plugin para realizar toda la funcionalidad para cambiar el color de fondo:

<script>
$('#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) {

        $('body').css('background', '#' + hex);
        $("#hex_color").val('#'+hex);

    }
});
</script>

Ver ejemplo en funcionamiento

Descargar plugin

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(4 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

3 respuestas a “Colorpicker”

  1. dixon zamora dice:

    Saludos con regularidad visito tu pagina y encuentro orientación ara la solución o la solución en si, en este caso estudiando el ejemplo y aplicándolo funciona perfecto ahora bien sucede que no se aplica a ningun otro elemento ya sea div, contenedor, un row.. que orientacion podrias brindarme

  2. fran dice:

    No funciona

  3. […] los colores de fondo y del texto estamos empleando el plugin ColorPicker de jQuery que nos permite elegir un color de una paleta de […]

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre