jQueryのプラグインでカラーコードを視覚的に選択

2015/05/29

カラーコードを入力するフォームがあって、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>

<html>

<head>

<title>カラーピッカーのテスト</title>

<!--

$(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 />

<?php } ?>

<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">

</form>

</body>

</html>

■参考サイト

http://alphasis.info/2011/06/jquery-colorpicker-input/

■その他

jQueryとプラグインを読み込んで、ちょっと書くだけで最低限必要な機能は使えた。ただ、iphoneで確認したところ、パレット部分みたいなところは動かせないみたい。スマホ用のページで使う場合は注意が必要。

- jQuery

: classの取り扱い

jQueryでclassを扱う際、 //id=aaaにclass=testを付与 ...

: Flashを用いずJavaScriptでコピー&カット機能を実装する

以前メモったようなFlashを用いる方法ではなく、WebAPIでコピー& ...

: formでdisplay:none;にしてても送信される

formで特定の部分をdisplay:none;で非表示にしてても内容は送信さ ...

: Ajaxで画像のアップロード(jquery.upload)

業務中に画像の選択後、アップロードボタンを押して画像のアップ、その後フォームの ...

: jQueryでドロワーメニューの作成

■やりたかった事スマホ用サイトにドロワーメニューを設置したかった。 &nbsp ...

: 日付入力のテキストフォームにカレンダープラグインを導入

やりたかった事と制限は下記の通り。・日付入力のテキストフォームにカレンダープラ ...

: jQueryのCSS変更

jQueryでCSSを触る際、 $("#aaa").css('height',' ...

: jQueryでimgタグのsrcを変える

やりたかった事はイベントに応じてimgタグの src内のURLを変更。attrを ...

: Jcropを使ってブラウザ上で画像を範囲指定して切り抜き(トリミング)

やりたかった事は、画像をアップロードして必要な部分のみを範囲指定してもらい、指定 ...

: jQueryの指定されたイベントを実行する(trigger)

jQueryで $('ID').trigger('click'); というみたこ ...

PREV: UTF-16にエンコードされている文字列をUTF-8へデコード
NEXT: スマホ対応のjQueryのカラーピッカープラグイン

jQueryのプラグインでカラーコードを視覚的に選択

関連記事