2015/01/24

[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形式で設定すればおk。

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

0 コメント:

コメントを投稿