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

skuare.netが紹介するJavaScirptでサイトをリッチに

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

twitterにつぶやく このエントリーを含むはてなブックマーク はてなブックマークを見るこの記事をクリップ! コメントを見るYahoo!ブックマークに登録 このエントリーをdel.icio.usに追加する deliciousブックマーク数このページを行き先登録 このページをniftyクリップに登録このページをBuzzurlに登録

フォームで色を指定させることがあれば、色を選択できるカラーピッカーが有効です。
視覚的に明度や色相を判別でき、感覚的な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」サンプル

記事作成:2007年10月08日

follow me

▼色を選択するカラーピッカーjavascript「Mootools Colo(u)r picker」へのコメントはtwitterにて受け付けています。
twitterでコメントする twitterでコメントする

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

ページの最初に戻る

about me

skuare

大学卒業後、某PR会社にてPR誌の取材・編集・デザインからPRコンサルティング、調査分析まで幅広い業務に携わる。業務の合間合間にWEB制作に関する技術を習得。
2007年6月から当サイト「skuare.net」を開始。その後、ホームページ制作会社に転職し、WEBサイト制作に本格的に従事し、CMS、JavaScriptに無駄に突っ込むディレクターとして活動中。ホロヨッターもやっています。
もし、もうちょっと詳細を見たかったら・・・・こちら >>

I'm @ Social media below

  • skuare.net rss
  • skuare's twitter
  • skuare's twitter
  • skuare's linkedin
  • skuare's facebook
Copyright (c) skuare.net All Rights Reserved.