jQuery UI widget for Style Color Picker Plugin

evol-colorpicker is a web color picker similar to the one in Microsoft Office 2010. It can be used inline or as a popup associated with a text box. It comes with several color palettes, can keep track of selection history and supports “transparent” color. It is a complete jQuery UI tool, supporting various configurations and themes.

color picker demo, jquery color picker, eyedropper in word, dynamic color picker, jquery color palette, add a color picker to your website

How to make use of it:

Installation:

# NPM
$ npm install evol-colorpicker

# Bower
$ bower install evol-colorpicker

1. Add the required jQuery & jQuery UI frameworks to your webpage.

<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>

2. Download and include the jQuery evol.colorpicker plugin’s information after jQuery library.

<link href="css/evol.colorpicker.min.css" rel="stylesheet">
<script src="js/evol.colorpicker.min.js"></script>

3. Create a primary inline coloration picker with a “web” default palette on your internet web page.

<div id="inline-demo"></div>

$('#inline-demo').colorpicker({
  color:'#31859b', 
  defaultPalette:'web'
});

4. Create a popup coloration picker appending to a text field that’s triggered on focus.

<input id="focus-demo" value="#dbeef3">

$('#focus-demo').colorpicker({showOn:'focus'});

5. Full plugin choices.

$('#SELECTOR').colorpicker({

  // initial color
  color: null,

  // example: ["#ff0000", "#00ff00", "blue"],
  customTheme: null, 

  // possible values: 'focus','button','both'
  showOn: 'both', 

  // Shows a trigger button next to the text box
  hideButton: false,

  // Shows color value on hover and click inside the palette
  displayIndicator: true,

  // Allows for selection of the "transparent color". 
  transparentColor: false,

  // Tracks selection history
  history: true,

  // possible values: 'theme', 'web'
  defaultPalette: 'theme', 

  // Used to translate the widget.
  strings: 'Theme Colors,Standard Colors,Web Colors,Theme Colors,Back to Palette,History,No history yet.'

});

6. Public strategies.

// enable the plugin
$("#SELECTOR").colorpicker("enable");

// Clears the color value (and close the popup palette if opened).
$("#SELECTOR").colorpicker("clear");

// disable the plugin
$("#SELECTOR").colorpicker("disable");

// Get or set the currently selected color value
var colorValue = $("##SELECTOR").colorpicker("val");
$("#SELECTOR").colorpicker("val", "#d0d0d0");

// Show the palette
$("#SELECTOR").colorpicker("showPalette");

// Hide the palette
$("#SELECTOR").colorpicker("hidePalette");

7. Events

// triggered when a color is selected.
$("#SELECTOR").on("change.color", function(event, color){
  $('#ELEMENT').css('background-color', color);
});

// triggered when the mouse moves over a color box on the palette
$("#SELECTOR").on("mouseover.color", function(event, color){
  $('#element').css('background-color', color);
});

Microsoft Office Style Color Picker Plugin, evol-colorpicker Github