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

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

使用方法
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」サンプル

sponsors

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

記事作成:
記事URL:

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