Photoshop Color Picker jQuery Colpick REMIX - Free Download Photoshop-style Full Featured Color Picker For jQuery - wcolpick

Free Download Photoshop-style Full Featured Color Picker For jQuery – wcolpick

Posted on

This time I will share jQuery Plugin and tutorial about Photoshop-style Full Featured Color Picker For jQuery – wcolpick, hope it will help you in programming stack.

Photoshop Color Picker jQuery Colpick REMIX - Free Download Photoshop-style Full Featured Color Picker For jQuery - wcolpick
File Size: 32.2 KB
Views Total: 3841
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

wcolpick(Colpick REMIX) is a jQuery plugin to create responsive, cross-browser, touch-enabled, Photo-like RGB/HEX/HSB/HSL color pickers for your web application.

It can be used inline or as a popup bound to any clickable element (e.g. input fields and buttons).

Based on the jQuery Colpick color picker plugin. Dual licensed under GPL v3.0 and MIT licenses.

How to use it:

1. Load the following stylesheets in the header of the html document.

1 /*Loading main layout variant (standard)*/
2 @import 'css/layouts.css';
3  
4 /*Loading alternative layout variants*/
5 @import 'css/layouts-s.css';
6 @import 'css/layouts-xl.css';
7  
8 /*Loading color schemes*/
9 @import 'css/color-schemes.css';

2. Load JQuery library and the jQuery Colpick REMIX plugin’s script at the end of the document.

1 <script src="//code.jquery.com/jquery.min.js"></script>
2 <script src="colpick-remix/colpickRmx.js"></script>

3. Create an inline color picker on the web page.

1 <div id="example1"></div>
1 $('#example1').loads();

4. Attach the color picker to your text field.

1 <input type="text" id="example2" readonly></input>
01 $('#example2').loads({
02   onSubmit: function(ev) {
03     $(ev.el).css('border-color', '#' + ev.hex);
04     $(ev.el).val("#" + ev.hex);
05     $(ev.el).hides();
06   },
07   onHide: function(ev) {
08     var color = $(ev.el).getColor("hex", true);
09     $(ev.el).setColor(color, false);
10   }
11 });

5. Attach the color picker to an element you specify.

1 <button id="example3"></button>
01 $('#example3').loads({
02   flat: false,
03   enableAlpha: false,
04   layout: 'rgbhex',
05   compactLayout: true,
06   color: 'c9264a',
07   onLoaded: function(ev) {
08     var hex = $(ev.el).getColor("hex", true);
09     $(ev.el).css('background-color', '#' + hex);
10   },
11   onHide: function(ev) {
12     var hex = $(ev.el).getColor("hex", true);
13     $(ev.el).css('background-color', '#' + hex);
14     $(ev.el).setColor(hex, false);
15   },
16   onChange: function(ev) {
17     $(ev.el).css('background-color', '#' + ev.hex);
18   },
19   onSubmit: function(ev) {
20     $(ev.el).hides();
21   }
22 });

6. All possible options to customize the color picker plugin.

01 $('#element').newColpick({
02   alphaOutline: true,
03   appendToBody: false,
04   arrowsColor: 'default',
05   backgroundColor: 'default',
06   border: 1,
07   borderColor: 'default',
08   checkersColor: 'default',
09   color: {h:0, s:0, b:20, a:1},
10   colorOutline: true,
11   colorScheme: 'light-full', // Light, Light Full, Dark, and Dark Full
12   colorSelOutline: true,
13   compactLayout: false,
14   enableAlpha: true,
15   enableSubmit: true,
16   enableUpDown: true,
17   fieldsBackground: 'default',
18   flat: true,
19   hueOutline: true,
20   layout: 'full', // "full", "rgbhex", "hex"
21   livePreview: true,
22   polyfill: false,
23   position: 'auto', // 'center', 'auto'
24   readonlyFields: false,
25   readonlyHexField: false,
26   showEvent: 'click',
27   submitBackground: 'default',
28   submitColor: 'default', // "light", "dark", "default"
29   variant: 'standard' // "small", "standard", "extra-large"
30 });

7. Event handlers.

01 $('#element').newColpick({
02  
03   /* Attributes:
04      bySetColor: true or false
05      colorDiv: the color picker.
06      el: the parent element
07      hex: hex color
08      hexa: hexa color
09      hsb: {h: float, s: float, b: float}.
10      hsba: {h: float, s: float, b: float, a: float}.
11      hsl: {h: float, s: float, l: float}.
12      hsla: {h: float, s: float, l: float, a: float}.
13      overridePos: allows to set the position of the color picker
14      rgb: {r: int, g: int, b: int}.