I have heard that jQuery UI includes a Color Picker but could find little documentation regarding it.
Does it exist?
Any decent documentation on how to implement it?
I found this: http://docs.jquery.com/UI/Colorpicker
But using:
$("#colorpicker").colorpicker();
does not work, with Firebug telling me .colorpicker(); is not a method!
It seems to work fine, unless I put it in a dialog UI where it then decides to break.
This question is related to
jquery
jquery-ui
documentation
color-picker
You can find some demos and plugins here.
Make sure you have jQuery UI base and the color picker widget included on your page (as well as a copy of jQuery 1.3):
<link rel="stylesheet" href="http://dev.jquery.com/view/tags/ui/latest/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.colorpicker.js"></script>
If you have those included, try posting your source so we can see what's going on.
Perhaps I am very late, but as of now there's another way to use it using the jquery ui slider.
Here's how its shown in the jquery ui docs:
function hexFromRGB(r, g, b) {_x000D_
var hex = [_x000D_
r.toString( 16 ),_x000D_
g.toString( 16 ),_x000D_
b.toString( 16 )_x000D_
];_x000D_
$.each( hex, function( nr, val ) {_x000D_
if ( val.length === 1 ) {_x000D_
hex[ nr ] = "0" + val;_x000D_
}_x000D_
});_x000D_
return hex.join( "" ).toUpperCase();_x000D_
}_x000D_
function refreshSwatch() {_x000D_
var red = $( "#red" ).slider( "value" ),_x000D_
green = $( "#green" ).slider( "value" ),_x000D_
blue = $( "#blue" ).slider( "value" ),_x000D_
hex = hexFromRGB( red, green, blue );_x000D_
$( "#swatch" ).css( "background-color", "#" + hex );_x000D_
}_x000D_
$(function() {_x000D_
$( "#red, #green, #blue" ).slider({_x000D_
orientation: "horizontal",_x000D_
range: "min",_x000D_
max: 255,_x000D_
value: 127,_x000D_
slide: refreshSwatch,_x000D_
change: refreshSwatch_x000D_
});_x000D_
$( "#red" ).slider( "value", 255 );_x000D_
$( "#green" ).slider( "value", 140 );_x000D_
$( "#blue" ).slider( "value", 60 );_x000D_
});#red, #green, #blue {_x000D_
float: left;_x000D_
clear: left;_x000D_
width: 300px;_x000D_
margin: 15px;_x000D_
}_x000D_
#swatch {_x000D_
width: 120px;_x000D_
height: 100px;_x000D_
margin-top: 18px;_x000D_
margin-left: 350px;_x000D_
background-image: none;_x000D_
}_x000D_
#red .ui-slider-range { background: #ef2929; }_x000D_
#red .ui-slider-handle { border-color: #ef2929; }_x000D_
#green .ui-slider-range { background: #8ae234; }_x000D_
#green .ui-slider-handle { border-color: #8ae234; }_x000D_
#blue .ui-slider-range { background: #729fcf; }_x000D_
#blue .ui-slider-handle { border-color: #729fcf; }<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">_x000D_
_x000D_
<script src="//code.jquery.com/jquery-1.10.2.js"></script>_x000D_
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>_x000D_
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">_x000D_
<span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span>_x000D_
Simple Colorpicker_x000D_
</p>_x000D_
_x000D_
<div id="red"></div>_x000D_
<div id="green"></div>_x000D_
<div id="blue"></div>_x000D_
_x000D_
<div id="swatch" class="ui-widget-content ui-corner-all"></div>Had the same problem (is not a method) with jQuery when working on autocomplete. It appeared the code was executed before the autocomplete.js was loaded. So make sure the ui.colorpicker.js is loaded before calling colorpicker.
That is because you are trying to access the plugin before it's loaded. You should try making a call to it when the DOM is loaded by surrounding it with this:
$(document).ready(function(){
$("#colorpicker").colorpicker();
}
Source: Stackoverflow.com