It depends on jQuery 1.4.2. The Jquery powered Color Picker is styleable using a single stylesheet. It works in an unobtrusive fashion, by just turning html select inputs into a sexier equivalent. There’s no extra markup needed.If javascript is not enabled the normal html select is still displayed meaning it is compatable with all browsers.
On many a website to select a color you are given a html select box with a list of color names, or hex values.
Something like this
This is both unintuitive and downright ugly. My thinking was that there has to be a better way. And thats where the Jquery Color Picker comes in.
The big difference between the Jquery Color Picker and other Jquery powered color pickers is the Jquery Color Picker takes a normal html select like above and turns it into an intuitive, cross browser, color picker.
This allows you to control the colors that can be picked, and send the chosen value through a form without having to manipulate the output.
Demo
Normally the select element is hidden, for the demo we have shown it.
<select id="picker">
<option value="FFFFFF">FFFFFF</option>
<option value="FFDFDF">FFDFDF</option>
...
<option value="00001b">00001b</option>
<option value="000000">000000</option>
</select>
<link rel="stylesheet" href="jquery.colorpicker.css" type="text/css" media="screen" />
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.colorpicker.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#picker').colorpicker({
size: 20,
label: 'Color: ',
hide: false
});
});
</script>
Options
| Parameter | Description | Example |
|---|---|---|
| size | Size in px of the color squares | 20 |
| scount | How many color squares to show per row | 6 |
| label | A label to prepend to the picker | Color: |
| hide | should the original select be hidden? | false |