jQueryのプラグイン(ColorPicker)でカラーコードを視覚的に選択させる方法
2024/01/13
カラーコードを入力するフォームがあって、HTMLやCSSの知識がない方のために、視覚的にカラーコードを選択させたかった。調べたところColorPickerというjQueryのプラグインがあったのでサンプルとソースのメモ。
プラグインダウンロード先
http://www.eyecon.ro/colorpicker/#download
サンプル
https://taitan916.info/sample/colorpicker/
ソース
<html> <head> <title>カラーピッカーのテスト</title> <link rel="stylesheet" href="css/colorpicker.css" type="text/css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="js/colorpicker.js"></script> <script> <!-- $(function(){ $('#color').ColorPicker({ onSubmit: function(hsb, hex, rgb, el) { $(el).val(hex); $(el).ColorPickerHide(); }, onBeforeShow: function () { $(this).ColorPickerSetColor(this . value); } }); $('#color').bind('keyup',function() { $(this).ColorPickerSetColor(this . value); }); }); //--> </script> </head> <body> <?php if($_POST['color']){ ?> 送信したカラーコード:<?php echo $_POST['color'];?><br /> <div style="height:100px; width:100px; background:#<?php echo $_POST['color'];?>;"></div> <?php } ?> <form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post"> <input type="text" name="color" id="color" maxlength="6" size="6" value="<?php echo ( $_POST['color'] ) ? $_POST['color'] : 'ff0000';?>"> <input type="submit" value="送信"> </form> </body> </html>
参考サイト
http://alphasis.info/2011/06/jquery-colorpicker-input/
その他
jQueryとプラグインを読み込んで、ちょっと書くだけで最低限必要な機能は使えた。ただ、iphoneで確認したところ、パレット部分みたいなところは動かせないみたい。スマホ用のページで使う場合は注意が必要。
関連記事
-
jQueryにて何らかの処理中にブラウザをロックする「Block UI」プラグインの利用方法
jQueryにて何らかの処理中、ユーザーによるクリックや入力等の動作を防ぎたかっ ...
-
Lightboxで画像拡大時にダウンロードリンクを設置する方法
Lightboxで画像拡大時にダウンロードリンクを設置したいと要望を受けた。もち ...
-
formでファイルを選択した際にファイル名やサイズ、形式を調べる方法
フォームで画像などをアップロードする際に「ファイルサイズが大きすぎないか?」「拡 ...
-
FullCalendarでカレンダー内のイベントをクリックした際にタイトル以外の内容も表示させる方法
FullCalendarでカレンダー内のイベントをクリックした際にtitle以外 ...
-
Flashを用いずJavaScriptでコピー&カット機能を実装する方法
以前メモったようなFlashを用いる方法ではなく、WebAPIでコピー& ...