カラーピッカー

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、jQueryのColorPicker()プラグインを利用して16進のカラーコードを生成します。緑のアイコンをクリックするとカスタムされたカラーピッカーが表示されます。カラーピッカーを消すには緑のアイコンを再度クリックします。 ブルーのアイコンをクリックするとデフォルトのカラーピッカーが表示されます。このカラーピッカーを消すには画面の任意の場所（カラーピッカー以外）をクリックします。

このサンプルは、jQueryのColorPicker()プラグインを利用して16進のカラーコードを生成します。緑のアイコンをクリックするとカスタムされたカラーピッカーが表示されます。カラーピッカーを消すには緑のアイコンを再度クリックします。 ブルーのアイコンをクリックするとデフォルトのカラーピッカーが表示されます。このカラーピッカーを消すには画面の任意の場所（カラーピッカー以外）をクリックします。 

$('#colorSelector').ColorPicker({
  color: '#0000ff',
  onShow: function(colpkr) {
    $(colpkr).fadeIn(500);
    return false;
  },
  onHide: function(colpkr) {
    $(colpkr).fadeOut(500);
    return false;
  },
  onChange: function(hsb, hex, rgb) {
    $('#colorSelector div').css('backgroundColor', '#' + hex);
  }
});