カラーピッカーのプラグインを使う必要性に迫られたので、ちょっと調査。
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 コメント:
コメントを投稿