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
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.
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.
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>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