[JavaScript]カラーピッカープラグインcolorjoe

カラーピッカーのプラグインを使う必要性に迫られたので、ちょっと調査。

githubで検索をかけたらcolorjoeというプラグインを発見したのでこれの使い方を勉強する。

まず使うに当たってone-colorというプログラムが必要なのでダウンロードして下のようにインクルードを行う。

<script src='one-color.js'></script>

次にcolorjoeからダウンロードしたstyleシートを下のようにインクルードする。

<link href="../colorjoe-master/css/iehacks.css" media="all" rel="stylesheet" type="text/css" />
<link href="../colorjoe-master/css/colorjoe.css" media="all" rel="stylesheet" type="text/css" />

最後にJavaScriptをインクルードする。

<script src='../colorjoe-master/dist/colorjoe.min.js'></script>

ここまでの段階で下のようになる。

<link href="../colorjoe-master/css/iehacks.css" media="all" rel="stylesheet" type="text/css" />
<link href="../colorjoe-master/css/colorjoe.css" media="all" rel="stylesheet" type="text/css" />
<script src='one-color.js'></script>
<script src='../colorjoe-master/dist/colorjoe.min.js'></script>

呼び出しは下のようにする。

<div><input type="button" value="発射"></div>
<div id="hoge"></div>
<script>
jQuery(function($){
  $('input').on('click',function(e){
    colorjoe.rgb('hoge', '#113c38', [
        ['close',{label:'あいうえお'}],
        'currentColor',
        ['fields', {space: 'RGB', limit: 255, fix: 2}],
        'hex',
    ]);
  });
});
</script>

ちなみに、closeボタンのカスタマイズは上に書いてあるように

['close',{label:'あいうえお'}]

という形でcloseの後にjson形式で設定すればおｋ。

IE9以上で動くのでいいですね。