Introduction
This simple color picker solved multiple issues I had with other color pickers:
- Get the color picker reference any time after creation. That is the first time we do
$('.selectorClass').colorPicker(), it creates the color picker and the second time we get the reference to color picker instance associated with the selector element. This is important if we have to create the color picker dynamically based on some values received from the server on the fly and refer to them later. - I need to have only one instance of color table showing at a time, that's automatically close the other open one when I click on a different invoker button.
- I also have the need of not referencing any image files.
- I need to add hundreds of color picker buttons, so preloading color picker div as other color pickers pluggins seem to be reason of slow rendering.
Background
I needed to dynamically add color picker button, could be 100 of them on a page. I was using jPicker. JPicker is great, but it is a little too much for my project, and the biggest issue is being slow when you have a lot of color pickers. Also, it adds the HTML code for every color invoker button, regardless of whether the color picker table is showing or not. So I Googled around and found this and this.
But all of them add the HTML code before invoking them, and I really have a problem with that, I think that is part of the reason that it is slow.
Using the Code
Here is a common usage of the control:
<!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>
<title>Simple JQuery Color Picker</title>
<link type="text/css" href="colorPicker.css" rel="stylesheet" />
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="colorPicker.js"></script>
<script type="text/javascript">
function onColorChanged(color, el) {
$('.result').css('background-color', color);
}
$(document).ready(function() {
$('.b1').colorPicker({ color: 'blue', onChangeColor: onColorChanged });
setTimeout(function() {
$('.b1').colorPicker().setColor('purple');
}, 2000);
setTimeout(function () {
$('.b1').colorPicker().setColor('green', true);
}, 2000);
});
</script>
</head>
<body>
Color Picker: <button class="colorPickerButton b1"></button>
<div class="result" style="width: 200px; height: 200px;"></div>
</body>
</html>
Points of Interest
So far, I have only spent 3 nights on creating this control, so it's not fully tested.
I have tested on IE 7-10, Firefox, and Chrome.
There are a lot of features that I want to add to it, such as having a textbox to take custom color input, etc.
History
- Oct 17, 2013 First draft.
