Farbtastic: jQuery color picker plug-in は、WEBページでカラーコードを自分で作成して
使用する為のツールです。ブラウザで絵を描いたり、対話式で WEB ページのデザイン
をする時に使えると思います
WEB ページでの使用方法
まず、以下のファイルを WEB ページにアップロードします
jquery.js
farbtastic.js
farbtastic.css
marker.png
mask.png
wheel.png
その url は、http://??.jp/cp/ だとします
そして、使いたいページで以下の定義を行います
<script type="text/javascript" src="http://??.jp/cp/jquery.js"></script>
<script type="text/javascript" src="http://??.jp/cp/farbtastic.js"></script>
<link rel="stylesheet" href="http://??.jp/cp/farbtastic.css" type="text/css" />
次に、color picker を配置したい位置に以下のような HTML を書きます
<form>
<input
type="text"
id="color"
name="color"
value="#123456"
/>
<br>
<div id="picker"></div>
</form>
form は必ず必要です。サーバーへデータを送信しない場合でも記述して下さい。
input に カラーデータがセットされます。id と name を両方設定して下さい
div が color picker が表示される場所ですので、div には必ず id が必要です
そして最後に JavaScript で実装します
<script type="text/javascript">
// color picker の作成
$(document).ready(function() {
$('#picker').farbtastic('#color');
});
</script>
この記述方法は、jQuery を使用した独特の方法なので、
詳しくは、jQuery サンプル を参照して下さい
少し応用編
カラーが選択された時のイベントは以下のようにして定義します
<script type="text/javascript">
$(document).ready(function() {
$('#picker2').farbtastic(function() {
$('#color2').val(
$.farbtastic('#picker2').color
);
});
});
</script>
これによって、条件によってカラーコードのセット先を変更できます。
また、初期値を設定する事もできます。
以下の関数は、初期値設定用の関数ですが、関数にしてしまえば、
IE では VBScript から呼び出す事もできます
他にもいくつかメソッドやプロパティがありますが、これだけで普通に
アプリケーションに組み込めるはずです。
( hsl に関するプロパティとメソッドがあります )
function fvbSetColor(str){
$.farbtastic('#picker').setColor(str);
}
|