jQueryでとっても簡単にカラーピッカーの実装 | [k]id東京都世田谷区　ホームページ制作　[k]id

Ajaxで背景を変更やフォーム等で色を選択する場合は最近ではカラーピッカーを
使用する事が多いと思うのですが、jQueryプラグインでは機能が多すぎたりする事が多く
なかなか良い方法がありませんでした。

Virgil Rebotonさんにシンプルで実装しやすそうなカラーピッカーがあったのでご紹介します。

jQuery Color Picker

サンプルも公開されています

導入方法

Virgil Rebotonさんからファイルをダウンロード
※ページ中程のDownloadリンクから

ヘッダーに

とりあえずヘッダーに落としてきたファイルを記述
リンクするファイルはJavasScript

<script src="jquery-1.2.2.js" type="text/javascript"></script>
<script src="ColorPicker.js" type="text/javascript"></script>

と

CSSファイル

<style type=text/css media=all>@import url( ColorPicker.css );</style>

その後に例として直書きで

 <script type="text/javascript" charset="utf-8">
<!--
jQuery(function($)
	{
		$("#picker1").attachColorPicker();
	});
//-->
</script>

bodyに

bodyに下記を記述

<input name="任意のname" id="picker1" size="7">

で実装ができます！
簡単ですね！