2010年6月16日水曜日

ColorPicker.js(jQuery)の実装メモ

jQueryプラグインのColorPicker.jsを、開発者のサイトを見て、ちょっとカスタマイズしたのでメモです。
http://www.eyecon.ro/colorpicker/#about

リアルタイムに変更中の色や16進数の6ケタ数字が表示されるのがナイスです。

    $("#select_color").ColorPicker({
        color : $("#select_color").css("background"),
        onChange : function( hsb, hex, rgb ){
//span要素に■を入れ、色をリアルタイム変更。
            $("#color_test").css({color:"#"+ hex});
           $("#select_color").val("#"+hex);//#入りで16進数をリアルタイム表示
       },
        onSubmit: function(hsb, hex, rgb, el) {
            $(el).val("#"+hex);
            $(el).ColorPickerHide();
        },
        onBeforeShow: function () {
            $(this).ColorPickerSetColor(this.value);
        }
    })
    .bind('keyup', function(){
        $(this).ColorPickerSetColor(this.value);   
    });

0 件のコメント:

コメントを投稿