カラーピッカーを表示する

書式

pickerObj = new YAHOO.widget.ColorPicker(pickerID, option)

pickerObj : カラーピッカーオブジェクト
pickerID : カラーピッカーID
option : オプション【省略可能】

説明

カラーピッカーを表示するにはYAHOO.widget.ColorPicker()を使います。最初のパラメータにカラーピッカーを表示するコンテナを指定します。2番目のパラメータはオプションでカラーピッカー上に表示する項目と、カーソル画像などを指定することができます。2番目のパラメータはオプションで省略することができます。
Ajaxライブラリ リファレンス

サンプルコード [実行]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" type="text/css" href="assets/colorpicker.css">
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src="yui/utilities.js"></script>
<script type="text/javascript" src="yui/slider.js"></script>
<script type="text/javascript" src="yui/colorpicker-beta.js"></script>
<script type="text/javascript"><!--
var picker;
window.onload = function(){
picker = new YAHOO.widget.ColorPicker("box", {
showhsvcontrols: true,
showhexcontrols: true,
images: {
PICKER_THUMB: "assets/picker_thumb.png",
HUE_THUMB: "assets/hue_thumb.png"
}
});
}
// --></script>
</head>
<body>
<h1>Sample</h1>
<div id="box"></box>
</body>
</html>