Another colorpicker

by Vladimir

HTML

<link rel="stylesheet" href="http://lindekleiv.bitbucket.org/colorpicker/css/jquery.ui.colorPicker.css">
<script src="http://lindekleiv.bitbucket.org/colorpicker/jQuery.UI.ColorPicker.min.js"></script>
<input type="hidden" id="a" />

JavaScript

/*
 * jQuery UI Color Picker Widget
 *
 * Copyright 2012, Olav Andreas Lindekleiv (http://lindekleiv.com/)
 * Available under the BSD License
 * See the LICENSE file or http://opensource.org/licenses/BSD-3-Clause
 *
 * Available on BitBucket at
 * https://bitbucket.org/lindekleiv/jquery-ui-colorpicker
 */

$.widget("oal.colorPicker",{options:{size:250,format:"hsla"},_create:function(){var a,b,c=this;this.lightness=0;this.alpha=1;this.fromCenter=0;this.pickerPos=[0,0];this.parent=$('<div class="colorpicker"></div>');this.parent.css({width:this.options.size+36});this.element.addClass("colorInput");this.element.css({width:this.options.size+36});this.element.wrap(this.parent);this.canvasId="colorpicker"+parseInt(Math.random()*9999);this.wheel=$("<canvas id='"+this.canvasId+"' width='"+this.options.size+"' height='"+this.options.size+"'></canvas>");this.element.before(this.wheel);this._draw();b=$('<div class="circle lightness"></div>').css({width:this.options.size,height:this.options.size});this.element.before(b);a=$('<div class="circle alpha"></div>').css({width:this.options.size,height:this.options.size});this.element.before(a);this.lightnessSlider=$('<div class="lightness slider"><span class="handle"></span></div>').css({height:this.options.size});this.element.before(this.lightnessSlider);this.lightnessSlider.find("span.handle").draggable({containment:"parent",drag:function(a,b){return c._setLightness(b.position.top,true)}});this.alphaSlider=$('<div class="alpha slider"><span class="handle"></span></div>').css({height:this.options.size});this.element.before(this.alphaSlider);this.alphaSlider.find("span.handle").draggable({containment:"parent",drag:function(a,b){return c._setAlpha(b.position.top,true)}});this.picker=$('<span class="picker"></span>').css({top:this.options.size/2,left:this.options.size/2});this.element.before(this.picker);this.picker.draggable({drag:function(a,b){var d,e;d=b.position.left-c.options.size/2;e=b.position.top-c.options.size/2;return...