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

2015/05/30 2015/05/30

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

■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="https://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>

<html>

<head>

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

<!--

$(function(){

$('#color').excolor({

root_path : 'img/' //本ファイルから見た画像ディレクトリの場所を指定

});

//-->

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

■その他

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

https://github.com/akihiro1977/excolor

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

- jQuery jQuery, カラーピッカー, プラグイン

: jQueryでjsonデータを処理(parseJSON)

他社が作成したシステムのちょっと改修案件があった。設置したもののどうも動かないと ...

: classの取り扱い

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

: jQuery2.0がリリース

リリースされたとのこと。 http://blog.jquery.com/2013 ...

: jQueryで画像が存在すれば表示、なければノーイメージ画像を表示

やりたかった事は以下の通り。・画像のURLはcode.jpgみたいになってる ...

: jquery.snipeの使い方

使い方によっては面白くなりそう。 ■jquery.snipe http://ra ...

: jQueryで配列の値を検索

やりたかった事は、配列の中に特定の値があるかどうか検索し、その後の分岐を行いた ...

: スクロールしてもついてくる追尾型の広告を作る方法

スマホサイトとかでよく見る、スクロールしてもページ下部とかに常時表示されている追 ...

: FlashとjQueryを組み合わせたプラグインでWebカメラで撮影した画像をアップロード

FlashとjQueryを組み合わせたプラグインを用いてWebカメラで撮影した画 ...

: 配列をjQueryで取り扱う

やりたかった事は、・テキストボックスが複数ある。そのページに送信するクエリによ ...

: スマホ対応カルーセルスライダーslickの使い方

イメージスライダーでslickという使ったことないjQueryプラグインを見かけ ...

PREV: jQueryのプラグインでカラーコードを視覚的に選択
NEXT: MySQLのintのカラムで2147483647の値

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

関連記事