色の指定が自由自在!カラーピッカーを出現させるjQueryプラグイン「Bootstrap Color Picker Sliders」

Bootstrapを拡張するjQueryプラグイン「Bootstrap Color Picker Sliders」の紹介です。

読み込むライブラリが多いのが難点ですが、スタイリッシュなカラーピッカーを導入したい方はお試しください。

DEMO(デモ)

ダウンロード

※ ver 3.0.1時点の内容です。

ソースコードはgithub上で管理されています。
https://github.com/istvan-ujjmeszaros/bootstrap-colorpickersliders

右上の「Download zip」からダウンロードしてください。

使い方

「Bootstrap Color Picker Sliders」の公式サイトがあります。
https://www.virtuosoft.eu/code/bootstrap-colorpickersliders/

詳しくは上記サイトを参考にしてください。

ライブラリを読み込む

jQuery、Bootstrap、tinyColorに依存しますので、それらを先に読み込みます。
※ 順番に注意!

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="dist/bootstrap.colorpickersliders.min.css">

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.4.1/tinycolor.min.js"></script>
<script src="dist/bootstrap.colorpickersliders.min.js"></script>

表示させるアイテム

<input type="text" id="hsvflat" value="">

「Bootstrap Color Picker Sliders」の設定(初期化)

$("#hsvflat").ColorPickerSliders({
	color: "rgb(36, 170, 242)",
	placement: 'right',
	sliders: false,
	swatches: false,
	hsvpanel: true
});

オプション

とても豊富なオプションがあります。日本語訳したものをまとめました。カスタマイズしたい場合は、公式サイトを参考にいろいろとイジってみてください。
https://www.virtuosoft.eu/code/bootstrap-colorpickersliders/

オプション 説明
color 接続された入力要素に有効な(CSSでフォーマットされた)色の値がない場合、これは最初の色です。Tiny Colorがサポートするどのような形式でもかまいません。
size 'sm':小さなサイズのポップオーバー。
'default':デフォルトのポップオーバーサイズ。
'large':大きなポップオーバー。
placement ップオーバーの配置方向。'auto'|することができます| 'top'| 'left'| 'bottom'| 'right'
ときに'auto'指定され、それが動的にポップオーバーを再配向します。たとえば、配置がある場合は、可能であれば'auto left'ツールチップが左に表示され、そうでない場合は右に表示されます。
preventtouchkeyboardonshow true:タッチキーボードがフォーカス上に表示されないように入力を読み取り専用にし、2回目のクリックで編集可能にする必要があります。
title '':Popoverタイトル。
hsvpanel false:HSVカラーセレクタパネルを有効/無効にします。
sliders true:スライダを有効/無効にします。
grouping true:HSVパネル、スライダとスウォッチセクションのグループ化を有効/無効にします。
trigger 'focus':フォーカスまたはクリック時にポップオーバーが表示されます。
'manual':フォーカス/クリックでポップオーバーのオートトリガーがありません。ポップオーバーを表示/非表示にするには、トリガーcolorpickersliders.showcolorpickersliders.hideイベントが必要です。
flat false:カラーピッカーはポップアップでレンダリングされ、ポップアップは接続された要素のフォーカスに表示されます。
true:カラーピッカーは接続された要素の直後にレンダリングされ、常に表示されます。
previewformat これはプレビュースライダのカラーフォーマットです(表示されている場合)。することができますrgb、hslまたはhex。16進形式は不透明度値を表すことはできません。
swatches array:CSSの色の配列(CSSの色名も可能です)。
falseスウォッチは無効です。
customswatches string:カスタムスウォッチグループの名前。同じcustomswatches名前のカラーピッカーは同じ色見本を共有するので、カラーピッカーのいずれかに新しい色を追加すると、同じcustomswatches名前のページ上のすべてのカラーピッカースウォッチが更新されます。
falseカスタムスウォッチは無効になっているので、あらかじめ定義されたスウォッチだけを使用できます。
connectedinput selector or jQuery object:接続された入力要素の値は、カラーピッカーと同期して自動的に更新されます。入力で表現される色の書式は、data-color-formatプロパティで設定できます。これは、のいずれかにすることができhex、hslまたはrgb。それが16進数の場合、不透明度は破棄されます。
updateinterval ドラッグ中にスライダの間隔を更新します(ms)。デフォルトは30です。
previewontriggerelement true:接続された要素の背景の色をプレビューします。
false:接続された要素のプレビューがありません。
previewcontrasttreshold 30previewontriggerelement有効にすると、明度がこの値より低い場合、要素のテキストの色は白になります。それ以外の場合、テキストは黒です。
erroneousciecolormarkers true:変換不可能なCIEの色には、CIEスライダのレベルマーカーに感嘆符が付きます。
false:マーカーに感嘆符はありません。
invalidcolorsopacity 1:CIEスライダの無効な(変換不可能な)領域の不透明度。
finercierangeedges true:スライダ上の有効なCIE範囲のより鮮明で正確なエッジ。
false:スライダ上の有効なCIE範囲のエッジが滑らかになります。
order どのスライダがどの順序で表示されるかを定義するオブジェクトです。
可能なプロパティ:opacityhslrgbciepreview
labels スライダのラベルを定義するオブジェクトです。
可能なプロパティ:hslhuehslsaturationhsllightnessrgbredrgbgreenrgbbluecielightnessciechromaciehueopacitypreview
onchange function(container, color):この機能は、スライダまたは接続された入力を介して色が変更されたときにトリガされます。このcolorパラメータは、実際のカラーオブジェクトをrgbオブジェクト、hslオブジェクト、cie lchオブジェクト、Tiny Colorオブジェクトの形式で保持します。
titleswatchesadd string:色見本の追加ボタンのタイトル。
titleswatchesreset string:リセットスウォッチボタンのタイトル。

実用的な使い方の例

個人的に触ってみて使い勝手がよかった機能を紹介します。

色をあらかじめ指定

カラーピッカーがメインの機能ですが、色をあらかじめ指定しておくことも可能です。

DEMO(デモ)

<input type="text" id="hsvflatvector" value="">
$("#hsvflatvector").ColorPickerSliders({
	color: "#F44336",
	placement: 'right',
	sliders: false,
	swatches: ['#F44336', '#E91E63', '#9C27B0', '#673AB7', '#3F51B5', '#2196F3', '#03A9F4', '#00BCD4', '#009688', '#4CAF50', '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', '#FF5722', '#795548', '#9E9E9E', '#607D8B', '#000000', '#FFFFFF'],
	customswatches: false,
	hsvpanel: false
});

ちなみにhsvpanel: falsetrueにすると、パネルが2つ表示されるようになります。(下のDEMOに実装しています。)

カラー変更時の処理

色が変更された時の処理を指定できます。具体的には以下のようなオプションの中で以下のような指定を行います。

色の種類は、Googleのマテリアルデザインガイドから引っ張ってきました。
https://material.io/guidelines/style/color.html#color-color-palette

DEMO(デモ)
色を切り替えたタイミングで背景色が分かる処理を追加しています。

<input type="text" id="hsvflatbg" value="">
$("#hsvflatbg").ColorPickerSliders({
	color: "rgb(255, 255, 255)",
	placement: 'right',
	sliders: false,
	swatches: ['#F44336', '#E91E63', '#9C27B0', '#673AB7', '#3F51B5', '#2196F3', '#03A9F4', '#00BCD4', '#009688', '#4CAF50', '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', '#FF5722', '#795548', '#9E9E9E', '#607D8B', '#000000', '#FFFFFF'],
	customswatches: false,
	hsvpanel: true,
	onchange: function(container, color) {
		$("#primary .site-main .post").css("background", color.tiny.toRgbString());
	}
});

おわり


カラーピッカーを出現させるjQueryプラグイン「Bootstrap Color Picker Sliders」の紹介でした。

このページが気に入ったら
いいね!しよう

最新の情報をお届けします。

同じカテゴリーの記事