JavaScriptにてカラーコードのピッカーを実装できる「jscolor」の利用方法
フォームのテキストボックスにカラーコードのピッカーを実装したかった。HTMLのみで実装する方法やjQueryプラグインで実装する方法を以前にメモしたが、今回はJavaScriptのみで実装したい。ライブラリを探したところ「jscolor」がシンプルで良さそう。以下にサンプルと実装方法をメモ。
サンプル
https://taitan916.info/sample/jscolor/
カラーコード選択後にsubmitボタンを押すと選択したカラーコードが表示される筈。
CDN
CDNで使う場合は以下を記述する。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.5.2/jscolor.min.js"></script>
異なるバージョンを利用したい場合は以下から探す。
https://cdnjs.com/libraries/jscolor
使用方法
ライブラリを読み込みテキストボックスに「data-jscolor="{}"」を設定すること。
尚、初期選択カラーを指定したい場合はvalue属性で指定すればOK。
<input name="color" data-jscolor="{}">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.5.2/jscolor.min.js"></script>
関連記事
-
-
JavaScriptのライブラリ「crypto-js」を使用して暗号化・復号化・ハッシュ化する方法
JavaScriptにてCookie等にデータを保存する際に暗号化したものを保存 ...
-
-
PHPで「ramsey/uuid」ライブラリを用いてUUIDを生成する方法
PHPでUUID(Universally Unique Identifier)を ...
-
-
Lightboxの最新版ライブラリ「Lightbox3」の利用方法サンプル
画像拡大(モーダル表示)系のライブラリはLightbox2を使用していたが、最新 ...
-
-
PHPでOGPタグ(metaタグ)を簡単に取得できる「OpenGraph.php」の利用方法
PHPでOGPタグ(metaタグ)を取得する際、file_get_content ...
-
-
JavaScriptでオブジェクトをzlib圧縮してCookieに保存できる「zcookies」ライブラリの利用方法
あるシステムでCookieを保存している部分があった。ただ、日本語を保存している ...