JavaScript

input(入力エリア)にカラーピッカーを表示する方法【farbtastic.js】

farbtastic.jsを使ってinput(入力エリア)にカラーピッカーを表示する方法をご紹介します。

ソース元:Farbtastic Color Picker

以下がソース元です。
Farbtastic Color Picker

input(入力エリア)にカラーピッカーを表示するCSSの記述

※カラーピッカー用の画像(wheel.png、marker.png、mask.png)を.farbtastic .wheel、.farbtastic .overlay、.farbtastic .markerに用意します。必要に応じて変更して下さい。

<style type="text/css">
body{
  text-align: center;
}
h1{
  text-align: center;
  font-size: 22px;
  padding: 20px 0;
  line-height: 2em;
}
.cbox{
  width: 250px;
  margin: 0 auto;
}

.farbtastic {
  position: relative;
}
.farbtastic * {
  position: absolute;
  cursor: crosshair;
}
.farbtastic, .farbtastic .wheel {
  width: 195px;
  height: 195px;
}
.farbtastic .color, .farbtastic .overlay {
  top: 47px;
  left: 47px;
  width: 101px;
  height: 101px;
}
.farbtastic .wheel {
  background: url(wheel.png) no-repeat;
  width: 195px;
  height: 195px;
}
.farbtastic .overlay {
  background: url(mask.png) no-repeat;
}
.farbtastic .marker {
  width: 17px;
  height: 17px;
  margin: -8px 0 0 -8px;
  overflow: hidden; 
  background: url(marker.png) no-repeat;
}
</style>

farbtastic.jsを使ってinput(入力エリア)にカラーピッカーを表示するJavaScriptの記述

※jquery.js、farbtastic.jsファイルを読み込みます。$(‘カラーピッカーエリア’).farbtastic(’16進数入力エリア’)でカラーピッカーエリアで選択した16進数カラーを入力エリアに設定します。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="farbtastic.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
  $('#picker').farbtastic('#color');
});
</script>

input(入力エリア)にカラーピッカーを表示するHTMLの記述

※カラーピッカーエリア(id=”picker”)と16進数カラー入力エリア(id=”color”)を用意します。必要に応じて変更して下さい。

<h1>farbtastic.jsを使ってinput(入力エリア)にカラーピッカーを表示します。<br>以下のカラーピッカー上でマウスをクリックしながらドラッグして下さい。</h1>

<div class="cbox">
<div class="form-item"><label for="color">Color:</label><input type="text" id="color" name="color" value="#123456" /></div><div id="picker"></div>
</div>

farbtastic.jsを使ってinput(入力エリア)にカラーピッカーを表示するデモページ

farbtastic.jsを使ってinput(入力エリア)にカラーピッカーを表示するデモページ

 

※流用される場合は自己責任でお願いします。
 デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。