勉強したことのメモ

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

JavaScriptにてカラーコードのピッカーを実装できる「jscolor」の利用方法

  JavaScript

フォームのテキストボックスにカラーコードのピッカーを実装したかった。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

  関連記事

JavaScriptでデータをGzip等で圧縮できる「pako」ライブラリの利用方法

以前「zcookies」というライブラリの利用方法をメモしたが、当該ライブラリの ...

JavaScriptでダミー画像(プレースホルダー画像)を表示する「Holder.js」ライブラリの利用方法

サイトの開発段階で「本番用の画像はまだ用意できていない」等の理由によりダミー画像 ...

ブラウザ開発者ツールの起動を検出しソースコード変更やリダイレクト設定できる「console-ban」ライブラリの利用方法

他サイトのソースコードを拝見するため開発者ツールを開こうとすると、偶に「デバッガ ...

jQueryの通知メッセージ用ライブラリ「Toastr」の利用方法

あるサイトのソースコードを拝見しているとToastrというJSファイルをCDNで ...

JavaScriptにて電子書籍や漫画ビューア用のライブラリ「ToraViewer」の利用方法

電子書籍や漫画ビューア用を設置したい。条件としてはレスポンシブ対応していること。 ...