<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Color Picker</TITLE>
<link rel="stylesheet" href="./colorpicker.css" type="text/css" />
<link rel="stylesheet" href="./index.css" type="text/css" />
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./colorpicker.js"></script>
<script>
$(document).ready(function(){
$('#colorpicker_0,#colorpicker_1,#colorpicker_2,#colorpicker_3,#colorpicker_4').ColorPicker({
onSubmit: function(hsb, hex, rgb, el) {
check_colorpicker(el, hex);
},
onBeforeShow: function () {
$(this).ColorPickerSetColor(this.value);
},
onChange: function (hsb, hex, rgb, el) {
}
})
.bind('keyup', function(){
$(this).ColorPickerSetColor(this.value);
});
$('.colorpicker_holder').each(function(){
var el = $(this).parent().find("input");
var color = el.val().toUpperCase();
el.val(color);
$(this).css("backgroundColor", "#"+color );
$(this).click(function(){
$(this).parent().find("input").ColorPickerShow();
});
});
});
function check_colorpicker(el, hex){
$(el).val(hex.toUpperCase());
$(el).ColorPickerHide();
$(el).parent().parent().find(".colorpicker_holder").css('backgroundColor', '#' + hex);
var pos = el.id;
}
</script>
</HEAD>
<BODY>
...
</BODY>
</HTML>
colorpicker.css