勉強したことのメモ

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

スマホ対応のjQueryのカラーピッカープラグイン

   

以前の記事でカラーピッカープラグインのことを書いたけど、スマホでは使えない。なのでスマホ対応のものを探したところ、良さそうなのがあった。

 

■excolor

https://github.com/rjfranco/excolor

 

■サンプル

http://sample.taitan916.info/colorpicker2/

 

■ソース

<html>
<head>
<title>カラーピッカーのテスト2</title>
<link rel="stylesheet" href="css/excolor.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/jquery.excolor.js"></script>
<script>
<!--
$(function(){
	$('#color').excolor({
		root_path : 'img/' //本ファイルから見た画像ディレクトリの場所を指定
	});
});
//-->
</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>

 

■その他

上記のソースで一応使えるんだけど以下のタッチイベント対応のものに差分を入れ替えるともっとスムーズに使えた。

https://github.com/akihiro1977/excolor

js,css,imgフォルダごと上書き保存でOK。

 - jQuery

  関連記事

要素の点滅

やりたかった事はaタグ内で囲まれている部分を点滅。 <blink>だ ...

FullCalendarでラベル毎に表示切替したい

Googleカレンダーだとページ左側にマイカレンダーというのがあり、その中に任意 ...

jQueryで画像(タグ内)のsrc情報を取得する場合

すぐに出てこなかったのでメモ。 $('#test').attr('src'); ...

NicEdit(WYSIWYGエディタ)とテキストエリアの切り替え

チェックボックスのON / OFFでNicEdit(WYSIWYGエディタ)とt ...

jquery.cookie.jsで保存期間を時間指定する方法

jquery.cookie.jsで保存期間を1時間等、時間指定したい。公式サイト ...

jQueryで関数処理中にブラウザのブロック(intro.js)

Ajaxで処理を行っている間、他の処理を行わせたくなかった。 「now load ...

さくらレンタルサーバでCookieが保存できない

さくらインターネットのレンタルサーバでjquery.cookie.jsを用いてC ...

jQueryプラグインの作成

面白そうだったのでメモ。 ■参考サイト http://www.entacl.in ...

jQuery UIでカレンダーピッカー(Datepicker)の利用方法

フォーム等で日付を入力する際にカレンダーピッカー機能を実装することがある。その際 ...

Ajaxのクロスドメイン2

PHPも介せない場合。こちらの方がスマートでよさそう。 jsonpを使うみたい。 ...