I recently added an admin settings page to allow the user to select colors for node title labels. I quick Google search and I discovered this promising jQuery color picker library. Here's how I embedded it in a form.
First I unpacked the colorpicker.zip file and moved it into my theme folder. Next, I added a form callback function in my module.
<?php
// defining my form callback function
function _MYFORM() {
$form = array();
// include css & javascript for color picker
drupal_add_css(path_to_theme() . '/colorpicker/css/colorpicker.css');
drupal_add_js(path_to_theme() . '/colorpicker/js/colorpicker.js');
// define field ID
$formElementID = 'MYFORMELEMENT';
// create a javascript-friendly ID
$jsID = 'edit-' . str_replace('_','-',$formElementID);
// adding textfield input for color picker widget
$form[$formElementID] = array(
'#type' => 'textfield',
'#title' => t('MY FIELD TITLE'),
'#size' => 6,
'#maxlength' => 6,
'#suffix' => "
<script type='text/javascript'>
$(document).ready(function(){
colorPickerAttach('#$jsID');
});
</script>"
);
// add a javascript function to attach the color picker to a form element
$js = "
function colorPickerAttach(which) {
$(which).ColorPicker({
onSubmit: function(hsb, hex, rgb) {
$(which).val(hex);
},
onBeforeShow: function () {
$(this).ColorPickerSetColor(this.value);
}
})
.bind('keyup', function(){
$(this).ColorPickerSetColor(this.value);
});
}
";
drupal_add_js($js, 'inline');
return $form;
}
?>Now, my form has a text input that uses a fancy color picker to choose the hex value. More documentation on the color picker can he found here.
Here's a screenshot of the color picker in action:
