Simple jQuery Color Picker

Ming_Lu

Rate me:

4.86/5 (3 votes)

18 Oct 2013CPOL2 min read

20.8K

Simple and Fast Color Picker Built on JQuery

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:

JavaScript

<!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); //the second parameter 
                			// will cause the onColorChanged event to fire.
            }, 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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

Ming_Lu

Software Developer Oliver Wyman Groups

United States

Education: Masters in Applied mathematics

Certification:
MCP in Asp.net
MCP in SQL Server 2008 Implementation.

Working Experience In .Net since 2005

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.