カラーピッカープラグイン

この excolorは、https://github.com/rjfranco/excolor から excolor-master.zipをダウンロードしてこのサイトで配置して利用しています。
具体的には、この解凍で得られる「excolor-master」フォルダをこのページの相対パス「../js/」にコピーしています。
この場合、以下のコードをHTMLの<head>内に追加して利用しています。

<link rel="stylesheet" href="../js/excolor-master/css/excolor.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="../js/excolor-master/js/jquery.excolor.js"></script>
<script type="text/javascript">

$(function(){
	$('#color_field1').excolor({
		root_path : '../js/excolor-master/img/' //本ファイルから見た画像ディレクトリの場所を指定
		,
		callback_on_ok: function () {
			alert($("#color_field1").val());
			$("body").css("background-color",$("#color_field1").val());
		}
	});
});

$(function(){
	$('#color_field2').excolor({
		root_path : '../js/excolor-master/img/' //本ファイルから見た画像ディレクトリの場所を指定
		,
		callback_on_ok: function () {
			alert($("#color_field2").val());
			$("body").css("background-color",$("#color_field2").val());
		}
	});
});

$('input.color-input').excolor();

</script>

そして、<body> で、次のタグを記述しています。この上下はidの指定で、連結しています。

	<input type="text" name="color" class="color-input" id="color_field1" maxlength="6" size="7" value="ff0000" onchange="">
	<input type="text" name="color" class="color-input" id="color_field2" maxlength="6" size="7" value="ff0000" onchange="">

カラーピッカープラグイン excolor を利用

jqueryを利用したexcolorの利用例です。