カラーピッカー

メモ

souce

demo

download

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("prototype", "1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>
<link rel="stylesheet" type="text/css" href="http://colorpickerjs.googlecode.com/svn/trunk/colorPicker.css">
<script src="http://colorpickerjs.googlecode.com/svn/trunk/yahoo.color.js" type="text/javascript"></script>
<script src="http://colorpickerjs.googlecode.com/svn/trunk/colorPicker.js" type="text/javascript"></script>
</head>
<body>
<p>色1 #<input type="text" id="colorfield1" value="FF0000"></p>
<p>色2 #<input type="text" id="colorfield2" value="FF0000"></p>
<p>色3 #<input type="text" id="colorfield3" value="FF0000"></p>
<p>色4 #<input type="text" id="colorfield4" value="FF0000"></p>
<script type="text/javascript">
["1", "2", "3","4"].each(function(idx) {
  new Control.ColorPicker("colorfield" + idx, { IMAGE_BASE : "http://colorpickerjs.googlecode.com/svn/trunk/img/" });
});
//new Control.ColorPicker("colorfield4", { "swatch" : "colorbox4" });
</script>
</body>
</html>