Two color pickers have been developed upon the jQuery.colors plugin using the HSL (hue, saturation, lightness) color model.
Demos and docs
- The setGlobals function sets the globals of the anononymous function (which means they remain hidden from the DOM global scope)
- It is an unorthodox method but simpler than object management whilst maintaining scope.
- Where possible, styling that is necessary for the picker to render correctly has been applied to the elements, not in the head.
Better method logic
For now we have an imitation of the jQuery UI for ease of pickup but these methods seem confusing. Could something better be done?:
- something.insert( $.colors.pickers.hslLite.render() )
- Give it an id.
- $(#id).colorPicker( options... )
- store settings in data
More complete versions
- Animate the movement of the markers?
- Make one wrapper and clone each time?
- Optimise the size/speed
- qunit testing