Instruction
Color Picker Plugin Click Here
HTML
CSS
/* No CSS */
Javascript
/* ColorPicker Javascript control function */
$(document).ready( function() {
"use strict";
$('.demo').each( function() {
$(this).minicolors({
control: $(this).attr('data-control') || 'hue',
defaultValue: $(this).attr('data-defaultValue') || '',
format: $(this).attr('data-format') || 'hex',
keywords: $(this).attr('data-keywords') || '',
inline: $(this).attr('data-inline') === 'true',
letterCase: $(this).attr('data-letterCase') || 'lowercase',
opacity: $(this).attr('data-opacity'),
position: $(this).attr('data-position') || 'bottom left',
swatches: $(this).attr('data-swatches') ? $(this).attr('data-swatches').split('|') : [],
change: function(value, opacity) {
if( !value ) return;
if( opacity ) value += ', ' + opacity;
if( typeof console === 'object' ) {
console.log(value);
}
},
theme: 'bootstrap'
});
});
});