Plugin Jquery :: ColorPicker >> Ejemplo cambiar color fondo
Hola! hace 8 years 3 months 14 days que escribí esta entrada, puede que esta información ya no sea valida en la actualidad, por favor se comprensivo conmigo cuando comentes 🙂ColorPicker es un plugin de Jquery que permite mostrar una paleta de colores y escoger un color en especial. El uso es muy sencillo solo debemos agregar las librerías necesarias,a continuación les muestro un ejemplo del uso de este plugin para cambiar el color del fondo (body) de una forma dinámica, para usar el plugin solo debemos escribir lo siguiente:
Agregamos el objeto que llamara a ColorPicker
<input type="button" id="colorSelector1" value=" Color ">Relacionamos el objeto con el plugin.
<script> $('#colorSelector1').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_color1").val('#'+hex); $("#resultado1").val(rgb2hex($('#prueba').css('background'))); } }); </script>
Hola, tengo una pregunta al momento de seleccionar el fondo que quieres esta todo bien, pero si das F5 se pone el fondo que señalas por defecto. ¿Como podría solucionar eso? Osea, seleccionar un fondo dar f5 y que el color que seleccionaste siga ahí..
Tienes varias opciones y depende el lenguaje de programación, las 2 que yo he utilizado son:
1. Guardar el valor en una base de datos por medio de ajax, puedes crear una función que haga un insert o update en una tabla con el valor del color seleccionando, y la agregas en onchange.
2. Usando cookies. Con ajax puedes llamar una pagina php que reciba el parámetro background , y almacene localmente este valor y luego en el body con Onload puedes consultar este valor y cambiar el color del fondo.
Para guardar:
setcookie(“background”, “AQUI GUARDAS EL COLOR”);
Para Consultar:
echo $_COOKIE[‘background’];
Espero que te sea de utilidad.
Saludos.
Hola sé que el post es del año pasado pero ahí te va una pregunta, uso el colorpicker, almaceno el valor guardado en una BD y todo va bien, la duda es como puedo cambiar el color del input donde va cambiando el valor del color, osea, en vez de cambiar el color de fondo se cambie el color del input, saludos 😉
Listo ya quedó tu código me sirvió de muchísima ayuda mil gracias, les dejo el código por si alguien le sirve 🙂
var testChange = function(target, color){
target.val(‘#’ + color);
}
$(document).ready(function(){
$(‘input.gccolor’).gccolor({
onChange: function (hsb, hex, rgb) {
$(‘#Background_Color’).css(‘background’, ‘#’ + hex);
}
});
$(‘input.gccolor2’).gccolor({
onChange: function (hsb, hex, rgb) {
$(‘#Name_Color’).css(‘background’, ‘#’ + hex);
}
});
$(‘input.gccolor3’).gccolor({
onChange: function (hsb, hex, rgb) {
$(‘#Title_Color’).css(‘background’, ‘#’ + hex);
}
});
});
Ok, gracias por tu código se que le va a ser de mucha a ayuda a alguien que lo necesite. Igual te dejo una idea…
En el evento onchange del colorPicker agregas el color a tu input, exactamente en esta parte:
Saludos.
buenas.. una consulta, si quiero cambiar la posicion en la que aparece dentro de la pagina como hago?? ya intente con divs con td tr table etc etc.. pero siempre em aparece en el mismo lugar :S:S:S… una mano por favor…
[email protected]
Gracias por el plugin. Ahora, tengo un consulta que hacerte : Lo he descargado, guardado en el servidor, pero al comprobar en los servidores, no me funciona el color. (en cambio en la “vista en vivo” de Dreamweaver, me sale perfecto). ¿ Cuál podría ser el problema?
Saludos
Atentamente
Enrique Crusellas