[JS]レスポンシブ対応のカラーピッカーを簡単に実装できる超軽量のスクリプト -Pickr
Post on:2018年7月27日
sponsors
Webページやアプリに外部スクリプトと数行のコードだけで、使いやすいカラーピッカーを簡単に実装できる超軽量のスクリプトを紹介します。
レスポンシブに完全対応しており、デスクトップのマウス操作でもスマホのタッチ操作にも対応しています。
他のスクリプトやスタイルシートに依存はなく、React、Vue、Angular、jQueryなどと一緒に利用することもできます。また、Bootstrap、MaterializeなどのCSSフレームワークへの互換性もあり、幅広く利用できます。
Pickrの特徴
- カラーピッカーの使い方は、簡単
- HEX, RGBa, CMYK, HSLa, HSVaをサポート
- jQueryなどの他スクリプトへの依存は無し
- Bootstrap, MaterializeなどのCSSフレームワークへの互換性
- 複数の色表現
- 色の比較
- 不透明度のコントロール
- タッチデバイスをサポート
- Nodejsのサポート
- 8kBの超軽量スクリプト
Pickrのデモ
カラーピッカーの実際の動作は、下記ページで楽しめます。
Pickrの使い方
Step 1: 外部ファイル
当スクリプトとスタイルシートを外部ファイルとして記述します。
|
1 2 3 4 5 6 7 8 9 10 |
<head> ... <link rel="stylesheet" href="pickr.min.css"> </head> <body> ... コンテンツ ... <script src="pickr.min.js"></script> </body> |
Step 2: HTML
カラーピッカーを配置する要素を用意します。
|
1 |
<div class="color-picker"></div> |
Step 3: JavaScript
カラーピッカーを配置する要素を指定し、スクリプトを実行します。
|
1 2 3 |
const pickr = Pickr.create({ el: '.color-picker' }); |
オプションでは、初期表示、ボタンの有無などを設定できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
const pickr = new Pickr({ // Selector or element which will be replaced with the actual color-picker. // Can be a HTMLElement. el: '.color-picker', // Default color default: 'fff', // Option to keep the color picker always visible. You can still hide / show it via // 'pickr.hide()' and 'pickr.show()'. The save button keeps his functionality, so if // you click it, it will fire the onSave event. showAlways: false, // If the color picker should have the body element as it's parent. appendToBody: false, // Close pickr with this specific key. // Default is 'Escape'. Can be the event key or code. closeWithKey: 'Escape', // Defines the position of the color-picker. Available options are // top, left and middle relativ to the picker button. // If clipping occurs, the color picker will automatically choose his position. position: 'middle', // Show or hide specific components. // By default only the palette (and the save button) is visible. components: { preview: true, // Left side color comparison opacity: true, // Opacity slider hue: true, // Hue slider // Bottom output bar, theoretically you could use 'true' as propery. // But this would also hide the save-button. output: { hex: true, // hex option (hexadecimal representation of the rgba value) rgba: true, // rgba option (red green blue and alpha) hsla: true, // hsla option (hue saturation lightness and alpha) hsva: true, // hsva option (hue saturation value and alpha) cmyk: true, // cmyk option (cyan mangenta yellow key ) input: true, // input / output element clear: true // Button which provides the ability to select no color }, }, // Button strings, brings the possibility to use a language other than English. strings: { save: 'Save', // Default for save button clear: 'Clear' // Default for clear button }, // User has changed the color onChange(hsva, instance) { hsva; // HSVa color object, if cleared null instance; // Current Pickr instance }, // User has clicked the save button onSave(hsva, instance) { // same as onChange } }); |
sponsors
