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.
Download Full Source Code
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.
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>
#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"