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

By 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.

File Size: 32.2 KB
Views Total: 3841
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

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.

view source
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.

view source
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.

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

4. Attach the color picker to your text field.

view source
1 <input type="text" id="example2" readonly></input>
view source
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.

view source
1 <button id="example3"></button>
view source
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.

view source
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.

view source
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}.
15      

Related posts: