jQueryプラグインのカラーピッカー「colpick」

「colpick」は、細かなオプション設定もできるjQueryカラーピッカープラグインです。

colpickの設定・使用方法
1. ファイルの配置とパス設定
2. カラーピッカーの表示

colpickの設定・使用方法

サイトよりcolpickをダウンロードします。
ダウンロードサイト：colpick

ファイルの配置とパス設定

ファイルを解凍後に任意のフォルダに配置します。
script要素のsrc属性にjs、cssファイルへのパスを設定します。
※解凍してできるフォルダ名が長いので「colpick」と改名しています。

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

カラーピッカーの表示

色々設定ができますが、ここでは、input要素（テキスト）をクリックしたらカラーピッカーが表示されテキストボックスに色を設定できるようにした設定例を紹介します。

input要素（テキスト）を表示するためにbodyタグの中で、下のinputタグを挿入します。

<input type="text" id="picker" value="" />

カラーピッカーの表示などの処理をするコードをscriptタグの中に記述します。

<script>
$(function() {
	$('#picker').colpick({
		onSubmit:function(hsb,hex,rgb,el) {
			$(el).css('background-color', '#'+hex);
			$(el).colpickHide();
			$(el).val('#'+hex);
		}

	});
});
</script>

これで、input要素（テキスト）をクリックするとカラーピッカーが表示されて、色を選択するとテキストにカラーコードが表示されます。