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で確認したところ、パレット部分みたいなところは動かせないみたい。スマホ用のページで使う場合は注意が必要。
関連記事
-
-
FlashとjQueryを組み合わせたプラグインでWebカメラで撮影した画像をアップロード
FlashとjQueryを組み合わせたプラグインを用いてWebカメラで撮影した画 ...
-
-
ダウンロード無しで外部ファイル呼び出し
■jQuery http://scriptsrc.net/ ■bootstrap ...
-
-
NicEdit(WYSIWYGエディタ)を再描写時にサイズを調整する方法
NicEdit(WYSIWYGエディタ)を設置しているサイトがあった。ページ読み ...
-
-
さくらレンタルサーバでCookieが保存できない
さくらインターネットのレンタルサーバでjquery.cookie.jsを用いてC ...
-
-
jQueryの指定されたイベントを実行する(trigger)
jQueryで $('ID').trigger('click'); というみたこ ...
-
-
htmlタグが入った内容の文字を丸める
phpである文字列が○文字以上だった際、 省略してお尻に「……」をつけたいという ...
-
-
jQueryでセレクトメニューにcheckedをつける
セレクトメニュー(セレクトボックス)で特定の項目をデフォルトで選択しておきたかっ ...
-
-
submit関連のjQuery2
<?php error_reporting(E_ALL & ~E_ ...
-
-
getElementsByTagName
うろ覚えだけど業務中に、 document.getElementById('aa ...
-
-
javascriptやjQueryで画像を書き換えても変わらない場合
けっこう前に画像をアップロードしてリアルタイムに プレビューする機能を作った時に ...