スマホ対応のjQueryのカラーピッカープラグイン
2015/05/30
以前の記事でカラーピッカープラグインのことを書いたけど、スマホでは使えない。なのでスマホ対応のものを探したところ、良さそうなのがあった。
■excolor
https://github.com/rjfranco/excolor
■サンプル
http://sample.taitan916.info/colorpicker2/
■ソース
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<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。
関連記事
-
-
getElementsByTagName
うろ覚えだけど業務中に、 document.getElementById('aa ...
-
-
jQueryでのやりたい事
フォーム周りをよく使うのでまとめておく。 ・テキストボックスのvalue取得、書 ...
-
-
PHPとSQLiteでi-mobileのデータをグラフ化
i-mobileでクリック保証のアフィリエイトだけど数値が並んでいるだけでグラフ ...
-
-
クリップボードの操作
<? /* クリックでクリップボードにコピーする。 http://zxcv ...
-
-
要素の表示or非表示
今まで要素の表示or非表示をCSSで操作する際、 display:none; / ...
-
-
jQueryのappendとprepend
よく忘れるのでメモ。 ■append(後ろに足す) http://semooh. ...
-
-
jquery.cookie.jsでcookieを取り扱う
機能拡張の依頼があってそのページを見たら jquery.cookie.jsが読み ...
-
-
prototypeとjqueryの競合
ちょいちょい見るが、実際に競合をおこしているケースに あたったのでメモ。 ↓↓の ...
-
-
ダウンロード無しで外部ファイル呼び出し
■jQuery http://scriptsrc.net/ ■bootstrap ...
-
-
POP広告をjQueryで再現する方法
サイト内のリンクをクリックすると、新しいタブもしくはウィンドウで開く広告をちょい ...