ここでは色を選択するjQuery ColorPickerプラグインを紹介します。

デモはこちら
http://office-goto.info/demo/colorpicker/
ColorPicker – jQuery pluginのダウンロード
http://www.eyecon.ro/colorpicker/
head内で読み込み
<link rel="stylesheet" href="css/colorpicker.css" type="text/css" /> <script src="js/jquery.js"></script> <script type="text/javascript" src="js/colorpicker.js"></script>
colorpicker.css、colorpicker.jsを読み込んでください。
script
$(function(){
$('#picker').ColorPicker({
onSubmit: function(hsb, hex, rgb, el) {
$(el).val(hex);
$(el).ColorPickerHide();
$('body').css({'backgroundColor' : '#' + hex});
},
onBeforeShow: function () {
$(this).ColorPickerSetColor(this.value);
}
})
.bind('keyup', function() {
$(this).ColorPickerSetColor(this.value);
});
});
html
<input type="text" id="picker" value="ffffff">
今回は例としてtextをクリックしたらColorPickerが出てくるように設定して
ColorPickerで色を選択したら背景色を変更しています。
