基本的な使い方

モジュールのダウンロードと展開

ダウンロードページより最新版のzipファイルをダウンロードしてください。ダウンロードに成功したら、HSVColorPickerを使いたいサイトの任意のディレクトリに展開してください。

ファイルの読込み

一般的な他のJavaScriptライブラリと同じように、カラーピッカーを使いたいページのHTMLファイルでscriptタグを使ってファイルを読み込みます。 HSVColorPickerは3つのファイルから成り立っています（そのうちの1つは外部プロジェクトの成果物です）。必ず、次の例のような順番で読み込んでください。

<html>
	<head>
		...
		<script type="text/javascript" src="prototype.js"></script>
		<script type="text/javascript" src="colorutil.js"></script>
		<script type="text/javascript" src="colorpicker.js"></script>
		...
	</head>
	<body>
		...
	</body>
</html>

カラーピッカーの設置

カラーピッカーを設置するには、次のように最初にオブジェクトを生成します。

<html>
	<head>
		...
		<script type="text/javascript" src="prototype.js"></script>
		<script type="text/javascript" src="colorutil.js"></script>
		<script type="text/javascript" src="colorpicker.js"></script>
		...
		<script type="text/javascript">
			var colorPicker = new HSVColorPicker();
		</script>
		...
	</head>
	<body>
		...
	</body>
</html>

次に、カラーピッカーのオブジェクトをinputタグに紐付けます。カラーピッカーオブジェクトのshowメソッドを呼び出すとカラーピッカーの色選択ウィンドウが表示されますが、このとき引数として紐付けたいinputタグのidを渡します。色が選択されたときは、紐付けされたinputタグのvalue属性の値となります。

<html>
	<head>
		...
		<script type="text/javascript" src="prototype.js"></script>
		<script type="text/javascript" src="colorutil.js"></script>
		<script type="text/javascript" src="colorpicker.js"></script>
		...
		<script type="text/javascript">
			var colorPicker = new HSVColorPicker();
		</script>
		...
	</head>
	<body>
		<form action="...">
			<input name="..." id="..." 
				onclick="colorPicker.show(this.id)" />
		</form>
	</body>
</html>

オプション

カラーピッカーオブジェクトを生成するときに、オプションとして色々な値を指定することができます。例えば、選択する色の種類を増やしたいときは次のように連想配列で指定します。

...
<script type="text/javascript">
	var colorPicker = new HSVColorPicker({
		"hStep" : 10,
		"sStep" : 0.125,
		"vStep" : 0.125
	});
</script>
...

指定できるオプションは次の種類があります。

オプション文字列	説明	デフォルト値
unit	指定する単位。"em"、"pt"、"px"等を指定する。	"em"
width	一つのカラーブロックの幅。数値で指定する。	1
hStep	色相（色の種類）の表示間隔。1から360までで、360を割り切れる数値を指定する。	15
sStep	彩度（色の鮮やかさ）の表示間隔。0より大きくて1さく、1を割り切れる小数を指定する。	0.2
vStep	明度（色の明るさ）の表示間隔。0より大きくて1さく、1を割り切れる小数を指定する。	0.2
zIndex	カラーピッカーのz-index。スタイルシートのz-indexの値を指定する。	1
delay	カラーピッカーオブジェクトののhideメソッドを呼んでから、実際に色選択ウィンドウが閉じるまでの時間をミリ秒単位で指定する。	100
hueClick	色選択ウィンドウの色彩の選択方法をtrueもしくはfalseで指定する。 trueの場合はクリックで選択、falseの場合はマウスオーバーで選択となる。	false
closeButton	色選択ウィンドウを閉じるボタンの表示／非表示をtrueもしくはfalseで指定する。 trueの場合は表示、falseの場合は非表示となる。	true