¿Alguien ha codificado un selector de color de consulta jQuery que le permite elegir colores de una lista predeterminada de colores? Algo así como un selector de color del producto en un sitio de comercio electrónico.jQuery Color ** Swatch ** Selector
La mayor parte de la búsqueda que he hecho revela una gran cantidad de propósitos generales, escoger-cualquier-color-en-el-espectro-rgb, pero pocas opciones para elegir colores específicos.
Hay Really Simple Color Picker que le permite establecer colores predefinidos (soy británico :-P). Le permite cambiar el color con un cuadro de entrada, pero un comando jQuery rápido le permite desactivarlo si solo desea colores predefinidos.
Hmm, supongo que no desea un menú desplegable con valores con nombre.
¿Qué hay de escoger sus colores, y luego hacer un bucle
$.each(['red', 'blue', 'green'], function(i, colour) {
$('ul#my-colours').append('<li style="background-color: ' + colour + ';">Choose</li>');
});
$('ul#my-colours li').click(function() {
setColour($(this).css('background-color'));
});
Y luego hacerles decir 20 x 20 píxeles y flotan ellos?
+1 útil Código útil seguro, pero estoy más interesado en encontrar algo que esté pulido con algunos buenos efectos y la inevi problemas de estilo de tabla ya arreglados. –
@Alan Storm Definitivamente, lo entiendo. Me pregunto si podría hackear una solución existente, es decir, limitar la cantidad de colores que genera, y obviamente hacer que los objetivos cliqueables sean más grandes (porque estás limitando los colores disponibles). – alex
Infierno sí lo tienen! Encontré esta joya el otro día. http://acko.net/dev/farbtastic
Gracias por el entusiasmo, pero ¿has leído la pregunta? Eso es exactamente lo que no quiero. –
Lo siento, aparentemente no lo hice. – Ballsacian1
hice un colorpicker que proporciona esto como una opción si alguien está interesado:
He aquí una demostración de trabajo: http://jsfiddle.net/bgrins/S45tW/
$("#showPaletteOnly").spectrum({
color: "rgb(244, 204, 204)",
showPaletteOnly: true,
palette: [
["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)",
"rgb(204, 204, 204)", "rgb(217, 217, 217)","rgb(255, 255, 255)"],
["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",
"rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"],
["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)",
"rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)",
"rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)",
"rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)",
"rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)",
"rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)",
"rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)",
"rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)",
"rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)",
"rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"]
]
});
Excelente implementación, gracias. – Echilon
Tal vez soy un poco tarde para añadir mis dos centavos, pero aquí están los mejores grupos predefinidos de muestras de colores que he encontrado: https://github.com/maxmackie/jquery.swatches
+1 para el complemento y * color *: P – alex
¿Esto todavía funciona para la versión actual de jquery? No recibo ningún evento de clic en el bloque de colores. – Bob
@Byron Cobb: funciona bien para mí en 1.4.2 en IE, Chrome y Firefox. Escribí una demostración rápida para usted, http://jsfiddle.net/GA67R/1/. Debe capturar el evento * change * en lugar de hacer clic en eventos. –