【JQuery:Palette Color Picker】の使い方

JavaScript

JQuery プラグイン「Palette Color Picker」の使い方です。パレット型のカラーピッカーです。設置や設定方法をまとめておきます。

Webツールで色を選択する必要があり、パレットカラーピッカーを導入しました。WordPress(Cocoon)の記事の中で使います。

パレットカラーの色データも公開しておきます。

JQuery プラグイン「Palette Color Picker」とは?

jQueryプラグインのカラーピッカーです。パレットから色が選択できます。色は任意のカラーコードを、あらかじめ設定可能です。綺麗で高機能なプラグインです。

JQuery プラグイン「Palette Color Picker」の使い方

JQuery Palette Color Picker v1.13 の設置

https://github.com/carloscabo/jquery-palette-color-picker

設置方法や利用法は、README.mdに記載があります。
必要なモジュールは以下の3つです。

[Requirements]
JQuery 1.7+
palette-color-picker.js
palette-color-picker.css

  • JQueryは、WordPressに実装済です。
  • サンプルとしてready.jsが添付されています。
    これを修正して、そのまま利用することにします。
    ここでは、ready.jsに色データを定義しました。

当サイト(https://lufa-tawasi.com/)では
/plug-in/color-picker/palette-color-picker.js
/plug-in/color-picker/palette-color-picker.css
/plug-in/color-picker/ready.js

としてFTPで配置しました。

ready.jsは、後ろにコードを置きました。コピペでお使いください。

Cocoon「head_custom」にCSS/JSソースを記述

JQuery プラグイン「Palette Color Picker」は、今回、WordPress(Cocoon)の特定の記事(この記事の中だけ)で使います。Cocoonのカスタムフィールド「head_custom」に、次のように記載しました。(以下のコードが<head>のタグの中にくればいいです)

<!-- palette-color-picker -->
<link rel="stylesheet" href="/plug-in/color-picker/palette-color-picker.css">
<script src="/plug-in/color-picker/palette-color-picker.js"></script>
<script src="/plug-in/color-picker/ready.js"></script>
<!-- /palette-color-picker -->

HTMLソースを記述

<input type="text" id="my-color-picker" name="my-color-picker" value="#005aa0">

↑ 動作見本として設置しておきます。お試しください。

idはユニークであることが動作条件です。ここでは「my-color-picker」というinput要素がマウスクリックされたとき、JQueryが発火します。

デフォルトでは2秒間、パレットが表示されています。色を選択して欄外をクリックすると、パレットが非表示になります。

ready.jsについて

JQuery プラグイン「Palette Color Picker」の各種オプションは、ready.jsで指定します。各自、お好みの色を定義してください。

実際のところ、カラーパレットにどの色を定義するか悩ましいです。いろいろ悩んだ結果・・

  • 「虹の7色」と「黒のモノトーン」を基本色として・・
  • 基本8色を6段階淡くし・・
  • 全48色(6×8)のカラーパレットを作成しました。

当初は「FF(256)」を4つに分け、4x4x4の64色を作成してみましたが、機械的に割った色はハテナ?でした。次にWebカラーネームで設置しましたが、色が多すぎて選ぶのが大変でした。

このプラグインは、オプションが豊富です。お好みのスタイルでカスタマイズしてください。

  • クリアボタンが追加できます。
  • パレットの表示位置を指定できます。
  • その他・・、詳しくはドキュメントを参照してください。
ready.js
// https://lufa-tawasi.com/
//
// to JQuery Palette Color Picker v1.13
// Color data

$(document).ready(function(){
  $('#my-color-picker').paletteColorPicker({
    colors: [
'#000000','#292929','#4e4e4e','#a2a2a2','#d0d0d0','#ffffff',
'#c7000b','#d84833','#e77058','#f39480','#fbb8a9','#ffdbd3',
'#d28300','#de973c','#e9ab64','#f2bf8a','#f9d4b0','#fde9d7',
'#00873c','#459b5b','#6daf7a','#92c39a','#b6d7bb','#dbebdc',
'#dfd000','#e8d749','#f0df72','#f6e796','#fbefb9','#fef7dc',
'#005aa0','#4973b0','#728dc0','#96a8cf','#b9c4df','#dce1ef',
'#181878','#493a8e','#6f5ea5','#9384bb','#b7abd2','#dbd4e8',
'#800073','#973d89','#ad65a0','#c38bb7','#d8b1cf','#ecd8e7'
    ],
    clear_btn: null,
    position: 'downside', // default -> 'upside'
  });
});

コメント

  1. takamine より:

    常に開いた2秒後固定で自動的に閉じてしまうのが扱いにくいと感じました。
    特に、開いて色を探している最中に消えてしまう、選んだ色が合わず別の色にしようと試している間に消えてしまう、という動作は非常に不快に感じ、使うのをやめよう、という判断にも繋がります。

    初回選択の前はタイマーは動作させない、何か色を選択したらその時点にタイマーを初期化、といった動作は必須かと思います。

  2. lufa より:

    コメントありがとうございます。

    「jquery-palette-color-picker」の本体「palette-color-picker.js」に
    「Default settings」の項があります。

    // Default settings
    defaults = {
    custom_class: null,
    colors: null,
    position: ‘upside’, // upside | downside
    insert: ‘before’, // default
    clear_btn: ‘first’, // default
    timeout: 2000, // default
    set_background: false, // default
    close_all_but_this: false // default
    },

    ここでの初期設定値を参考に「ready.js」でカスタマイズすると
    ある程度は、お好みの挙動になると思います。