MAX Factory

Icon

モバイル(フィーチャーフォン、スマートフォン、タブレット)を中心とした技術メモ

[javascript]color picker

ブログパーツの背景色をユーザが設定できる管理画面(htmlページ)を作成しています。
一般ユーザにRGB16進で記述させるって厳しいので、
カラーがUIでわかりやすく表現する方法を探してました。

で、ありました。
JSで作成されたいけてるカラーピッカーを発見しました。(有名なのかもしれないけど)

○color picker
http://www.skuare.net/test/proPhotoColor.html

サンプルソースの配布もしているので、設置が簡単でした。
ただ、重い。。。
表示に時間がかかってしまうので、利用したい人だけが別ウインドウを開いて使用してもらうようなナビゲーションにしました。
(Flashで作成したほうが軽いんでしょうね。。)

あと、サンプルではJSファイルと画像ファイルが相対パス指定になっています。
絶対パスで利用したい方は、ダウンロードしたファイルから以下の点を修正します。

○index.html(7行目?11行目と142行目?174行目)
cssとimageを読み込みしているパスを絶対パスに変更

○colorpicker.js(9行目?13行目)

Refresh.Web.DefaultColorPickerSettings = {
startMode:’h',
startHex:’ff0000′,
clientFilesPath: ‘img/’
};

上記の箇所が初期設定になっていますので、
clientFilespathを「img/」から自分の環境パスに変更で完了

Category: javascript

Tagged:

 

2008年7月
« 6月   8月 »
 123456
78910111213
14151617181920
21222324252627
28293031