配布元：Download the jQuery Color Picker and the Demo
License: Free

the jQuery Color Pickeはカラーピッカーを実装できる非常にシンプルなプラグインです。

利用方法

まずはJavaScriptファイルとCSSファイルを読み込みます。結構な量です。

<script src="js/jquery/jquery.js" type="text/javascript"></script>
<script src="js/jquery/ifx.js" type="text/javascript"></script>
<script src="js/jquery/idrop.js" type="text/javascript"></script>
<script src="js/jquery/idrag.js" type="text/javascript"></script>
<script src="js/jquery/iutil.js" type="text/javascript"></script>
<script src="js/jquery/islider.js" type="text/javascript"></script>
<script src="js/jquery/color_picker/color_picker.js" type="text/javascript"></script>
<link href="js/jquery/color_picker/color_picker.css" rel="stylesheet" type="text/css">
<!--[if lt IE 7]>
<link rel="stylesheet" href="js/jquery/color_picker/color_picker-ie6.css" type="text/css">
<![endif]-->
<!--[if gte IE 7]>
<link rel="stylesheet" href="js/jquery/color_picker/color_picker-ie7.css" type="text/css">
<![endif]-->

カラーピッカー部分のHTMLは次のようになります。

<input type="text" id="myhexcode" />
<a href="javascript:void(0);" rel="colorpicker&objcode=myhexcode&objshow=myshowcolor&showrgb=1&okfunc=myokfunc"><span id="myshowcolor"> </span></a>

#myhexcodeには選択後の色コードが入り、#myshowcolorをクリックした際にカラーピッカーが立ち上がります。#myshowcolorはCSSで次のように装飾しておくと良いでしょう。

#myshowcolor{
	display:inline-block;
	width:15px;
	height:15px;
	border:1px solid black;
}

スクリプトでは「$.ColorPicker.init()」を実行するとカラーピッカーが設定されます。

$(function(){
	$.ColorPicker.init();
});

色選択後のコールバック関数を設定したい場合は「myokfunc」という関数に設定しておきます。

function myokfunc(){
	alert("This is my custom function which is launched after setting the color");
}

サンプル

FarbtasticはjQueryベースのカラーピッカー作成用のJavaScriptライブラリです。

Farbtasticの使い方

jQueryをhead要素などで読み込みます。

<script type="text/javascript" src="../js/jQuery.js"></script>

Farbtasticの配布サイトよりダウンロードしてきた、farbtastic.jsとfarbtastic.cssをhead要素などで読み込みます。
ダウンロードしたファイルに同梱されている画像はCSSファイルと同じ階層においておきます。

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

次に、カラーピッカーを付けたいinput要素に任意のIDを付けます。

<input type="text" id="任意のinput要素のid" name="color" value="#123456" />

次に、カラーピッカーの配置用に空のdiv要素を配置しておきます。div要素には任意のid属性を付けておきます。

<div id="任意のdiv要素のid"></div>

最後にhead要素内などで、Farbtasticの利用を宣言します。

<script type="text/javascript">
  $(document).ready(function() {
    $('#任意のdiv要素のid').farbtastic('#任意のdiv要素のid');
  });
</script>

サンプル

設置自体は非常に簡単なのですが、結構幅を取りますので、利用する場合は適度な領域が必要です。