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

• Tweet
• 

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

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

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

カラーピッカー

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

設置方法

1.ファイルをダウンロード

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

2.設定

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

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

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

<input class="color">

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

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

フリーランスエンジニアの稼ぎ方

フリーランスエンジニアの稼ぎ方。ぶっちゃけ…開発以外のことを頑張ったほうが結果がでます。

• Tweet
• 

PROFILE

プロフィール

入江 慎吾／サービス開発だけで生きていく
自分のサービスだけで自由に生きる。勢いで受託開発をすべてやめて、サービスだけ作って生きていくことを決めたフリーのエンジニア。得意を教えて副業にできるMENTAを開発中！ （詳しいプロフィール）

WEBサービス・アプリ開発に役立つ情報をイリテクの入江がお届けします。プログラミング、UI/UXデザイン、SNS・ブログマーケティングなど、プロダクト開発だけで自由に生きていくための実践的な情報を配信しています。

無料メールマガジンを購読する

PRODUCT

イリテクで開発したプロダクト