勉強したことのメモ

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

jQueryのプラグイン(ColorPicker)でカラーコードを視覚的に選択させる方法

   2024/01/13  jQuery

カラーコードを入力するフォームがあって、HTMLやCSSの知識がない方のために、視覚的にカラーコードを選択させたかった。調べたところColorPickerというjQueryのプラグインがあったのでサンプルとソースのメモ。

 

プラグインダウンロード先

http://www.eyecon.ro/colorpicker/#download

 

サンプル

https://taitan916.info/sample/colorpicker/

 

ソース

<html>
<head>
<title>カラーピッカーのテスト</title>
<link rel="stylesheet" href="css/colorpicker.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/colorpicker.js"></script>
<script>
<!--
$(function(){
    $('#color').ColorPicker({
        onSubmit: function(hsb, hex, rgb, el) {
            $(el).val(hex);
            $(el).ColorPickerHide();
        },
        onBeforeShow: function () {
            $(this).ColorPickerSetColor(this . value);
        }
    });
    $('#color').bind('keyup',function() {
        $(this).ColorPickerSetColor(this . value);
    });
});
//-->
</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>

 

参考サイト

http://alphasis.info/2011/06/jquery-colorpicker-input/

 

その他

jQueryとプラグインを読み込んで、ちょっと書くだけで最低限必要な機能は使えた。ただ、iphoneで確認したところ、パレット部分みたいなところは動かせないみたい。スマホ用のページで使う場合は注意が必要。

 - jQuery

  関連記事

jQueryで新しく追加した要素に対してイベントがきかない場合の対応

jQueryで新たに追加した要素に対して、 clickイベントを使いたかったけど ...

Lightboxで画像拡大時に文字タイトルとリンクをつける

lightboxで画像をクリックして拡大した際に、文字タイトルとその文字にリンク ...

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

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

ラジオボタンのカスタムデータ属性を取得し、特定の値の場合はチェックさせない方法

ASPを使用したサイトで特定のradioボタンは選択不可にしたいというケースがあ ...

jQueryでHTMLの特定要素をループ時に逆順で処理する方法

jQueryでリスト(li)タグ等の特定要素をeach()でループ処理する場合、 ...