勉強したことのメモ

webプログラマが勉強したことのメモ。

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で確認したところ、パレット部分みたいなところは動かせないみたい。スマホ用のページで使う場合は注意が必要。

 - jQuery

  関連記事

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のカラーピッカープラグイン

以前の記事でカラーピッカープラグインのことを書いたけど、スマホでは使えない。なの ...