jQueryのプラグインでカラーコードを視覚的に選択
カラーコードを入力するフォームがあって、HTMLやCSSの知識がない方のために、視覚的にカラーコードを選択させたかった。調べたところColorPickerというjQueryのプラグインがあったのでサンプルとソースのメモ。
■プラグインダウンロード先
http://www.eyecon.ro/colorpicker/#download
■サンプル
http://sample.taitan916.info/colorpicker/
■ソース
<html> <head> <title>カラーピッカーのテスト</title> <link rel="stylesheet" href="css/colorpicker.css" type="text/css" /> <script type="text/javascript" src="http://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で確認したところ、パレット部分みたいなところは動かせないみたい。スマホ用のページで使う場合は注意が必要。
関連記事
-
-
POP広告をjQueryで再現する方法
サイト内のリンクをクリックすると、新しいタブもしくはウィンドウで開く広告をちょい ...
-
-
formでファイルを選択した際にファイル名やサイズ、形式を調べる方法
フォームで画像などをアップロードする際に「ファイルサイズが大きすぎないか?」「拡 ...
-
-
jQueryで電話番号チェック
やりたかったことはjavascriptかjQueryで 電話番号のバリデート。 ...
-
-
adblock(広告削除)設定している場合はページを表示させない
iPhoneのSleipnirでネットをしていると「広告がブロックされたのでペー ...
-
-
jQueryで後から追加された要素にイベントを設定
jQueryで.html()等を使って追加した要素に対してイベントを設定したかっ ...
-
-
jQueryでボタンをクリックしてクリップボードにコピー
■2015/11/01追記 以下記事でライブラリとか無しで同様の機能がつけられる ...
-
-
bootstrap-datetimepickerについて
日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、 普通のセレクト ...
-
-
jQueryのプラグインで簡単にイメージスライダーを作成(bxslider)
画像のスライダーを作る時に便利なプラグインであるbxslider。 簡単に使える ...
-
-
jquery.cookie.jsで保存期間を時間指定する方法
jquery.cookie.jsで保存期間を1時間等、時間指定したい。公式サイト ...
-
-
スマホ対応のjQueryのカラーピッカープラグイン
以前の記事でカラーピッカープラグインのことを書いたけど、スマホでは使えない。なの ...