Lightweight Configurable jQuery Color Picker Plugin
File Size: | 32 KB |
---|---|
Views Total: | 4843 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A lightweight jQuery plugin used to create a nice, clean color picker for input field that supports hsl, hsla, rgb, rgba and hex color formats.
How to use it:
1. Load the style sheet file jquery.colorpicker.bygiro.css
in the head section of the document.
<link href="jquery.colorpicker.bygiro.css" rel="stylesheet">
2. Create a normal input field to accept the color input.
<input type="text">
3. Create an element to display the preview of user selected color.
<span class="myColorPicker-preview"> </span>
4. Load jQuery library and the jquery.colorpicker.bygiro.js
at the end of the document so the pages load faster.
<script src="//code.jquery.com/jquery-3.1.0.slim.min.js"></script> <script src="jquery.colorpicker.bygiro.js"></script>
5. Call the function on the input field and specify the CSS selector of color preview area.
$('.myColorPicker').colorPickerByGiro({ preview: '.myColorPicker-preview' });
6. Specify the color format you want to use.
$('.myColorPicker').colorPickerByGiro({ preview: '.myColorPicker-preview', format: 'rgb' });
7. All default configuration options.
$('.myColorPicker').colorPickerByGiro({ // a valid CSS selector / a DOM element / a jQuery-jqLite collection preview: '', // show the color picker showPicker: true, // hsl, hsla, rgb, rgba and hex format: 'rgb', // spaces in pixels sliderGap: 6, cursorGap: 6, // internationalization text: { close: 'Close', none: 'None' } });
Change log:
2016-09-22
- v0.0.2
This awesome jQuery plugin is developed by bygiro. For more Advanced Usages, please check the demo page or visit the official website.