August 24, 2008

【簡単設置】javascriptでカラーパレット

 前に作ったのをバージョンアップ。バグフィクス。
 ついでに、機能を削ってもっと簡単に利用できるようにした。


prototype.js(ver1.6以上)が必要。

jsファイルはこちら(source)


 環境に合わせて変更すべきところには、Edit!ってコメントが入ってる。
・サーバー仕様
・画像のURI
 を適宜変更してくださいな。

 設置方法は、カラーパレットを挿入したい場所に
<div id="ColorPicker" style="width:128px; height:250px;"></div>
<script type="text/javascript" src="ColorPicker_l-2_1_4.js"></script>

 と記述するだけ。大きさ等のスタイルは適宜変更できます。
 (prototype.jsは使ってない人だけ。ColorPickerより先に読み込む必要あり。)

 あとは、
var c = Color.Picker.RGB;

 とやれば、cにRGB値が取得できるってわけ。

例(sample)
・簡単設置
・無段階採色
・グレースケール対応
・RGB値直接編集可能(RGB値をクリック)
・上辺をダブルクリックで色を取り置き
・取り置きした色はダブルクリックで消去
・色はクッキーに保存

 動作報告・バグ報告歓迎。
 基本的に無断使用で構いませんが、コメントやメールで連絡してもらえると喜びます。実績として紹介させてもらうかもしれません。

 ドラッグ&ドロップで移動もできる高機能版はこちら


注意事項
・同一ページに複数設置はできません
・大きさの動的変更はできません
・画像のURIは各自で設置したものに書き換えてください
・heightに十分余裕をとって設置してください
・javascript内で"Color"というオブジェクトを使用します
・HTML内では"ColorPicker"の他に"cp-"で始まるidを使用します


 調子にノッて、Opera用Widgetも作ってしまいました。こちら(Operaユーザのみ)。

k_yon at 02:56│Comments(0)clip!javascript 

この記事にコメントする

名前:
URL:
  情報を記憶: 評価: 顔   
 
 
 
現状報告
 KiCad解説本の重版が決定しました!ありがとうございます♪.(2016/12/10)

自己紹介
yoneken
logo
 ロボットの研究・開発をしています。

続きを読む

連絡先は
ad

Syndicate this site
 2012年からKiCad日本語版バイナリのメンテナもしています.
来てくれた人たち
  • 今日:
  • 昨日:
  • 累計:

ショップリンク
嬉しいコメント
記事について
 このブログ記事の著作権は全てyonekenに属します。
 転載や個別記事へのリンクはご自由にどうぞ。連絡は必要ありません。
 記事の内容は無保証です。古い記事の内容は当時と状況が変わっている場合があります。
 内容に関する質問はコメント欄でもらえると、他の人にも役立ちます。
記事検索
月別
リア友リンク