色を選択するカラーピッカー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」

関連記事

• [mootools]Color Picker
• 色をHEX、RGB、HSBで表示するカラーピッカーjavascript「mooRainbow」
• セクシーなLightBoxを実現するJavaScript「Sexy LightBox」
• ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」
• BOMBERMAN JAVASCRIPT GAME by mootools.js

• ファイルサイズをJavaScriptライブラリ「jQuery」で自動表示する「addSizes.js」
• JavaScriptライブラリ「jQuery」を使用してフォームを華麗に彩る「jqTransform」
• Webカラーに関するサイト21
• 英字新聞ぽいコラムをJavaScriptライブラリ「jQuery」で作る「Columnizer」
• 心地よく要素を切り替えるJavaScript「jFlip」
• CoverFlowを実現するJavaScript「JS Coverflow」
• 画像を丸く輝かせるJavaScript「sphere.js」
• セクシーなLightBoxを実現するJavaScript「Sexy LightBox」
• JavaScriptライブラリ「jQuery」を使ってカレンダーを作る「jCal.js」
• カバーフローぽい画像ギャラリーJavaScript「ProtoFlow」