color picker predefined palette - Free Download Custom Color Picker With Predefined Colors - simple-color

Free Download Custom Color Picker With Predefined Colors – simple-color

By Posted on

This time I will share jQuery Plugin and tutorial about Custom Color Picker With Predefined Colors – simple-color, hope it will help you in programming stack.

color picker predefined palette - Free Download Custom Color Picker With Predefined Colors - simple-color
File Size: 18.9 KB
Views Total: 702
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

simple-color is a jQuery plugin that converts an input field into a customizable color picker where the users are able to pick a color from a predefined palette.

More Features:

  • Change the background color of the input field accordingly.
  • Live preview mode that dynamically changes the background when hovering over a color grid.
  • Allows you to display the color code (hex) in the input field.
  • Allows you to set color & close all color pickers programmatically.

How to use it:

1. Load the jquery.simple-color.min.js script after loading the latest jQuery.

view source
1 <script src="/path/to/cdn/jquery.slim.min.js"></script>
2 <script src="/path/to/jquery.simple-color.min.js"></script>

2. Create a normal input field for the color picker. You can specify the initial color using the value attribute as follows:

view source
1 <input class="simple_color" value="#336699" />

3. Just call the function simpleColor on the input field and the plugin will do the rest.

view source
1 $(function(){
2   $('.simple_color').simpleColor();
3 });

4. You can also specify the initial color using the ‘defaultColor’ option. Default: ‘#fff’.

view source
1 $('.simple_color').simpleColor({
2   defaultColor: '#ff0000'
3 });

5. Customize the pre-defined colors for the palette.

view source
1 $('.simple_color').simpleColor({
2   colors: ['990033', 'ff3366', 'cc0033', 'ff0033']
3 });

6. Hide the regular input and create a custom ‘fake’ color input.

view source
1 $('.simple_color').simpleColor({
2   hideInput: false,
3   inputCSS: {
4     'border-style': 'dashed',
5     'width': '111px',
6     'margin-bottom': '2px' }
7   }
8 });

7. Determine whether to display the color code in the input field. Default: false.

view source
1 $('.simple_color').simpleColor({
2   displayColorCode: true,
3   colorCodeAlign: 'center',
4   colorCodeColor: false
5 });

8. Enable the live preview mode. Default: false.

view source
1 $('.simple_color').simpleColor({
2   livePreview: true
3 });

9. Customize the appearance of the color picker.

view source
1 $('.simple_color').simpleColor({
2   cellWidth: 10,
3   cellHeight: 10,
4   cellMargin: 1,
5   boxWidth: '115px',
6   boxHeight: '20px',
7   columns: 16,
8   insert: 'after'
9 });

10. Callback functions.

view source
01 $('.simple_color').simpleColor({
02   onSelect: function(colorCode, inputElement){
03     // do something
04   },
05   onCellEnter: function(colorCode, inputElement){
06     // do something
07   },
08   onClose: function(inputElement){
09     // do something
10   }
11 });

11. Set color.

view source
1 $('input').setColor('#cc3333');

12. Close the color picker.

view source
1 $('input').closeChooser();

This awesome jQuery plugin is developed by recurser. For more Advanced Usages, please check the demo page or visit the official website.

Related posts: