jQuery Color Picker- Learn to Work with the jQuery Color Picker Plugin

jquery color pickerAs a human being, you can’t possibly remember all the hexadecimal or RGB values for all the colors.  You don’t even know how many there actually are. So how would you know this information easily? When you want to preview and test color values and color schemes, you can use something we call a color picker. Conveniently, jQuery provides its own color picker, so you don’t need to code your own.

jQuery is made for less code. It provides plug-ins and classes that give to you what you need. Also, its architecture is highly extensible, allowing developers to create and integrate their own plug-ins. This makes everything customizable according to the developers and clients’ needs. Anyone can submit their plug-ins and share them with whoever has use for them. As long as they follow submission requirements, others can benefit from your shared knowledge.

Want to know more about jQuery? Take a class at Udemy.com.

What is a Color Picker?

A color picker is a utility that is used to choose colors or create color schemes. There are different kinds such as the color harmonization interface, color picker, RGB and HSL conversion and manipulation.

It is used instead of alphanumeric values to preview and test colors using an interface with a visual display of colors. Since defining colors by relationships with neighboring colors is much easier than defining them by value, a graphical interface is a more effective way of accomplishing this.

There are many ways to present a picker. Some use sliders, buttons, text boxes (for color value input), or direct display. Aside from the colors themselves, you can also adjust the hue, saturation and lightness. As the developer, the choice is yours to determine which style is more appropriate according to the content of your page.

jQuery Color Picker Plugin

With the open-source nature of jQuery, there are actually several plugins that are available, specifically for color-picking. Let’s use the jPicker plugin as our guide. It is a fast and lightweight plugin used to include advanced color pickers in your website. Designed from John Dryer’s picker which was created in the Prototype framework, is supports all current browsers.

New to jquery plugins? Take a course at Udemy.

If you wish to add a jPicker inline with your other elements, you can use this sample code with the .jPicker() method with no arguments:

<script type="text/javascript">

$(document).ready(

function()

{

$('#sampleInlinePicker').jPicker();

});

</script>

<div id="sampleInlinePicker"></div>

If you don’t wish to display your picker fully all the time, you can make it an expandable icon that pops up using the following code:

jPicker({ window: {expandable:true}})

<script type="text/javascript">

$(document).ready(

function()

{

$('#sampleExpandable').jPicker(

{

window:

{

expandable: true

}

});

});

</script>

<span id="sampleExpandable"></span>

You can also create one that has either alpha or transparency values that you can enable.

<script type="text/javascript">

$(document).ready(

function()

{

$('#sampleExpandable').jPicker(

{

window:

{

expandable: true

}

color:

{

alphaSupport: true,

active: new $.jPicker.Color({ ahex: '77440099' })

}

});

});

</script>

<span id="sampleExpandable"></span>

If you want to bind your jPicker to an input element, you use the jPicker() method with no arguments. The following sample code that binds the popup with an element:

<script type="text/javascript">

$(document).ready(

function()

{

$('#sampleBinded').jPicker();

});

</script>

<input id="sampleBinded" type="text" value="e2ddcf"/>

Specifying ‘text’ as the type, you are saying that the value is to be displayed using text with the initialized value as the color being shown by default.

If you need more than one binded picker, you only need to call the statement several times

(according to how many time you need it). Here’s the sample code:

<script type="text/javascript">

$(document).ready(

function()

{

$('.sampleMultipleBinded').jPicker();

});

</script>

<input class="sampleMultipleBinded" type="text" value="e2ffcf"/><br />

<input class="sampleMultipleBinded" type="text" value="ffffff" /><br />

<input class="MsampleMultipleBinded" type="text" value="f9d0f7"/><br/>

As you can see, the line with the input class being invoked is called three times. This will show 3 binded pickers with color icons according to the hexadecimal value specified in the “value” property.

Now, what is the use of a color picker if you are not going to use it to interact with your user? Of course, once the user actually ‘picks’ a color, your app or page should be able to respond accordingly. Here are some sample callback functions which you can use:

<script type="text/javascript">

$(document).ready(

testFunction()

{

var sampleCallbackElement = $('#sampleLive'),

sampleLiveButton = $('#sampleButton');

$('#Callbacks').jPicker(

{},

function1(sampleColor, context)

{

var allValues = sampleColor.val('all');

alert('The color you have chosen in hex: ' + (allValues && '#' + allValues.hex || 'none') + ' - alpha: ' + (allValues && allValues.a + '%' || 'none'));

$('#Commit').css(

{

bgColor: allValues && '#' + allValues.hex || 'transparent'

}); //this will prevent Internet Explorer from throwing an exception in case the hex is empty.

},

function2(sampleColor, context)

{

if (context == sampleLiveButton.get(0)) alert('This is the color set from the button');

var hex = sampleColor.val('hex');

sampleCallbackElement.css(

{

bgColor: hex && '#' + hex || 'transparent'

}); //this will prevent Internet Explorer from throwing an exception in case the hex is empty.

},

function3(sampleColor, context)

{

alert('Did click “Cancel” button.’);

});

$('#sampleLive).click(

function()

{

$.jPicker.List[0].color.active.val('hex', 'e2ffcf', this);

});

});

</script>

<input id="TestCallbacks" type="text" value="e2ffcf" />

<span id="Commit" style="background-color: #e2ddcf; display: block; float: left; height: 40px; margin: 5px; width: 40px;">

Commit

</span>

<span id="LiveTest" style="display: block; float: left; height: 40px; margin: 5px; width: 40px;">LiveTest</span>

<input id="LiveButtonTest" type="button" value="Set the color to #e2ffcf" />

Inn the sample code above, it combines creating and interacting with the jPicker plugin. You now know how to get the hex values from the chosen colors in the picker as well as how to respond to the events that are hand-in-hand with the picker. You can choose what to do after the user interacts with the picker such as displaying what was chosen or using the chosen color to design a certain element in your page (like changing the background color of the display block in the sample code). It’s all up to you.