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

2018/03/23更新 カテゴリー:開発奮闘記 タグ:
  • このエントリーをはてなブックマークに追加

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

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

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

SPONSOR

カラーピッカー

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

設置方法

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

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

2.設定

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

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

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

<input class="color">

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

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

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

  • このエントリーをはてなブックマークに追加
SPONSOR

PROFILE

プロフィール

入江 慎吾
自分が作ったサービスで生きていく。同じゴールを目指すサービス開発集団「入江開発室」を運営(現在約280名) / 個人間スキルシェアサービス「MENTA」は1ヶ月と10日で売上100万円を達成。1日で100社が利用した「JobTag」など多数開発
(詳しいプロフィール)

PRODUCT

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

RELATION

関連する記事

SPONSOR

TAG

タグから記事をさがす