I'm using jQuery Spectrum as a color picker in my app (http://bgrins.github.io/spectrum). I can't figure out how to set the palette after the plugin has been initialized.
This how I create a palette when it's first initialized:
$("#showPalette").spectrum({
showPalette: true,
palette: [
['black', 'white', 'blanchedalmond'],
['rgb(255, 128, 0);', 'hsv 100 70 50', 'lightyellow']
]
});
How could I update the palette to a new selection of colors without destroying and re-initializing?
Thanks for any help.
Saw that no one has responded to this yet so I'd thought I give it a try. The short answer is that it is possible to change almost anything once it is in the DOM. I created a simple demo here to show the color palette initialized and then dynamically added (and removed) a color to the palette.
Hope this helps.
$("#colorTest").spectrum({
showPalette: true,
flat: true,
palette: [
['black', 'white', 'blanchedalmond'],
['rgb(255, 128, 0);', 'hsv 100 70 50', 'lightyellow']
]
});
$('#add').click( function() {
var newColor = "<span id='colorRed' title='red' data-color='red' class='sp-thumb-el sp-thumb-light'><sp class='sp-thumb-inner' style='background-color: red;'></span></span>";
if ( $("[data-color='red']").length == 0 ) {
$(newColor).appendTo('.sp-palette-row-0');
}
});
$('#remove').click( function() {
$('#colorRed').remove();
});