シンプルなインターフェースのカラーピッカーを実装するjQueryプラグイン・jquery-colorpicker

シンプルなカラーピッカーを実装
できるライブラリのご紹介です。
jquery-colorpicker。高性能な
カラーピッカーが不要なシーンで
いかがでしょう。

結構いい感じなんですけどライセンスがCCのBYなので土曜の軽めの話題として紹介します。

jquery-colorpicker

高性能なカラーピッカー以外見たことが無かったのでちょっと新鮮でした。一般ユーザー向けならこういうインターフェースの方がかえって優しいかもしれませんね。

コード

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type="text/javascript" src="jquery.colorpicker.js"></script>

本体とプラグインを読み込み。

$('#foo').colorpicker();

あとはセレクタを指定すればいいだけです。

$('#foo').colorpicker({
    colors: ["FFFFFF", "000000", "111FFF", "C0C0C0", "FFF000"]
  });

取得できるカラーを限定することも出来ます。

$('#foo').colorpicker({
    delay: 500
  }).on('changeColor', function (event) {
    $(document.body).css('background-color', event.color);
  });

カラーピッカーで取得した色をbodyの背景色に指定するサンプルコードです。

<div id="foo">bar</div>

マークアップはDOM要素にIDやclassを振ればOKです。

CC・BYライセンスなのがなぁ・・商用OKと言われてもクライアントワークでクレジット表記はちょっと個人的に相手に薦められないので使うのは抵抗あります。でも良いプラグインですね。

jquery-colorpicker on github