UPDATE: Check out the examples here:
http://jsfiddle.net/gelform/GdL9b/
http://jsfiddle.net/gelform/fu6Db/
Crayonbox is a really simple color picker. The idea is to make it as simple as possible for the user, while leaving lots of options up to you. Create a textfield you will want to add a crayonbox to. Then select it using jQuery and call the crayonbox plugin. If you want to, you can overwrite the color selection with either color names (red, blue) or color hex codes (#FF0000, #0000FF). You can also specify a preselected color.
You need the jQuery Framework and the jquery.crayonbox.js plugin (Or the jquery.crayonbox.min.js minified version). Download and use this jquery.crayonbox.css CSS style sheet, or modify what is defined below in the examples.
When you apply the crayonbox plugin to an input box, it creates a box of crayons next to it (<span> tags with a class of "crayon") and wraps the whole thing in a <span> tag with a class of "crayonbox". You can use these classes to style it.
<input type=”text” id=”defaultExample” />
$(document).ready(function()
{
$('#defaultExample').crayonbox();
});
(Also view the source of this page for an example)
So your page might look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery.crayonbox example</title>
<style type="text/css">
.crayon {color: #000;
cursor: pointer;
border: 1px solid #333;
float: left;
font-family: Fixed, monospace;
margin: 1px;
text-align: center;
width: 1em;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.crayonbox.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#defaultExample').crayonbox();
});
</script>
</head>
<body>
<p><input type="text" id="defaultExample" /></p>
</body>
</html>
And here’s what you get:
<input type=”text” id=”colorsExample” />
$('#colorsExample').crayonbox({
colors: new Array('#F00', '#0000FF')
});
Note that I’ve specified an array of colors when applying the plugin. I can specify Hex codes like above, or color names like "red" and "blue".
And here’s what you get:
<input type=”text” id=”selectedExample” />
$('#selectedExample').crayonbox({
colors: new Array(
'#777',
'#888',
'#999',
'#AAA',
'#BBB',
'#CCC',
'#DDD'
),
selected: '#999',
crayonTag: 'button,
clearButton: true,
onSelection: function(){
alert( $(this).find('.coloring').attr('title') );
}
});
Note that I specified a color that matches one in the array of colors. The one specified will be auto selected when the page loads. I also specified the crayon tag should be a button instead of a span tag, and that we should have a clear button (the one below with the X). Finally, I specified a callback function that will fire after a crayon is selected. In this case it gives me an alert with the background color.
Here’s another trick. By hiding the input box (#selectedExample {display: none;}), all the user sees is the color selection.
And here’s what you get:
<script type=”text/javascript” src=”rgbcolor.js”></script>
<input type=”text” id=”contrastExample” />
$('#contrastExample').crayonbox({
onSelection: function(){
var $selected = $('.coloring', this);
// change color of diamond based on brightness
var color = new RGBColor( $selected.css('background-color') );
if (color.ok)
{
var brightness = (299*color.r + 587*color.g + 114*color.b)/1000;
if ( brightness < 150 )
{
$selected.css('color', '#FFF');
};
};
}
});
And now when you click on a darker color, you get a white diamond, instead of a black one:
Here are all the optional parameters you can define to use with the crayonbox.
Example: colors: new Array('Silver', 'Tomato', 'Orange', 'Yellow', 'Chartreuse', 'DeepSkyBlue', 'Violet')
Example: 'Silver'
Example: 'button'
Example: function(){alert( $(this).find('.coloring').attr('title') );} // alerts the selected color
Call uncolor on your existing crayonbox and it will un-select any selected crayon.
clearTextfield: Boolean If set to true, calling this function will also clear the input field. Default is set to true. It will also clear the default selected color.
Also check out the jQuery Plugin page.