全国対応！外注・下請けのホームページ制作会社をお探しの会社様。
人員リソース不足、技術不足でお困りなら外注・下請け専門のランランドにお任せ下さい
spectrum.jsで簡単にカラーピッカーを設置する
2019.07.19
※この記事は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の２つがあればOK
※日本語対応の場合は2行目のようにjquery.spectrum-ja.jsを読み込みます。
先にjQueryを記述してから、spectrum.jsとspectrum.cssを読み込ませましょう。
spectrum.jsでカラーピッカーを設置（デモ）
- jQuery(function($){
- $(".picker").spectrum({});
- });
- <input class="picker" type="text">
inputにjsを読み込ませるとデフォルトのカラーピッカーが表示されます。
↓ デフォルトはこんな感じです。
色を選択したら反映される（デモ）
上にあるデフォルトを元に、
カラーピッカーで色を選択したら、下の枠に選択した色が反映されるデモを作成しました。
「選択した色」を取得するため「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で見た目を簡単に変えられるのでぜひ使ってみて下さいね。
ご相談・カスタマイズご依頼
弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。
この記事を書いた人 兼山 暖美 エンジニア
この記事を読んだ方はこんな記事も読んでいます
こんにちは。コーダーの兼山です。 前回は、reCAPTCHAを設置するために必要となる、GoogleへWEBサイト登録と…
こんにちは。コーダーの兼山です。 Retinaディスプレイやスマートフォンなどの高解像度ディスプレイへの対策として、2倍…
