Skip to content Skip to sidebar Skip to footer

jQuery color picker master

Color Picker
  The color picker is used to select the color from the color panel and can adjust the color darkness.

Requirement:-
  You need to download integrate the following js files and one css file.

colopick:
 colpick.js => this file is created for color picker functionality and actions.
 colpick.css => This file is used to give the style for the color picker.


If you want to display the color picker panel when you click on a text box your code should be like below.



jquery Color Picker
CSS Code-

#txtbxid {
margin:0;
padding:0;
border:0;
width:70px;
height:20px;
border-right:20px solid green;
line-height:20px;
}


jQuery Code-
$(window).load(function(){
$('#txtbxid').colpick({
layout:'hex',
submit:0,
colorScheme:'dark',
onChange:function(hsb,hex,rgb,el,bySetColor) {
$(el).css('border-color','#'+hex);
// Fill the text box just if the color was set using the picker, and not the colpickSetColor function.
if(!bySetColor) $(el).val(hex);
}
}).keyup(function(){
$(this).colpickSetColor(this.value);
});
});

Your TextBox-
<input type="text" id="txtbxid"></input>



Download Full Source Code

Post a Comment for "jQuery color picker master"