[Jquery] カラーピッカー Spectrum.jsを使いこなせる風になってみよう

Jqueryカラーピッカー, プラグイン

いろいろなWEBページで見かける色を選択できるパレットみたいなやつ。

これがあるとなんかいいサイトって感じがしますね。

ということで特に使う予定も用事もないですが、気になったので使い方を確認してみました。

Spectrum.js

ダウンロード

以下のURLで「Download Zip」からダウンロード。

回答したフォルダ直下の以下のファイルを使用します。

  • spectrum.js
  • spectrum.css
<link rel="stylesheet" href="./css/spectrum.css" />
<script src="./js/spectrum.js"></script>

cssは必須ではありませんが、デザインを自分で作るのは大変なので使いましょう。

使い方

基本的な使い方は以下になります。

使い方のサンプルはこちらから。

<input type='text' id="custom" />

<script>
$("#custom").spectrum({
});
</script>

オプション

このままでは使い物になりませんので、以下のオプションを必要に応じて追加します。

オプション名内容
color色の初期値を指定します。
#000000やred,yellow等が使用可能です。
flatフルサイズで表示
デフォルト値：false
showInputテキストフィールド表示の有無
デフォルト値：false
※trueのデフォルト表示フォーマットはhsv形式です。
表示フォーマットはpreferredFormatで設定可能です。
showInitial色の初期値を表示しておくか選択できます。
デフォルト値：false
showAlpha透明度(アルファ値)表示の有無
デフォルト値：false
disabledSpectrumを無効化できます。
デフォルト値：false
※どんな用途で使用するかよくわかりません。
showPaletteパレットの表示
デフォルト値：false
よく使われる色をあらかじめ設定できます。
表示する場合はTrueに設定し、paletteオプションにパレットに表示する色を設定します。
showPaletteOnlyパレットのみを表示する場合に使用します。
(カラーチャートを非表示にする)
デフォルト値：false
togglePaletteOnly showPaletteOnly がTrueの時、必要に応じてカラーチャートを表示するボタンを設置できます
デフォルト値：false
カラーチャートの表示を切り替えるトグルボタンに表示するテキストは以下オプションで指定可能です。

togglePaletteMoreText
togglePaletteLessText
togglePaletteMoreText togglePaletteOnly がTrueの時にカラーチャートを表示するボタンに記載するテキストを設定します。
例）
togglePaletteMoreText : ‘表示する’
togglePaletteLessText togglePaletteOnly がTrueの時にカラーチャートを非表示するボタンに記載するテキストを設定します。
例）
togglePaletteLessText : ‘非表示にする’
paletteshowPaletteがTrueの時にパレットに表示する色を設定します。
例）
palette: [ [‘black’, ‘white’, ‘blanchedalmond’], [‘rgb(255, 128, 0);’, ‘hsv 100 70 50’, ‘lightyellow’] ]
preferredFormat showInputがtrueの場合の表示フォーマットを設定します。
設定可能なフォーマット
Hex
Hex3 ※３桁で表示不可の場合はHexで表示
Hsl
Rgb
Name ※名前表示不可の場合はHexで表示

サンプルはこちらから。

Jqueryカラーピッカー, プラグイン