世界一かんたんに実装できるJQueryカラーピッカー「JSColor」

07/04/2013

とあるシステムでカラーピッカーを実装したいケースがあったので、JQueryで探して、いくつか実装テストを試した。

しかし、どれも複数のJavaScriptファイルやCSSファイルを読み込む必要があり、しかもimgファイルの場所も別フォルダにあったりすると、既にあるシステムには組み込みにくい。

今回紹介する「JSColor」はそんなことを考える必要がないくらい、かんたんに設置できて、機能も充分なものだった。

インプットタグをクリックするとカラーピッカーが出てきて、色を選択できる。もちろん直接カラーコードを入れることもできる。

JSColor公式サイトから、ファイルをダウンロード。
開いてびっくりのシンプル構造。なんと入っているのはこれだけ。

JQueryファイルを読み込んだ上で、次にjscolor.jsを読み込む。

<script type="text/javascript" src="jscolor.js"></script>

そして、適用させたいインプットタグに

<input class="color">

のようにクラスを指定する。

これだけで設置が完了してしまう。

[sc name=”engeneer”]

個人開発・ビジネスについての有益な情報を無料メルマガでお届けします。

特典：個人開発の教科書＜心得編＞

これまでの個人開発経験を秘伝のタレ的な内容としてエッセンスをまとめました。35ページにわたる大ボリュームです。

MENTAはいろんなプロに相談できるNo1メンターサービスです。

僕自身もプロダクトの壁打ち・相談にのっています。個人開発でもコードレビュー、セキュリティ面のチェック、デザイン、広告、コンテンツマーケ、SNS集客について相談する、など使えます。

入江慎吾
あらゆるスキルが学べるパーソナルメンターサービスMENTAの代表／個人開発が好きでこれまでに30個ほどのWEBサービスやアプリを作ってきました／福岡のWEB制作会社勤務→フリーランスエンジニア→法人立ち上げ→M&A億単位の売却を経験。（詳しいプロフィール）