スマホ対応のjQueryのカラーピッカープラグイン「excolor」の利用方法
2024/01/13
以前の記事でカラーピッカープラグインのことを書いたけどスマホでは使えない。なのでスマホ対応のものを探したところexcolorというプラグインを見つけた。以下にサンプルとソースコードをメモ。
excolor
https://github.com/rjfranco/excolor
サンプル
https://taitan916.info/sample/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>
その他
上記のソースで一応使えるんだけど以下のタッチイベント対応のものに差分を入れ替えるともっとスムーズに使えた。
https://github.com/akihiro1977/excolor
js,css,imgフォルダごと上書き保存でOK。
関連記事
-
-
formでGET送信時に空のパラメータを送信しない方法(cleanQuery)
フォームでGET送信する際、通常だと空のパラメータも送信される。結果として「ドメ ...
-
-
jQueryでページ表示時にラジオボタンやチェックボックスにcheckedがついている場合にイベントを実行する方法
ラジオボタンやチェックボックスをチェックした際に、jQuery側で何らかのイベン ...
-
-
jQueryのプラグインで簡単にイメージスライダーを作成(bxslider)
画像のスライダーを作る時に便利なプラグインであるbxslider。簡単に使えるし ...
-
-
jQueryにて特定のIDが存在するかチェックし分岐処理する方法
jQueryにて特定のIDが存在するかチェックし分岐処理したいというケースがあっ ...
-
-
javascriptやjQueryで画像を書き換えても変わらない場合
けっこう前に画像をアップロードしてリアルタイムにプレビューする機能を作った時に、 ...