Widgets Creation
Widgets
Color Picker Widget
Color picker helps to select a RGB color. Color picker widget comes in Max and Mini types

Basic Usage 
$.domLoaded(function() {
	
	$.get("#call").widget("colorpicker", CONFIG_JSON );	
	
}
Configuring Options
It contains array of JSON objects. The properties are mentioned below.
NameTypeMust/OptionalDescription
defStringOptionalSets the default color. String format should be 6 04 4 char hexdecimal preceeded by #. Eg . "#FFFFFF"
fulldisplayBooleanOptionalThis makes the color picker to be displayed completely; if set to false, a small color picker box will be shown and clicking on it will open the color picker
typeStringOptionalMentions the type of color picker
StringDescription
"max"Complete color picker
"mini"Mini color picker
inputBooleanOptionalif true, user can select a date range
onselectfunctionOptionalonselect event. This function is called when color is selected. color value is passed as parameter
onchangefunctionOptionalonchange event. This function is called when color is picker changes it's current color by user action. on movement. color value is passed as parameter
hideBooleanOptionalIf true, hides the colorpicker while launching

Methods
NameDescription
show()Shows the hidden color picker
hide()Hides the color picker
getColor()Gets selected color

Color Picker Widget Examples Example 1
JS HTML 
						$.domLoaded( function() {

				$.get("#pick1").widget("colorpicker", {
					type : "max",
					fulldisplay : true,
					def : "#0000ff"
				});

				$.get("#pick2").widget("colorpicker", {
					type : "mini",
					fulldisplay : true,
					def : "#0000ff"
				});		
				
			});
		<h4>Max Type with FullDisplay</h4>
		<div id="pick1"></div>
		<h4>Min Type with FullDisplay</h4>		
		<div id="pick2"></div>
Result
Example 2
JS HTML 
			$.domLoaded( function() {

				$.get("#pick1").widget("colorpicker", {
					type : "mini",
					fulldisplay : false,
					def : "#0000ff"
				});

				$.get("#pick2").widget("colorpicker", {
					type : "max",
					def : "#0000ff",
					input : true
				});		
				
			});
		<h4>Default</h4>
		<div id="pick1"></div>
		<h4>Input</h4>		
		<input type="text" id="pick2"></div>
Result
Example 3
JS HTML 
			$.domLoaded( function() {

				$.get("#pick1").widget("colorpicker", {
					type : "max",
					fulldisplay : true,
					def : "#0000ff",
					onselect : function(col) {
						alert("Selected Color is " + col);
					},
					onchange : function(col) {
						$.get("body > div").style("background-color", col);
					}
				});

				$.get("#dial").widget("dialog" ,{
					head : {
						title : "Color Picker Changes background color of Dialog"
					},
					dim : { wid : 500, ht : 300},
					close : true,
					draggable : true
				});
				
			});

		<div id="dial">
			<div id="pick1"></div>
		</div>
Result
Example 4
JS HTML 
			$.domLoaded( function() {		

				var pick1;
					
				pick1 = $.get("#pick1").widget("colorpicker", {
					type : "max",
					fulldisplay : true,
					hide : true,
					def : "#0000ff"
				});		

				$.get("#sel1").on("click", function() {
					pick1.show();
				});				
				
				$.get("#sel2").on("click", function() {
					pick1.hide();
				});
				
				$.get("#sel3").on("click", function() {
					alert(pick1.getColor());
				});				
		
			});
			
		<h4>Show and Hide Functions</h4>
		<input type="button" value="Show" id="sel1" />
		<input type="button" value="Hide" id="sel2" />
		<input type="button" value="Get Color" id="sel3" />
		
		<h4>Color Picker</h4>
		<div id="pick1"></div>
Result