WEBサービス創造記

WEBサービスを作ったり保守したりしてる人のメモブログです。

jQueryでカラーピッカーを使用する

      2014/11/16

farbtasticのダウンロード

カラーピッカーとは、色を選ぶ道具のことで、下図のようなものです。

カラーピッカーは、色相環や独自フォーマットのパレットなどから直感的に色を選択することができるので便利です。
今回は、jQueryのfarbtasticプラグインを利用してカラーピッカーをブラウザに表示し、任意の色のカラーコードを取得できるようにします。

farbtasticは以下のページからダウンロードすることができます。
http://acko.net/dev/farbtastic

farbtastic|の動作確認

farbtasticをダウンロードして解凍すると、farbtastic.js、farbtastic.cssと、maker.png・mask.png・wheel.pngなどの画像ファイルがあります。
ここでは画像ファイルはimages/farbtastic/というフォルダを作ってそこにまとめます。
farbtastic.jsはjs/lib/へ、farbtastic.cssはcss/lib/へそれぞれ移動します。

画像の場所を変更したので、farbtastic.css内の画像へのパスも合わせて修正しておきます。

.farbtastic .wheel { 
  background: url(../../images/farbtastic/wheel.png) no-repeat; 
  width: 195px; 
  height: 195px; 
} 
.farbtastic .overlay { 
  background: url(../../images/farbtastic/mask.png) no-repeat; 
} 
.farbtastic .marker { 
  width: 17px; 
  height: 17px; 
  margin: -8px 0 0 -8px; 
  overflow: hidden;- 
  background: url(../../images/farbtastic/marker.png) no-repeat;
} 

以下のソースコードをブラウザで開くと、カラーピッカーが表示されます。

<!DOCTYPE HTML> 
<html lang="ja"> 
<head> 
    <meta charset="UTF-8"> 
    <title>カラーピッカー</title> 
    <link type="text/css" href="./css/lib/farbtastic.css" rel="stylesheet" /> 
    <script type="text/javascript" src="./js/lib/jquery-1.5.1.min.js"></script> 
    <script type="text/javascript" src="./js/lib/farbtastic.js"></script>
    <script type="text/javascript" charset="utf-8"> 
    $(document).ready(function() { 
        $('#picker').farbtastic('#color'); 
    }); 
    </script> 
</head> 
<body> 
    <div id="picker"> 
    </div> 
    <form action="" style="width: 400px;"> 
        <div class="form-item"><label for="color">Color:</label><input type="text" id="color" name="color" value="#123456" /></div><div id="picker"></div> 
    </form> 
</body> 
</html> 

 - jQuery ,