farbtastic.jsを使ってinput(入力エリア)にカラーピッカーを表示する方法をご紹介します。
Contents
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(入力エリア)にカラーピッカーを表示するデモページ
ソース元:Farbtastic Color Picker
以下がソース元です。
Farbtastic Color Picker
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
ディスプレイ広告