I’m working on a program that uses HTML/CSS/Javascript/JQuery for its user interface. One of the things this UI needs to do is allow users to select one option from a predefined list of colours. Ideally, elements within this list would have both a visual representation of the colour being selected, and a label (ie, a red square with a label that says “red”). Anything I implement needs to work in Safari and IE8+.
I can’t use the default select element, because I can’t style the option elements in Safari. This plugin allows option elements to contain custom, styelable HTML and thus meets my requirements, but is a little bit buggy and really slow. When using this plugin, my UI menu takes about 1000 ms to load, with >90% of it coming from initializing 5 select elements — which renders the plugin pretty much unusable.
So, I’m stuck. I’ve found this:
and this:
… but, as far as I can tell, neither provide any way to add colour to their option elements. There is also the jQuery UI Selectable interaction, but this has problems, too: because there will be many elements to select from and limited space in my UI, I need to have some sort of dropdown/scrolling capacity. Also, there doesn’t seem to be any way that I can tell to limite the user to only selecting a single option at once, nor does there seem to be a direct way to ascertain which elements are selected.
In the end, what I’m looking for is something like the colour picker in Sketchup. If anyone has any suggestions as to possible plugins I could use, I would be most grateful. Although I would prefer jQuery plugins, I’m open to pretty much anything that might work.
Many thanks,
Josh
PS Any up ratings on this question would be greatly appreciated, as not being able to post images or more than two links makes it harder to ask good questions.
if you look at the planning page for jquery UI color picker they list a bunch of color pickers
edit
you may like to build your own maybe start super simple with something like this (fiddle)