[jQueryプラグイン]ExColorというカラーピッカーが軽量、簡単でめちゃくちゃ使いやすい件

セミオーダーメイドのECの開発をしていてカラーピッカーが必要になったので調べていたところ「ExColor」という非常に使いやすいプラグインを見つけました。

今までカラーピッカーというと、簡易なものなら「jQuery SimpleColor Color-Picker – Recursive Design」を使い、そうでない場合は「ColorPicker – jQuery plugin」を使っていました。

でも、前者はともかく後者は見た目スタイリッシュ過ぎて、かえって一般のユーザには使いづらいなぁと思っていたんですよね。作りもちょっとリッチすぎる気がします。

その点、ExColorはinputのidを渡すだけで動作しますし、スタイルもjsに書かれているためスタイルシートの読み込みの必要もありません。
さらには、何もしなくてもinputの脇にカラープレビューを置いてくれるので非常に便利！

jsのサイズもわずか16kBと軽量ですし、もっとも手間がかからずそれなりの機能を有するカラーピッカーとして、今後はメインで使っていきたいと思います。

豊富なオプション

これだけ軽量でお手軽なプラグインにもかかわらず、オプションも充実しています。

配布元ページのCreate a unique design!の項目で、見た目を確認しながらオプションのコードを取得できるので解説の必要はなさそうですが、フルコースを書いておくとコピペに便利なので残しておきます。

// デフォルトならたったこれだけの記述で動作します
$("#inputID").modcoder_excolor();

下記の設定は全てデフォルトの値です。つまり何もオプションを加えなければ下記の通りになります。

項目別の並び

$("#inputID").modcoder_excolor({
	hue_bar: 0,			// 色相選択バーのデザイン
	hue_slider: 0,			// 色相選択バーのカーソル指定
	sb_slider: 0,			// 色選択ボックスのカーソル指定
	sb_border_color: '#000000',	// 色選択ボックスの枠線の色
	border_color: '#000000',	// カラーピッカーのボーダー色
	background_color: '#c0c0c0',	// カラーピッカーの背景色
	shadow: true,			// カラーピッカーのドロップシャドウを表示するか
	shadow_color: '#8a8a8a',	// カラーピッカーのドロップシャドウ色
	shadow_size: 4px,		// カラーピッカーのドロップシャドウ幅
	backlight: true,		// カラーピッカーの内側のシャドウを表示するか
	round_corners: true,		// カラーピッカーの角丸
	color_box: true,		// inputの脇にプレビューを表示するか
	show_color_on_border: false,	// inputのボーダを選択色にするか
	input_text_color: '#000000'	// 入力欄のテキスト色
	label_color: '#000000',		// 入力欄のラベル色
	input_background_color: '#8a8a8a'	// 入力欄の背景色
	effect: 'none',			// 表示エフェクト(zoom, slide, fade)
	anim_speed: 'slow',		// 表示速度
});

配布サイトのCreate a unique design!の並び

$("#inputID").modcoder_excolor({
	hue_bar: 0,			// 色相選択バーのデザイン
	sb_slider: 0,			// 色選択ボックスのカーソル指定
	show_color_on_border: false,	// inputのボーダを選択色にするか
	sb_border_color: '#000000',	// 色選択ボックスの枠線の色
	round_corners: true,		// カラーピッカーの角丸
	shadow_size: 4px,		// カラーピッカーのドロップシャドウ幅
	background_color: '#c0c0c0',	// カラーピッカーの背景色
	input_text_color: '#000000'	// 入力欄のテキスト色
	effect: 'none',			// 表示エフェクト(zoom, slide, fade)
	hue_slider: 0,			// 色相選択バーのカーソル指定
	color_box: true,		// inputの脇にプレビューを表示するか
	border_color: '#000000',	// カラーピッカーのボーダー色
	label_color: '#000000',		// 入力欄のラベル色
	shadow: true,			// カラーピッカーのドロップシャドウを表示するか
	shadow_color: '#8a8a8a',	// カラーピッカーのドロップシャドウ色
	backlight: true,		// カラーピッカーの内側のシャドウを表示するか
	input_background_color: '#8a8a8a'	// 入力欄の背景色
	anim_speed: 'slow',		// 表示速度
});