勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

スマホ対応のjQueryのカラーピッカープラグイン「excolor」の利用方法

   2024/01/13  jQuery JavaScript

以前の記事でカラーピッカープラグインのことを書いたけどスマホでは使えない。なのでスマホ対応のものを探したところ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。

 - jQuery JavaScript

  関連記事

エリア→都道府県→路線→駅名を連携する絞り込みセレクトメニューの設置方法

エリア→都道府県→路線→駅名のドリルダウン検索をプルダウン形式で設置したい。以前 ...

JavaScript / jQueryにてページ表示時に指定したテキストボックスにフォーカスさせる方法

ページを開いた際に指定したテキストボックス(input type="text") ...

AjaxのJSONP使用でPHPで作った配列をJSに返す方法

AというサイトからBというサイトにAjax通信し、Bの方ではMySQLに接続して ...

tableタグでスクロール時にヘッダーを残して表示する方法(jquery-decapitate)

テーブルタグ内で縦にスクロールした際にテーブルヘッダー部分は表示させたままテーブ ...

jQueryでコンテンツのスライド

jQueryもしくはJavaScriptでリンクを押すと 右から左にコンテンツを ...