Plugin Jquery :: ColorPicker >> Ejemplo cambiar color fondo
Hola! hace 6 years 11 months 17 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