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

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

colpick

colpickの設定・使用方法

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

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

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

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

カラーピッカーの表示

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

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

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

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

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

	});
});
</script>

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です