Web blog WEBブログ

spectrum.jsで簡単にカラーピッカーを設置する

2019.07.19

こんにちは!
エンジニアの平田です。


今回は簡単にカラーピッカーを設置できるプラグイン「spectrum.js」をご紹介いたします。

spectrum.jsをダウンロードする

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/color/spectrum.js"></script> 
<link rel="stylesheet" href="js/color/spectrum.css">

jQueryを用意し、
Spectrumからプラグインをダウンロードします。

spectrum.jsとspectrum.cssの2つがあればOK
※日本語対応の場合は2行目のようにjquery.spectrum-ja.jsを読み込みます。

先にjQueryを記述してから、spectrum.jsとspectrum.cssを読み込ませましょう。

spectrum.jsでカラーピッカーを設置(デモ)

 jQuery(function($){
 $(".picker").spectrum({});
});

 <input class="picker" type="text">

inputにjsを読み込ませるとデフォルトのカラーピッカーが表示されます。
↓ デフォルトはこんな感じです。

See the Pen
YmPyBj
by hirata (@runrundhirata)
on CodePen.

色を選択したら反映される(デモ)

See the Pen
jsdemo
by ひ (@hiratarunrund)
on CodePen.

上にあるデフォルトを元に、
カラーピッカーで色を選択したら、下の枠に選択した色が反映されるデモを作成しました。

「選択した色」を取得するため「toHexString();」を使います。

change: function(color){   色を変えます
iro=color.toHexString();   選択した色を取得してiroにいれます
$(‘#color’).css(‘background’,iro);} #colorの背景をiroにします!

spectrum.jsのオプション

 jQuery(function($){
 $(".picker").spectrum({

color: "#f00", //初期色を設定できます

allowEmpty: true, //初期色無し

flat: true, //大きなカラーピッカー

showInput: true, //hsvの数値を表示

chooseText: "選択", //ボタンの文字を変更

cancelText: "閉じる", //ボタンの文字を変更

change: function(color){ },// 色を変更している時のイベント

move: function(color){ },// 色が選択できた後のイベント

});
});

 

上記はspectrum.jsのオプションです。

まとめ

管理画面や自作のブログに使えそうなカラーピッカー(spectrum.js)です。
オプションやcssで見た目を簡単に変えられるのでぜひ使ってみて下さいね。

平田ひかり

この記事を書いた人 平田 ひかり エンジニア

無料相談窓口