skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

色を選択するカラーピッカーjavascript「Mootools Colo(u)r picker」

｜ ｜ ｜ ｜ ｜ ｜ ｜

フォームで色を指定させることがあれば、色を選択できるカラーピッカーが有効です。
視覚的に明度や色相を判別でき、感覚的なHEXでの色入力が可能です。
Mootools Colo(u)r pickerではmootoolsベースのカラーピッカーを公開しています。

使用方法
Mootools Colo(u)r pickerからmoocolpick.jsをmootoolsからmootools.jsをダウンロードします。
head内には以下のように記述します。
<script src="http://yourdomain/mootools.js" type="text/javascript"></script>
<script src="http://yourdomain/moocolpick.js" type="text/javascript"></script>
<script type="text/javascript">
// var picks;
window.addEvent('domready', function() {
picks = new Picker(['id名'], {
img: 'color.png',
onComplete: function(el, col) {
$(el.id.split('_')[0]).value = col;
}
});
});
//]]>
</script>
またHTMLには下記の通り書き込みます。
<input type="text" name="color" id="color"><span id="id名">選択</span>
色を選択するカラーピッカーjavascript「Mootools Colo(u)r picker」サンプル

記事作成：2007年10月08日

前の記事：テキストボックスを自動で収縮するjavascript「Resizing textarea」
次の記事：リンク先のサムネイルを表示するjavascript「jLinkLook」