jQueryでお薦めのカラーピッカープラグイン

カラーピッカーをサイトに設置する必要ができ、いろいろ調べたのでその結果をメモ。

はじめ、jQuery UIにカラーピッカーがあったと思い込んで探していたのだけど、あれへんやん！　ということで、何かいいのはないかなーとこういう10種類のカラーピッカーを紹介しているページとか調べて、最終的に以下のカラーピッカーが一番いいという結論に達した。

使い方についてはこちらのサイトで詳しい解説が載っていて、従っていけば困ることはまずないだろう。

いいと思った理由はデザインがきれいな点と、色を選んでいるときその結果をリアルタイムに反映してくれる点。html本体にややこしいコードを書き加える必要もないし、これから先、カラーピッカーが必要になったら特に理由がない限りこれを使うと思う。

で、このカラーピッカー、使うときはこんな感じに書くわけですが…

$('#picker').ColorPicker({
  flat: true
});

こいつをわけあってこういうコードにしてみたらうまく動かなかった。

$(".picker").ColorPicker({
  color : $(this).css("background"),
  onChange : function( hsb, hex, rgb ){
    $(this).css("background", "#"+ hex)
  }
});

一つのページに複数のカラーピッカーを設置する必要があって、classでコードをまとめてしまおうと思ったのだが、どうもセレクタはIDで指定した一意なものでなければならないらしい。ということで、classでセレクタを指定し、引数を$(this)で渡すのは無理だった。

セレクタをIDで指定し、設置するカラーピッカーの数だけコードを書けばそれで解決するのだが、あまり同じコードを書きたくないので、それならと試してみたのが以下のもの。

$(".picker").click(function(){
  var obj = "'#" + $(this).attr("id") + "'";
  //以下、見やすいように改行しているが、実際には改行なし
  var code = "$(" + obj +" ).ColorPicker({
    color : $("+obj+").css('background'),
    onChange : function( hsb, hex, rgb ){
      $("+obj+").css('background','#'+ hex)
    }
  });";
  eval( code );
});

コードを文字列で書いてevalで動かしてみた。classがクリックされたとき、そのidを取得してコードに突っ込んでいるので複数のカラーピッカーを一つのコードで動かすことができる。

しかし当然ながらevalで無理やり動かしているのでもっさり感がある。ということで、一つ一つセレクタにid指定して複数設置する方がいいみたい。