[Jquery] カラーピッカー Spectrum.jsを使いこなせる風になってみよう
いろいろな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 |
disabled | Spectrumを無効化できます。 デフォルト値:false ※どんな用途で使用するかよくわかりません。 |
showPalette | パレットの表示 デフォルト値:false よく使われる色をあらかじめ設定できます。 表示する場合はTrueに設定し、paletteオプションにパレットに表示する色を設定します。 |
showPaletteOnly | パレットのみを表示する場合に使用します。 (カラーチャートを非表示にする) デフォルト値:false |
togglePaletteOnly | showPaletteOnly がTrueの時、必要に応じてカラーチャートを表示するボタンを設置できます デフォルト値:false カラーチャートの表示を切り替えるトグルボタンに表示するテキストは以下オプションで指定可能です。 togglePaletteMoreText togglePaletteLessText |
togglePaletteMoreText | togglePaletteOnly がTrueの時にカラーチャートを表示するボタンに記載するテキストを設定します。 例) togglePaletteMoreText : ‘表示する’ |
togglePaletteLessText | togglePaletteOnly がTrueの時にカラーチャートを非表示するボタンに記載するテキストを設定します。 例) togglePaletteLessText : ‘非表示にする’ |
palette | showPaletteがTrueの時にパレットに表示する色を設定します。 例) palette: [ [‘black’, ‘white’, ‘blanchedalmond’], [‘rgb(255, 128, 0);’, ‘hsv 100 70 50’, ‘lightyellow’] ] |
preferredFormat | showInputがtrueの場合の表示フォーマットを設定します。 設定可能なフォーマット Hex Hex3 ※3桁で表示不可の場合はHexで表示 Hsl Rgb Name ※名前表示不可の場合はHexで表示 |
サンプルはこちらから。
ディスカッション
コメント一覧
まだ、コメントがありません